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),可以用新數組替換舊數組。