淺析vue偵測數(shù)據(jù)的變化之基本實(shí)現(xiàn)
下面我們就來模擬偵測數(shù)據(jù)變化的邏輯。
強(qiáng)調(diào)一下我們要做的事情：數(shù)據(jù)變化，通知到外界（外界再做一些自己的邏輯處理，比如重新渲染視圖）。
開始編碼之前，我們首先得回答以下幾個(gè)問題：
1.如何偵測對象的變化？
使用 Object.defineProperty()。讀數(shù)據(jù)的時(shí)候會觸發(fā) getter，修改數(shù)據(jù)會觸發(fā) setter。 只有能偵測對象的變化，才能在數(shù)據(jù)發(fā)生變化的時(shí)候發(fā)出通知2.當(dāng)數(shù)據(jù)發(fā)生變化的時(shí)候，我們通知誰？
通知用到數(shù)據(jù)的地方。而數(shù)據(jù)可以用在模板中，也可以用在 vm.$watch() 中，地方不同，行為也不相同，比如這里要渲染模板，那里要進(jìn)行其他邏輯。所以干脆抽象出一個(gè)類。當(dāng)數(shù)據(jù)變化的時(shí)候通知它，再由它去通知其他地方。 這個(gè)類起名叫 Watcher。就是一個(gè)中介。3.依賴誰？
通知誰，就依賴誰，依賴 Watcher。4.何時(shí)通知？
修改數(shù)據(jù)的時(shí)候。也就是 setter 中通知5.何時(shí)收集依賴？
因?yàn)橐ㄖ脭?shù)據(jù)的地方。用數(shù)據(jù)就得讀數(shù)據(jù)，我們就可以在讀數(shù)據(jù)的時(shí)候收集，也就是在 getter 中收集6.收集到哪里？
可以在每個(gè)屬性里面定義一個(gè)數(shù)組，與該屬性有關(guān)的依賴都放里面編碼如下（可直接運(yùn)行）：
// 全局變量，用于存儲依賴let globalData = undefined;// 將數(shù)據(jù)轉(zhuǎn)為響應(yīng)式function defineReactive (obj,key,val) { // 依賴列表 let dependList = [] Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: function () {// 收集依賴（Watcher）globalData && dependList.push(globalData)return val }, set: function reactiveSetter (newVal) {if(val === newVal){ return}// 通知依賴項(xiàng)（Watcher）dependList.forEach(w => { w.update(newVal, val)})val = newVal } });}// 依賴class Watcher{ constructor(data, key, callback){this.data = data;this.key = key;this.callback = callback;this.val = this.get(); } // 這段代碼可以將自己添加到依賴列表中 get(){// 將依賴保存在 globalDataglobalData = this;// 讀數(shù)據(jù)的時(shí)候收集依賴let value = this.data[this.key]globalData = undefinedreturn value; } // 數(shù)據(jù)改變時(shí)收到通知，然后再通知到外界 update(newVal, oldVal){this.callback(newVal, oldVal) }}/* 以下是測試代碼 */let data = {};// 將 name 屬性轉(zhuǎn)為響應(yīng)式defineReactive(data, ’age’, ’88’)// 當(dāng)數(shù)據(jù) age 改變時(shí)，會通知到 Watcher，再由 Watcher 通知到外界new Watcher(data, ’age’, (newVal, oldVal) => { console.log(`外界：newVal = ${newVal} ; oldVal = ${oldVal}`)})data.age -= 1 // 控制臺輸出： 外界：newVal = 87 ; oldVal = 88
在控制臺下繼續(xù)執(zhí)行 data.age -= 1，則會輸出 外界：newVal = 86 ; oldVal = 87。
附上一張 Data、defineReactive、dependList、Watcher和外界的關(guān)系圖。
首先通過 defineReactive() 方法將 data 轉(zhuǎn)為響應(yīng)式（defineReactive(data, ’age’, ’88’)）。
外界通過 Watcher 讀取數(shù)據(jù)（let value = this.data[this.key]），數(shù)據(jù)的 getter 則會被觸發(fā)，于是通過 globalData 收集Watcher。
當(dāng)數(shù)據(jù)被修改（data.age -= 1）, 會觸發(fā) setter，會通知依賴（dependList），依賴則會通知 Watcher（w.update(newVal, val)），最后 Watcher 再通知給外界。
二、關(guān)于 Object 的問題思考一下：上面的例子，繼續(xù)執(zhí)行 delete data.age 會通知到外界嗎？
不會。因?yàn)椴粫|發(fā) setter。請接著看：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title> <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script></head><body> <div id=’app’><section> {{ p1.name }} {{ p1.age }}</section> </div><script>const app = new Vue({ el: ’#app’, data: {p1: { name: ’ph’, age: 18} }})</script></body></html>
運(yùn)行后，頁面會顯示 ph 18。我們知道更改數(shù)據(jù)，視圖會重新渲染，于是在控制臺執(zhí)行 delete app.p1.name，發(fā)現(xiàn)頁面沒有變化。這與上面示例中執(zhí)行 delete data.age 一樣，都不會觸發(fā)setter，也就不會通知到外界。
為了解決這個(gè)問題，Vue提供了兩個(gè) API（稍后將介紹它們）：vm.$set 和 vm.$delete。
如果你繼續(xù)執(zhí)行 app.$delete(app.p1, ’age’)，你會發(fā)現(xiàn)頁面沒有任何信息了（name 屬性已經(jīng)用 delete 刪除了，只是當(dāng)時(shí)沒有重新渲染而已）。
注：如果這里執(zhí)行 app.p1.sex = ’man’，用到數(shù)據(jù) p1 的地方也不會被通知到，這個(gè)問題可以通過 vm.$set 解決。
三、Array 的變化偵測3.1、背景假如數(shù)據(jù)是 let data = {a:1, b:[11, 22]}，通過 Object.defineProperty 將其轉(zhuǎn)為響應(yīng)式之后，我們修改數(shù)據(jù) data.a = 2，會通知到外界，這個(gè)好理解；同理 data.b = [11, 22, 33] 也會通知到外界，但如果換一種方式修改數(shù)據(jù) b，就像這樣 data.b.push(33)，是不會通知到外界的，因?yàn)闆]走 setter。請看示例：
function defineReactive(obj, key, val) { Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: function () {console.log(`get val = ${val}`)return val }, set: function reactiveSetter (newVal) {if(val === newVal){ return}console.log(`set val = ${newVal}; oldVal = ${val}`)val = newVal } });}// 以下是測試代碼 {1}let data = {}defineReactive(data, ’a’, [11,22])data.a.push(33) // get val = 11,22 （沒有觸發(fā) setter） {2} data.a // get val = 11,22,33 data.a = 1 // set val = 1; oldVal = 11,22,33（觸發(fā) setter）
通過 push() 方法改變數(shù)組的值，確實(shí)沒有觸發(fā) setter（行{2}），也就不能通知外界。這里好像說明了一個(gè)問題：通過 Object.definePropery() 方法，只能將對象轉(zhuǎn)為響應(yīng)式，不能將數(shù)組轉(zhuǎn)為響應(yīng)式。
其實(shí) Object.definePropery() 可以將數(shù)組轉(zhuǎn)為響應(yīng)式。請看示例：
// 繼續(xù)上面的例子，將測試代碼（行{1}）改為：let data = []defineReactive(data, ’0’, 11)data[0] = 22 // set val = 22; oldVal = 11data.push(33) // 不會觸發(fā) {10}
雖然 Object.definePropery() 可以將數(shù)組轉(zhuǎn)為響應(yīng)式，但通過 data.push(33)（行{10}）這種方式修改數(shù)組，仍然不會通知到外界。
所以在 Vue 中，將數(shù)據(jù)轉(zhuǎn)為響應(yīng)式，用了兩套方式：對象使用 Object.defineProperty()；數(shù)組則使用另一套。
3.2、實(shí)現(xiàn)es6 中可以用 Proxy 偵測數(shù)組的變化。請看示例：
let data = [11,22]let p = new Proxy(data, { set: function(target, prop, value, receiver) {target[prop] = value;console.log(’property set: ’ + prop + ’ = ’ + value);return true; } })console.log(p)p.push(33)/*輸出：[ 11, 22 ]property set: 2 = 33property set: length = 3*/
es6 以前就稍微麻煩點(diǎn)，可以使用攔截器。原理是：當(dāng)我們執(zhí)行 [].push() 時(shí)會調(diào)用數(shù)組原型（Array.prototype）中的方法。我們在 [].push() 和 Array.prototype 之間增加一個(gè)攔截器，以后調(diào)用 [].push() 時(shí)先執(zhí)行攔截器中的 push() 方法，攔截器中的 push() 在調(diào)用 Array.prototype 中的 push() 方法。請看示例：
// 數(shù)組原型let arrayPrototype = Array.prototype// 創(chuàng)建攔截器let interceptor = Object.create(arrayPrototype)// 將攔截器與原始數(shù)組的方法關(guān)聯(lián)起來;(’push,pop,unshift,shift,splice,sort,reverse’).split(’,’).forEach(method => { let origin = arrayPrototype[method]; Object.defineProperty(interceptor, method, {value: function(...args){ console.log(`攔截器: args = ${args}`) return origin.apply(this, args);},enumerable: false,writable: true,configurable: true })});// 測試let arr1 = [’a’]let arr2 = [10]arr1.push(’b’)// 偵測數(shù)組 arr2 的變化Object.setPrototypeOf(arr2, interceptor) // {20}arr2.push(11) // 攔截器: args = 11arr2.unshift(22) // 攔截器: args = 22
這個(gè)例子將能改變數(shù)組自身內(nèi)容的 7 個(gè)方法都加入到了攔截器。如果需要偵測哪個(gè)數(shù)組的變化，就將該數(shù)組的原型指向攔截器（行{20}）。當(dāng)我們通過 push 等 7 個(gè)方法修改該數(shù)組時(shí)，則會在攔截器中觸發(fā)，從而可以通知外界。
到這里，我們只完成了偵測數(shù)組變化的任務(wù)。
數(shù)據(jù)變化，通知到外界。上文編碼的實(shí)現(xiàn)只是針對 Object 數(shù)據(jù)，而這里需要針對 Array 數(shù)據(jù)。
我們也來思考一下同樣的問題：
1.如何偵測數(shù)組的變化？
攔截器2.當(dāng)數(shù)據(jù)發(fā)生變化的時(shí)候，我們通知誰？
Watcher3.依賴誰？
Watcher4.何時(shí)通知？
修改數(shù)據(jù)的時(shí)候。攔截器中通知。5.何時(shí)收集依賴？
因?yàn)橐ㄖ脭?shù)據(jù)的地方。用數(shù)據(jù)就得讀數(shù)據(jù)。在讀數(shù)據(jù)的時(shí)候收集。這和對象收集依賴是一樣的。 {a: [11,22]} 比如我們要使用 a 數(shù)組，肯定得訪問對象的屬性 a。6.收集到哪里？
對象是在每個(gè)屬性中收集依賴，但這里得考慮數(shù)組在攔截器中能觸發(fā)依賴，位置可能得調(diào)整就到這里，不在繼續(xù)展開了。接下來的文章中，我會將 vue 中與數(shù)據(jù)偵測相關(guān)的源碼摘出來，配合本文，簡單分析一下。
四、關(guān)于 Array 的問題// 需要自己引入 vue.js。后續(xù)也盡可能只羅列核心代碼<div id=’app’><section> {{ p1[0] }} {{ p1[1] }}</section></div><script>const app = new Vue({ el: ’#app’, data: {p1: [’ph’, ’18’] }})</script>
運(yùn)行后在頁面顯示 ph 18，控制臺執(zhí)行 app.p1[0] = ’lj’ 頁面沒反應(yīng)，因?yàn)閿?shù)組只有調(diào)用指定的 7 個(gè)方法才能通過攔截器通知外界。如果執(zhí)行 app.$set(app.p1, 0, ’pm’) 頁面內(nèi)容會變成 pm 18。
以上就是淺析vue偵測數(shù)據(jù)的變化之基本實(shí)現(xiàn)的詳細(xì)內(nèi)容，更多關(guān)于vue偵測數(shù)據(jù)的變化的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章！
相關(guān)文章：
1. ASP刪除img標(biāo)簽的style屬性只保留src的正則函數(shù)2. jsp+servlet簡單實(shí)現(xiàn)上傳文件功能（保存目錄改進(jìn)）3. PHP循環(huán)與分支知識點(diǎn)梳理4. HTML 絕對路徑與相對路徑概念詳細(xì)5. ASP實(shí)現(xiàn)加法驗(yàn)證碼6. ASP基礎(chǔ)入門第二篇(ASP基礎(chǔ)知識)7. PHP session反序列化漏洞超詳細(xì)講解8. ASP基礎(chǔ)知識Command對象講解9. CSS可以做的幾個(gè)令你嘆為觀止的實(shí)例分享10. Spring注入Date類型的三種方法總結(jié)
網(wǎng)公網(wǎng)安備