建站
咨詢
售后
建站咨詢
新聞中心
場景
import { observe } from "./reactive";
import Watcher from "./watcher";
const data = {
text: "hello, world",
};
observe(data);
let show = true;
const updateComponent = () => {
if (show) {
console.log(data.text);
show = false;
}
};
new Watcher(updateComponent);
new Watcher(() => console.log("依賴", data.text));
data.text = "123";先可以 1 分鐘思考一下會輸出什么。
創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設,明溪企業(yè)網(wǎng)站建設,明溪品牌網(wǎng)站建設,網(wǎng)站定制,明溪網(wǎng)站建設報價,網(wǎng)絡營銷,網(wǎng)絡優(yōu)化,明溪網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。
- new Watcher(updateParentComponent);
執(zhí)行 updateParentComponent 函數(shù)，輸出 hello, world，并且 text 的 Dep 收集該 Watcher 。
- new Watcher(() => console.log("依賴", data.text));
執(zhí)行匿名函數(shù)，輸出 依賴 hello, world ，并且 text 的 Dep 收集該 Watcher 。
- data.text = "123"; 。
觸發(fā) text 的 set，依次執(zhí)行 Dep 中的 Watcher 。
先執(zhí)行 updateParentComponent 。
const updateComponent = () => {
if (show) {
console.log(data.text);
show = false;
}
};由于之前已經(jīng)執(zhí)行過一次了，此時 show 就是 false 了，什么都不會輸出。
再執(zhí)行 () => console.log("依賴", data.text) ，輸出 依賴 hello, world。
是的，上邊是我們所期望的樣子，但事實上輸出結果如下：
出錯代碼 dep.js:37:26 如下：
調(diào)用 update 的時候是，遍歷過程中 subs[i] 變成了 undefined ，導致了報錯。
需要回憶下 Vue2剝絲抽繭-響應式系統(tǒng)之分支切換 這篇文章里我們做了什么。
如果 Watcher 中的函數(shù)不再依賴當前屬性，我們就把當前 Watcher 從該屬性的 Dep 中移除。
而移除其實就是調(diào)用了數(shù)組的 splice 方法，直接將 Dep 中的 subs 數(shù)組元素進行刪除。
removeSub(sub) {
remove(this.subs, sub);
}
export function remove(arr, item) {
if (arr.length) {
const index = arr.indexOf(item);
if (index > -1) {
return arr.splice(index, 1);
}
}
}而此時我們正在遍歷 subs 數(shù)組：
notify() {
for (let i = 0, l = this.subs.length; i < l; i++) {
this.subs[i].update();
}
}對應上邊的例子，原本 subs 數(shù)組兩個 Watcher，第一個 Watcher 執(zhí)行的時候沒有訪問 data.text 屬性，就要把這一個 Watcher 刪除了，第二個就移動到第一個的位置了，此時 for 循環(huán)中訪問第二個位置的 Watcher 因為被移到前邊自然就報錯了。
修改起來也很容易，我們只需要在循環(huán)前，將原有的 subs 數(shù)組保存給一個新的數(shù)組即可。
notify() {
// stabilize the subscriber list first
const subs = this.subs.slice();
for (let i = 0, l = subs.length; i < l; i++) {
subs[i].update();
}
}
總結
這篇文章比較簡單，主要就是循環(huán)通知 Watcher 之前把列表另存起來，防止遍歷過程中被修改。
文章標題：Vue2剝絲抽繭-響應式系統(tǒng)完善
文章起源：http://www.dlmjj.cn/article/dpeccce.html
