Vue響應(yīng)式：
組件data數(shù)據(jù)一旦變化械念，立刻觸發(fā)視圖的更新
實(shí)現(xiàn)數(shù)據(jù)驅(qū)動(dòng)視圖的第一步
1. 核心API - Object.defineProperty
基本用法
const data={}
var name='zhangsan'
Object.defineProperty(data,"name",{
get:function(){
console.log('get')
return name
},
set:function(newVal){
console.log('set')
name = newVal
}
})
console.log(data.name)
data.name="lisi"
console.log(data.name)
// get zhangsan
// set
// get lisi
在基本使用中沈条，不能監(jiān)聽復(fù)雜對(duì)象和數(shù)組
2. 響應(yīng)式需要監(jiān)聽對(duì)象（深度監(jiān)聽）疾忍、監(jiān)聽數(shù)組
實(shí)現(xiàn)思路：
- 定義觸發(fā)視圖更新的方法：updateView()
- 重新定義數(shù)組原型 -> 實(shí)現(xiàn)調(diào)用數(shù)組方法時(shí)觸發(fā)視圖更新
創(chuàng)建新新對(duì)象僧凰，原型指向oldArrayProperty,再擴(kuò)展新新的方法羡儿，不會(huì)影響原型败匹，不污染全局變量.
在新定義的數(shù)組原型用添加 updateView()
- 深度監(jiān)聽對(duì)象方法 observer()
判斷是否是數(shù)組或?qū)ο箢愋痛殡剩皇堑脑捊白伲苯臃祷?br> 若是數(shù)組類型,指向自定義的數(shù)組原型
重新定義各個(gè)數(shù)據(jù)
- 自定義監(jiān)聽方法 defineReactive()
在 Object.defineProperty 中的set方法中添加 updateView()方法觸發(fā)視圖更新；
在調(diào)用set方法前芹啥，定義深度監(jiān)聽方法 observer() 實(shí)現(xiàn)
- 監(jiān)聽
準(zhǔn)備一個(gè)對(duì)象數(shù)據(jù)
調(diào)用 深度監(jiān)聽對(duì)象方法 observer()
遍歷對(duì)象每個(gè)屬性锻离，調(diào)用自定義監(jiān)聽方法 defineReactive()實(shí)現(xiàn)監(jiān)聽
實(shí)現(xiàn)代碼：
// 觸發(fā)更新視圖
function updateView() {
console.log("視圖更新")
}
//重新定義數(shù)組原型
const oldArrayProperty=Array.prototype;
// 創(chuàng)建新新對(duì)象，原型指向oldArrayProperty,再擴(kuò)展新新的方法墓怀，不會(huì)影響原型
const arrProto = Object.create(oldArrayProperty);
['push','pop','shift','unshift','splice'].forEach(methodName=>{
arrProto[methodName] = function () {
updateView()//觸發(fā)視圖更新
oldArrayProperty[methodName].call(this,...arguments)//
// Array.prototype.push.call(this,...arguments) 真正數(shù)組原型的處理
}
});
// 定義自定義屬性汽纠，監(jiān)聽起來(lái)
function defineReactive(target, key, value) {
//深度監(jiān)聽
observer(value)
Object.defineProperty(target, key,{
get(){
return value;
},
set(newValue){
if (value != newValue) {
// 設(shè)置新值時(shí)-監(jiān)聽
observer(value)
// 注意，value一直在閉包中捺疼，此處設(shè)置完之后，再get時(shí)也是會(huì)獲取最新的值永罚。
value = newValue
// 觸發(fā)更新視圖
updateView()
}
}
})
}
// 監(jiān)聽對(duì)象屬性
function observer(target) {
if (typeof target != 'object' || target === null) {
// 不是對(duì)象或者數(shù)組
return target
}
if (Array.isArray(target)) {
// 將數(shù)組類型數(shù)據(jù) 指向 自定義的數(shù)組原型
target.__proto__ = arrProto
}
// 重新定義各個(gè)屬性
for (const key in target) {
defineReactive(target, key, target[key])
}
}
// 準(zhǔn)備數(shù)據(jù)
const data = {
name: "張三",
age: 20,
info:{
address:"北京" //深度監(jiān)聽
},
nums:[10,20,30]
}
// 監(jiān)聽數(shù)據(jù)
observer(data)
// 測(cè)試
// data.name = '李四'
// data.age = 22
// data.info.address = "上海" //深度監(jiān)聽
// data.x = '100' //新增屬性 監(jiān)聽不到--所以有vue.set
// delete data.name //刪除屬性啤呼，監(jiān)聽不到 --所以有vue.delete
data.nums.push(4) //監(jiān)聽數(shù)組
3. Object.defineProperty的一些缺點(diǎn)
- 深度監(jiān)聽，需要遞歸到底呢袱，一次性計(jì)算量大
- 無(wú)法監(jiān)聽新增屬性/刪除屬性【解決辦法：Vue.set Vue delete官扣，新增和刪除后通知視圖更新】
- 無(wú)法原生監(jiān)聽數(shù)組，需要特殊處理
vue 3.0 啟用 Proxy
- Proxy有兼容性問(wèn)題
- Proxy兼容性問(wèn)題羞福，無(wú)法polyfill
