淺析vue偵測(cè)數(shù)據(jù)的變化之基本實(shí)現(xiàn)
一、Object的變化偵測(cè)
下面我們就來(lái)模擬偵測(cè)數(shù)據(jù)變化的邏輯。
強(qiáng)調(diào)一下我們要做的事情:數(shù)據(jù)變化,通知到外界(外界再做一些自己的邏輯處理,比如重新渲染視圖)。
開(kāi)始編碼之前,我們首先得回答以下幾個(gè)問(wèn)題:
1.如何偵測(cè)對(duì)象的變化?
- 使用 Object.defineProperty()。讀數(shù)據(jù)的時(shí)候會(huì)觸發(fā) getter,修改數(shù)據(jù)會(huì)觸發(fā) setter。
- 只有能偵測(cè)對(duì)象的變化,才能在數(shù)據(jù)發(fā)生變化的時(shí)候發(fā)出通知
2.當(dāng)數(shù)據(jù)發(fā)生變化的時(shí)候,我們通知誰(shuí)?
- 通知用到數(shù)據(jù)的地方。而數(shù)據(jù)可以用在模板中,也可以用在 vm.$watch() 中,地方不同,行為也不相同,比如這里要渲染模板,那里要進(jìn)行其他邏輯。所以干脆抽象出一個(gè)類。當(dāng)數(shù)據(jù)變化的時(shí)候通知它,再由它去通知其他地方。
- 這個(gè)類起名叫 Watcher。就是一個(gè)中介。
3.依賴誰(shuí)?
- 通知誰(shuí),就依賴誰(shuí),依賴 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)行):
// 全局變量,用于存儲(chǔ)依賴 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(){ // 將依賴保存在 globalData globalData = this; // 讀數(shù)據(jù)的時(shí)候收集依賴 let value = this.data[this.key] globalData = undefined return value; } // 數(shù)據(jù)改變時(shí)收到通知,然后再通知到外界 update(newVal, oldVal){ this.callback(newVal, oldVal) } } /* 以下是測(cè)試代碼 */ let data = {}; // 將 name 屬性轉(zhuǎn)為響應(yīng)式 defineReactive(data, 'age', '88') // 當(dāng)數(shù)據(jù) age 改變時(shí),會(huì)通知到 Watcher,再由 Watcher 通知到外界 new Watcher(data, 'age', (newVal, oldVal) => { console.log(`外界:newVal = ${newVal} ; oldVal = ${oldVal}`) }) data.age -= 1 // 控制臺(tái)輸出: 外界:newVal = 87 ; oldVal = 88
在控制臺(tái)下繼續(xù)執(zhí)行 data.age -= 1
,則會(huì)輸出 外界:newVal = 86 ; oldVal = 87
。
附上一張 Data、defineReactive、dependList、Watcher和外界的關(guān)系圖。
首先通過(guò) defineReactive() 方法將 data 轉(zhuǎn)為響應(yīng)式(defineReactive(data, 'age', '88')
)。
外界通過(guò) Watcher 讀取數(shù)據(jù)(let value = this.data[this.key]
),數(shù)據(jù)的 getter 則會(huì)被觸發(fā),于是通過(guò) globalData 收集Watcher。
當(dāng)數(shù)據(jù)被修改(data.age -= 1
), 會(huì)觸發(fā) setter,會(huì)通知依賴(dependList),依賴則會(huì)通知 Watcher(w.update(newVal, val)
),最后 Watcher 再通知給外界。
二、關(guān)于 Object 的問(wèn)題
思考一下:上面的例子,繼續(xù)執(zhí)行 delete data.age
會(huì)通知到外界嗎?
不會(huì)。因?yàn)椴粫?huì)觸發(fā) setter。請(qǐng)接著看:
<!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)行后,頁(yè)面會(huì)顯示 ph 18
。我們知道更改數(shù)據(jù),視圖會(huì)重新渲染,于是在控制臺(tái)執(zhí)行 delete app.p1.name
,發(fā)現(xiàn)頁(yè)面沒(méi)有變化。這與上面示例中執(zhí)行 delete data.age
一樣,都不會(huì)觸發(fā)setter,也就不會(huì)通知到外界。
為了解決這個(gè)問(wèn)題,Vue提供了兩個(gè) API(稍后將介紹它們):vm.$set 和 vm.$delete。
如果你繼續(xù)執(zhí)行 app.$delete(app.p1, 'age')
,你會(huì)發(fā)現(xiàn)頁(yè)面沒(méi)有任何信息了(name 屬性已經(jīng)用 delete 刪除了,只是當(dāng)時(shí)沒(méi)有重新渲染而已)。
注:如果這里執(zhí)行 app.p1.sex = 'man'
,用到數(shù)據(jù) p1 的地方也不會(huì)被通知到,這個(gè)問(wèn)題可以通過(guò) vm.$set 解決。
三、Array 的變化偵測(cè)
3.1、背景
假如數(shù)據(jù)是 let data = {a:1, b:[11, 22]}
,通過(guò) Object.defineProperty 將其轉(zhuǎn)為響應(yīng)式之后,我們修改數(shù)據(jù) data.a = 2
,會(huì)通知到外界,這個(gè)好理解;同理 data.b = [11, 22, 33]
也會(huì)通知到外界,但如果換一種方式修改數(shù)據(jù) b,就像這樣 data.b.push(33)
,是不會(huì)通知到外界的,因?yàn)闆](méi)走 setter。請(qǐng)看示例:
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 } }); } // 以下是測(cè)試代碼 {1} let data = {} defineReactive(data, 'a', [11,22]) data.a.push(33) // get val = 11,22 (沒(méi)有觸發(fā) setter) {2} data.a // get val = 11,22,33 data.a = 1 // set val = 1; oldVal = 11,22,33(觸發(fā) setter)
通過(guò) push() 方法改變數(shù)組的值,確實(shí)沒(méi)有觸發(fā) setter(行{2}),也就不能通知外界。這里好像說(shuō)明了一個(gè)問(wèn)題:通過(guò) Object.definePropery() 方法,只能將對(duì)象轉(zhuǎn)為響應(yīng)式,不能將數(shù)組轉(zhuǎn)為響應(yīng)式。
其實(shí) Object.definePropery() 可以將數(shù)組轉(zhuǎn)為響應(yīng)式。請(qǐng)看示例:
// 繼續(xù)上面的例子,將測(cè)試代碼(行{1})改為: let data = [] defineReactive(data, '0', 11) data[0] = 22 // set val = 22; oldVal = 11 data.push(33) // 不會(huì)觸發(fā) {10}
雖然 Object.definePropery() 可以將數(shù)組轉(zhuǎn)為響應(yīng)式,但通過(guò) data.push(33)
(行{10})這種方式修改數(shù)組,仍然不會(huì)通知到外界。
所以在 Vue 中,將數(shù)據(jù)轉(zhuǎn)為響應(yīng)式,用了兩套方式:對(duì)象使用 Object.defineProperty();數(shù)組則使用另一套。
3.2、實(shí)現(xiàn)
es6 中可以用 Proxy 偵測(cè)數(shù)組的變化。請(qǐng)看示例:
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 = 33 property set: length = 3 */
es6 以前就稍微麻煩點(diǎn),可以使用攔截器。原理是:當(dāng)我們執(zhí)行 [].push()
時(shí)會(huì)調(diào)用數(shù)組原型(Array.prototype)中的方法。我們?cè)?[].push()
和 Array.prototype
之間增加一個(gè)攔截器,以后調(diào)用 [].push()
時(shí)先執(zhí)行攔截器中的 push() 方法,攔截器中的 push() 在調(diào)用 Array.prototype 中的 push() 方法。請(qǐng)看示例:
// 數(shù)組原型 let arrayPrototype = Array.prototype // 創(chuàng)建攔截器 let interceptor = Object.create(arrayPrototype) // 將攔截器與原始數(shù)組的方法關(guān)聯(lián)起來(lái) ;('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 }) }); // 測(cè)試 let arr1 = ['a'] let arr2 = [10] arr1.push('b') // 偵測(cè)數(shù)組 arr2 的變化 Object.setPrototypeOf(arr2, interceptor) // {20} arr2.push(11) // 攔截器: args = 11 arr2.unshift(22) // 攔截器: args = 22
這個(gè)例子將能改變數(shù)組自身內(nèi)容的 7 個(gè)方法都加入到了攔截器。如果需要偵測(cè)哪個(gè)數(shù)組的變化,就將該數(shù)組的原型指向攔截器(行{20})。當(dāng)我們通過(guò) push 等 7 個(gè)方法修改該數(shù)組時(shí),則會(huì)在攔截器中觸發(fā),從而可以通知外界。
到這里,我們只完成了偵測(cè)數(shù)組變化的任務(wù)。
數(shù)據(jù)變化,通知到外界。上文編碼的實(shí)現(xiàn)只是針對(duì) Object 數(shù)據(jù),而這里需要針對(duì) Array 數(shù)據(jù)。
我們也來(lái)思考一下同樣的問(wèn)題:
1.如何偵測(cè)數(shù)組的變化?
- 攔截器
2.當(dāng)數(shù)據(jù)發(fā)生變化的時(shí)候,我們通知誰(shuí)?
- Watcher
3.依賴誰(shuí)?
- Watcher
4.何時(shí)通知?
- 修改數(shù)據(jù)的時(shí)候。攔截器中通知。
5.何時(shí)收集依賴?
- 因?yàn)橐ㄖ脭?shù)據(jù)的地方。用數(shù)據(jù)就得讀數(shù)據(jù)。在讀數(shù)據(jù)的時(shí)候收集。這和對(duì)象收集依賴是一樣的。
{a: [11,22]}
比如我們要使用 a 數(shù)組,肯定得訪問(wèn)對(duì)象的屬性 a。
6.收集到哪里?
- 對(duì)象是在每個(gè)屬性中收集依賴,但這里得考慮數(shù)組在攔截器中能觸發(fā)依賴,位置可能得調(diào)整
就到這里,不在繼續(xù)展開(kāi)了。接下來(lái)的文章中,我會(huì)將 vue 中與數(shù)據(jù)偵測(cè)相關(guān)的源碼摘出來(lái),配合本文,簡(jiǎn)單分析一下。
四、關(guān)于 Array 的問(wèn)題
// 需要自己引入 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)行后在頁(yè)面顯示 ph 18
,控制臺(tái)執(zhí)行 app.p1[0] = 'lj'
頁(yè)面沒(méi)反應(yīng),因?yàn)閿?shù)組只有調(diào)用指定的 7 個(gè)方法才能通過(guò)攔截器通知外界。如果執(zhí)行 app.$set(app.p1, 0, 'pm')
頁(yè)面內(nèi)容會(huì)變成 pm 18
。
以上就是淺析vue偵測(cè)數(shù)據(jù)的變化之基本實(shí)現(xiàn)的詳細(xì)內(nèi)容,更多關(guān)于vue偵測(cè)數(shù)據(jù)的變化的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
- vue實(shí)現(xiàn)tab切換的3種方式及切換保持?jǐn)?shù)據(jù)狀態(tài)
- Vue組件傳值過(guò)程中丟失數(shù)據(jù)的分析與解決方案
- 基于vue+echarts數(shù)據(jù)可視化大屏展示的實(shí)現(xiàn)
- vue基于Echarts的拖拽數(shù)據(jù)可視化功能實(shí)現(xiàn)
- vue 獲取到數(shù)據(jù)但卻渲染不到頁(yè)面上的解決方法
- Antd-vue Table組件添加Click事件,實(shí)現(xiàn)點(diǎn)擊某行數(shù)據(jù)教程
- vue+echarts+datav大屏數(shù)據(jù)展示及實(shí)現(xiàn)中國(guó)地圖省市縣下鉆功能
- vuex中遇到的坑,vuex數(shù)據(jù)改變,組件中頁(yè)面不渲染操作
- vue實(shí)現(xiàn)兩個(gè)組件之間數(shù)據(jù)共享和修改操作
相關(guān)文章
Vue實(shí)現(xiàn)實(shí)時(shí)刷新時(shí)間的功能
這篇文章主要為大家詳細(xì)介紹了如何Vue利用實(shí)現(xiàn)實(shí)時(shí)刷新時(shí)間的功能,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以了解下2023-12-12vue項(xiàng)目中訪問(wèn)本地json數(shù)據(jù)
這篇文章主要介紹了vue項(xiàng)目中訪問(wèn)本地json數(shù)據(jù)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07vue實(shí)現(xiàn)大轉(zhuǎn)盤抽獎(jiǎng)功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)大轉(zhuǎn)盤抽獎(jiǎng)功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03Element Carousel 走馬燈的具體實(shí)現(xiàn)
這篇文章主要介紹了Element Carousel 走馬燈的具體實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07利用vuex-persistedstate將vuex本地存儲(chǔ)實(shí)現(xiàn)
這篇文章主要介紹了利用vuex-persistedstate將vuex本地存儲(chǔ)的實(shí)現(xiàn),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04Vue移動(dòng)端實(shí)現(xiàn)調(diào)用相機(jī)掃描二維碼或條形碼的全過(guò)程
最近在使用vue開(kāi)發(fā)的h5移動(dòng)端想要實(shí)現(xiàn)一個(gè)調(diào)用攝像頭掃描二維碼的功能,所以下面這篇文章主要給大家介紹了關(guān)于Vue移動(dòng)端實(shí)現(xiàn)調(diào)用相機(jī)掃描二維碼或條形碼的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08vue實(shí)現(xiàn)移動(dòng)端圖片裁剪上傳功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)移動(dòng)端圖片裁剪上傳功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08