5、《揭祕一線互聯網企業 前端JavaScript高級面試》視頻教程總結系列五：MVVM和Vue 相關

 

---

 

 系列目錄：http://www.javashuo.com/article/p-mylkajzy-nt.html

 

---

 

問題一：說一下使用Jquery和使用vue的區別。

 

Jquery是對繁瑣的Dom操做進行了封裝，同時也在裏面封裝了兼容瀏覽器的處理方式，更方便開發人員選取和操做DOM對象，在這裏，視圖和數據是耦合在一塊兒的，這樣不利於複雜業務邏輯的開發；

而vue解耦了視圖和數據，將Dom相關操做徹底封裝在了內部，經過數據來驅動視圖，它只關心數據的變化，將開發人員從繁瑣複雜的Dom操做中解放了出來，可以更加專一於前端業務邏輯的實現。

 

---

 

問題二：如何理解MVVM？

 

MVVM是一種基於前端開發的架構模式，它起源於後端MVC框架，是爲了適應日漸複雜的前端業務而生。

由於後端MVC模式並不徹底適合前端場景，因此前端開拓者們將MVC中的C - Controller，變形爲VM - ViewModel。

VM在MVVM模式中至關於一座橋樑，解耦了視圖和數據，同時又鏈接着視圖和數據。

視圖經過事件綁定的方式改變數據，數據經過數據綁定的方式改變視圖，它們都是經過VM來進行交互的。

 

---

 

問題三：vue的三要素有哪些？

 

響應式、模板引擎、渲染。

 

---

 

問題四：vue是如何監聽到data的每一個屬性變化的？

 

經過Object.defineProperty()方法實現，Object.defineProperty() 方法會直接在一個對象上定義一個新屬性，或者修改一個對象的現有屬性， 並返回這個對象。

它接收的第三個參數中含有兩個函數，分別是set()和get()，在這兩個函數中就能夠添加自定義的監聽邏輯，從而達到監聽數據變化的目的。

vue經過遍歷data屬性，在遍歷函數中，利用Object.defineProperty()將每個data屬性綁定在vue對象上，同時添加監聽邏輯，這樣vue就能夠監聽到data屬性的變化。

 

下面是實現的核心函數：

var vm= {}; var data = { name:'zhangsan', age:20 }; var key; for(key in data){ (function(key){ // 命中閉包，保證key的獨立空間
 Object.defineProperty(vm, key, { get:funtion(){ // 此處可寫監聽邏輯
                return data[key]; }, set:function(newVal){ // 此處可寫監聽邏輯
                data[key] = newVal; } }) })(key) }

 

---

 

 
問題五：vue中如何解析模板？

一、模板是什麼？

     模板的本質是字符串，最開始是以字符串形式存在的，

     它與html格式類似，卻又存在很大區別，html是靜態的，而模板中由於存在着一些循環、判斷等邏輯，因此它是能夠動態展現數據的，

     模板最終還須要轉換成html，以便顯示。

二、render函數

     由於字符串並不能處理邏輯，也由於模板須要轉換成html渲染出來，這些都須要js來完成，

     因此須要先將模板轉換成js代碼，這寫須要經過一個js函數（render函數）來處理的。

 

      render函數解析：

            ①模板中全部信息都包含在了render函數中

            ②this即 vm

            ③price即 this.price， 即 vm.price， 即data中的price

            ④_c即 this._c，即 vm._c

 

 

 

 

三、render函數與vdom

未看完，待續。。。