您好,登錄后才能下訂單哦!
今天小編給大家分享一下Vue2響應(yīng)式系統(tǒng)之set和delete怎么用的相關(guān)知識點,內(nèi)容詳細,邏輯清晰,相信大部分人都還太了解這方面的知識,所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來了解一下吧。
import { observe } from "./reactive"; import Watcher from "./watcher"; const data = { list: [1, 2], }; observe(data); const updateComponent = () => { console.log(data.list); }; new Watcher(updateComponent); list[0] = 3;
list[0]
會觸發(fā) 的重新執(zhí)行嗎?updateComponent
可以先思考一下。
答案是否定的,數(shù)組我們只能通過重寫的 、 等方法去觸發(fā)更新,詳見push
splice
Vue2響應(yīng)式系統(tǒng)之數(shù)組 。
如果我們想要替換數(shù)組某個元素的話可以轉(zhuǎn)一下彎,通過 去實現(xiàn)。splice
import { observe } from "./reactive"; import Watcher from "./watcher"; const data = { list: [1, 2], }; observe(data); const updateComponent = () => { console.log(data.list); }; new Watcher(updateComponent); // list[0] = 3; data.list.splice(0, 1, 3);
每次這樣寫太麻煩了,我們可以提供一個 方法供用戶使用。set
/** * Set a property on an object. Adds the new property and * triggers change notification if the property doesn't * already exist. */ export function set(target, key, val) { if (Array.isArray(target)) { target.length = Math.max(target.length, key); target.splice(key, 1, val); return val; } // targe 是對象的情況 // ... }
然后我們直接使用 方法就可以了。set
import { observe, set } from "./reactive"; import Watcher from "./watcher"; const data = { list: [1, 2], }; observe(data); const updateComponent = () => { console.log(data.list); }; new Watcher(updateComponent); // list[0] = 3; // data.list.splice(0, 1, 3); set(data.list, 0, 3);
同數(shù)組 ,我們順便提供一個 的方法,支持數(shù)組響應(yīng)式的刪除某個元素。set
del
/** * Delete a property and trigger change if necessary. */ export function del(target, key) { if (Array.isArray(target) && isValidArrayIndex(key)) { target.splice(key, 1); return; } // targe 是對象的情況 // ... }
import { observe, set, del } from "./reactive"; import Watcher from "./watcher"; const data = { obj: { a: 1, b: 2, }, }; observe(data); const updateComponent = () => { const c = data.obj.c ? data.obj.c : 0; console.log(data.obj.a + data.obj.b + c); }; new Watcher(updateComponent); data.obj.c = 3;
updateComponent
方法中雖然使用了 的 屬性,但是在調(diào)用 之前, 中并沒有 屬性,所以 屬性不是響應(yīng)式的。obj
c
observe
data.obj
c
c
當我們修改 的值的時候,并不會觸發(fā) 的執(zhí)行。data.obj.c
updateComponent
如果想要變成響應(yīng)式的話,一種方法就是在最開始就定義 屬性。c
const data = { obj: { a: 1, b: 2, c: null, }, }; observe(data); const updateComponent = () => { const c = data.obj.c ? data.obj.c : 0; console.log(data.obj.a + data.obj.b + c); }; new Watcher(updateComponent); data.obj.c = 3;
另一種方法就是通過 去設(shè)置新的屬性了,在 中我們可以將新添加的屬性設(shè)置為響應(yīng)式的。set
set
/** * Set a property on an object. Adds the new property and * triggers change notification if the property doesn't * already exist. */ export function set(target, key, val) { if (Array.isArray(target)) { target.length = Math.max(target.length, key); target.splice(key, 1, val); return val; } // targe 是對象的情況 // key 在 target 中已經(jīng)存在 if (key in target && !(key in Object.prototype)) { target[key] = val; return val; } const ob = target.__ob__; // target 不是響應(yīng)式數(shù)據(jù) if (!ob) { target[key] = val; return val; } // 將當前 key 變?yōu)轫憫?yīng)式的 defineReactive(target, key, val); return val; }
回到我們之前的程序:
import { observe, set, del } from "./reactive"; import Watcher from "./watcher"; const data = { obj: { a: 1, b: 2, }, }; observe(data); const updateComponent = () => { const c = data.obj.c ? data.obj.c : 0; console.log(data.obj.a + data.obj.b + c); }; const ob = new Watcher(updateComponent); set(data.obj, "c", 3);
雖然通過 增加了屬性,但是此時 并不會重新觸發(fā),原因的話我們看下依賴圖。set
Watcher
雖然屬性 擁有了 對象,但由于沒有調(diào)用過依賴屬性 的 ,所以它并沒有收集到依賴。c
Dep
c
Watcher
當然我們可以 完手動調(diào)用一次相應(yīng)的 。set
Watcher
const data = { obj: { a: 1, b: 2, }, }; observe(data); const updateComponent = () => { const c = data.obj.c ? data.obj.c : 0; console.log(data.obj.a + data.obj.b + c); }; const ob = new Watcher(updateComponent); set(data.obj, "c", 3); ob.update(); // 手動調(diào)用 Watcher data.obj.c = 4;
這樣的話,當執(zhí)行 的時候就會觸發(fā) 的執(zhí)行了。data.obj.c = 4
Watcher
那么我們能將觸發(fā)相應(yīng)的 的邏輯放到 函數(shù)中嗎?Watcher
set
可以看到 里也有個 ,這個其實當時是為數(shù)組準備的,參考 obj
Dep
Vue2響應(yīng)式系統(tǒng)之數(shù)組,但 的 什么都沒收集。obj
dep
我們修改一下代碼讓它也收集一下:
export function defineReactive(obj, key, val, shallow) { const property = Object.getOwnPropertyDescriptor(obj, key); // 讀取用戶可能自己定義了的 get、set const getter = property && property.get; const setter = property && property.set; // val 沒有傳進來話進行手動賦值 if ((!getter || setter) && arguments.length === 2) { val = obj[key]; } const dep = new Dep(); // 持有一個 Dep 對象,用來保存所有依賴于該變量的 Watcher let childOb = !shallow && observe(val); Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: function reactiveGetter() { const value = getter ? getter.call(obj) : val; if (Dep.target) { dep.depend(); if (childOb) { /******新位置 *************************/ childOb.dep.depend(); /**********************************/ if (Array.isArray(value)) { // childOb.dep.depend(); //原來的位置 dependArray(value); } } } return value; }, set: function reactiveSetter(newVal) { const value = getter ? getter.call(obj) : val; if (setter) { setter.call(obj, newVal); } else { val = newVal; } childOb = !shallow && observe(newVal); dep.notify(); }, }); } function dependArray(value) { for (let e, i = 0, l = value.length; i < l; i++) { e = value[i]; /******新位置 *************************/ e && e.__ob__ && e.__ob__.dep.depend(); /**********************************/ if (Array.isArray(e)) { // e && e.__ob__ && e.__ob__.dep.depend(); // 原位置 dependArray(e); } } }
因為讀取 屬性,一定先會讀取 屬性,即 。 也同理。a
obj
data.obj.a
b
所以通過上邊的修改, 的 會收集到它的所有屬性的依賴,也就是這里的 、 的依賴,但因為 和 的依賴是相同的,所以收集到一個依賴。obj
dep
a
b
a
b
但其實我們并不知道 被哪些 依賴,我們只知道和 同屬于一個對象的 和 被哪些 依賴,但大概率 也會被其中的 依賴。c
Watcher
c
a
b
Watcher
c
Watcher
所以我們可以在 中手動執(zhí)行一下 的 ,依賴 的 大概率會被執(zhí)行,相應(yīng)的 也會成功收集到依賴。set
obj
Dep
c
Watcher
c
export function set(target, key, val) { if (Array.isArray(target)) { target.length = Math.max(target.length, key); target.splice(key, 1, val); return val; } // targe 是對象的情況 // key 在 target 中已經(jīng)存在 if (key in target && !(key in Object.prototype)) { target[key] = val; return val; } const ob = target.__ob__; // target 不是響應(yīng)式數(shù)據(jù) if (!ob) { target[key] = val; return val; } defineReactive(target, key, val); /******新增 *************************/ ob.dep.notify() /************************************/ return val; }
回到最開始的代碼:
const data = { obj: { a: 1, b: 2, }, }; observe(data); const updateComponent = () => { const c = data.obj.c ? data.obj.c : 0; console.log(data.obj.a + data.obj.b + c); }; const ob = new Watcher(updateComponent); set(data.obj, "c", 3);
執(zhí)行完后 除了變?yōu)轫憫?yīng)式的,也成功觸發(fā)了 執(zhí)行,并且收集到了 。c
Watcher
Watcher
此時如果修改 的值,也會成功觸發(fā) 的執(zhí)行了。c
Watcher
有了上邊的了解,刪除就很好解決了。
如果要刪除 屬性,刪除后執(zhí)行下它相應(yīng)的 就可以。但 的 是存在閉包中的,我們并不能拿到。a
Dep
a
Dep
退而求其次,我們可以去執(zhí)行 屬性所在的對象 的 就可以了。a
obj
Dep
/** * Delete a property and trigger change if necessary. */ export function del(target, key) { if (Array.isArray(target)) { target.splice(key, 1); return; } // targe 是對象的情況 const ob = target.__ob__; if (!hasOwn(target, key)) { return; } delete target[key]; if (!ob) { return; } ob.dep.notify(); }
以上就是“Vue2響應(yīng)式系統(tǒng)之set和delete怎么用”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會為大家更新不同的知識,如果還想學(xué)習(xí)更多的知識,請關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。