MVVM M：模型（Model）：data V：視圖（View）：模板 VM：視圖模型（ViewModel）：Vue實例對象 Vue收到了MVVM模型的啟發，MVVM是vue實現數據驅動視圖和雙向數據綁定的核心原理，通過ViewModel監聽DOM和數據源的變化。 Object.defineProp ...
MVVM
- M：模型（Model）：data
- V：視圖（View）：模板
- VM：視圖模型（ViewModel）：Vue實例對象
Vue收到了MVVM模型的啟發，MVVM是vue實現數據驅動視圖和雙向數據綁定的核心原理，通過ViewModel監聽DOM和數據源的變化。
Object.defineProperty
let number = 15
let person = {
name: 'zs',
gender: 'male',
age: 20
}
//此種方式添加的屬性，不可被枚舉（遍歷）
Object.defineProperty(person, 'age', {
value: 18,
enumerable: true,//控制是否可枚舉（遍歷）
writable: true,//控制是否可修改
configurable: false,//控制是否可刪除
//讀取person的age屬性時，get函數就會被調用，返回值是age的值
get() {
return number
},
//修改person的age屬性時，set函數就會被調用，返回值是value的值
set(value) {
number = value
}
})
數據代理
通過一個對象代理對另一個對象的操作（讀/寫），更加方便操作data中的數據。
基本原理：
- 通過
Object.defineProperty（）把data對象所有屬性添加到vm上。 - 為每一個添加到vm上的屬性，都指定一個getter和setter。
- 在getter和setter內部去操作data中對應的屬性。
Vue監測數據改變的原理
Vue會監視data中所有層次的數據。
“響應式”，這個詞你可以已經聽過很多遍，簡單來說響應式就是：數據發生變化，UI頁面做出響應，但Vue是怎麼發現數據被修改了？
Vue如何檢測對象屬性的改變？
將data代理到vm實例，在vm上通過Object.defineProperty（）添加getter和setter，通過setter實現監視，且要在new Vue時就傳入要監測的數據。
- 對象中後添加的數據，Vue預設不做響應式處理；
- 如需給後添加的屬性做響應式，可以使用：
Vue.set(target,propertyName/index,value)
vm.$set(target,propertyName/index,value)
//vue.set不能直接給data加數據（對象不能是vue實例或Vue實例的根數據對象）,只能給其中的對象添加
Vue如何檢測數組的改變？
Vue通過包裝數組身上常用的方法來實現（pop、push、shift、unshift、sort、sploce、reverse），當調用以上被包裹的方法時，會觸被Vue檢測到，也可以使用Vue.set或vm.$set。
第一步：正常調用原生Array.prototype上的方法；
第二步：重新解析模板、生成虛擬DOM...進而更新頁面；
當使用（filter、concat、slice），可以用新數組替換舊數組。
