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），可以用新陣列替換舊陣列，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/547319.html
標籤：其他
上一篇：結構型-裝飾器模式
下一篇：結構型-裝飾器模式