簡單的理解vue中data資料的改變影響視圖
前言
這個簡化了vue虛擬dom的渲染，為了更好地理解vue中data資料的改變影響視圖這句話而寫的，
請熟知 Object.defineProperty和原型原型鏈的知識，閉包也要有所掌握
我們用到的函式
| data物件變數 | 我們需要的資料 |
|---|---|
| updateViews（）方法 | 簡化的渲染方法 |
| observer（）方法 | 判斷元素并且運行系結Object.defineProperty的方法 |
| defineReactive（）方法 | 系結Object.defineProperty的具體操作 |
監聽
渲染方法是固定的所以我們寫在前面
updateViews方法
function updateViews () {
console.log('資料更新了');
}
普通監聽
我們首先創建一個簡單的data資料,同時呼叫observer()方法
const data = {
nihao: '123'，
num: 2
}
observer(data)
寫入observer的方法
function observer (data) {
for (const key in data) {
defineReactive(data, key, data[key])
}
}
寫入defineReactive方法
function defineReactive (data, key, value) {
Object.defineProperty(data,key,{
get() {
return value
},
set(nwevalue) {
if (value !== nwevalue) {
updateViews()
value = nwevalue
}
}
})
}
請結合defineReactive和observer一起觀看
- 首先我們創建了data資料并且同時呼叫observer(data)方法，將我們的創建的data傳參傳過去
- observer()方法接收到我們的data，然后進行for回圈來為我們data每個元素系結Object.defineProperty，
- 可以看到我們再Object.defineProperty里面的set方法中呼叫了， updateViews()渲染方法，這樣才實作了，資料更新視圖的要求，
但是現在有兩個問題，如果data中的資料也是的物件，我們如何監聽data物件中的物件中暑資料呢，說到了這里大家是不是想到了遞回，沒錯我來進行代碼演示
物件監聽（深度監聽）
data資料
const data = {
nihao: '123',
list: {
nihao: '15'
}
}
// 呼叫方法
observer(data)
observer的方法
function observer (data) {
if (typeof data !== 'object' || data ===null) {
return data;
}
for (const key in data) {
defineReactive(data, key, data[key])
}
}
defineReactive方法
function defineReactive (data, key, value) {
// 深度監聽
observer(value)
Object.defineProperty(data,key,{
get() {
return value
},
set(nwevalue) {
if (value !== nwevalue) {
updateViews()
value = nwevalue
}
}
})
}
這里我們用到了遞回
- 在observer加入了一個判斷條件，如果我們傳入的data他不是一個物件或者是空的，他就不用執行我們的遞回了，因為根本沒有必要，
- defineReactive方法中我們運用到了遞回的知識，defineReactive的遞回和observer的判斷，打出了一套很好的配合，
又有新的問題，我們不能監聽陣列元素的增刪改，所以這個也是Object.defineProperty的一個弊端
陣列監聽
時間太晚了現在凌晨2.30了，等我更新
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/272504.html
標籤：其他