Vue利用廣度優(yōu)先搜索實(shí)現(xiàn)watch

更新時(shí)間：2023年08月04日 10:04:36 作者：前端胖頭魚

這篇文章主要為大家學(xué)習(xí)介紹了Vue如何利用廣度優(yōu)先搜索實(shí)現(xiàn)watch（有意思），文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

前言

通過前面幾篇文章，我們對(duì)Vue3中的響應(yīng)式設(shè)計(jì)有了初步的了解。

這一篇我們?cè)囍鴮?shí)現(xiàn)一個(gè)watch

1. 兩種watch的基本用法

1.1 通過函數(shù)回調(diào)監(jiān)聽數(shù)據(jù)

最基本的用法是給watch指定一個(gè)回調(diào)函數(shù)并返回你想要監(jiān)聽的響應(yīng)式數(shù)據(jù)。

const?state1?=?reactive({
??name:?'前端胖頭魚',
??age:?100
})
watch(()?=>?state1.age,?()?=>?{
??console.log('state1的age發(fā)生變化了',?state1.age)
})
state1.age?=?200
setTimeout(()?=>?{
??state1.age?=?300
},?500)

1.2 直接監(jiān)聽一個(gè)對(duì)象

還可以直接監(jiān)聽一個(gè)響應(yīng)式對(duì)象來(lái)觀測(cè)它的變化。

const?state1?=?reactive({
??name:?'前端胖頭魚',
??age:?100,
??children:?{
????name:?'胖小魚',
????age:?10
??}
})
watch(state1,?()?=>?{
??console.log('state1發(fā)生變化了',?state1)
})
state1.age?=?200
setTimeout(()?=>?{
??state1.children.age?=?100
},?500)

2. 實(shí)現(xiàn)watch最核心的點(diǎn)

其實(shí)watch的底層實(shí)現(xiàn)非常簡(jiǎn)單，和computed一樣都需要借助任務(wù)調(diào)度。

簡(jiǎn)單來(lái)說就是感知數(shù)據(jù)的變化，數(shù)據(jù)發(fā)生了變化就執(zhí)行對(duì)應(yīng)的回調(diào)，那么怎么感知呢？

const?state?=?reactive({
??name:?'前端胖頭魚'
})
useEffect(()?=>?{
??//?原本state發(fā)生變化之后，應(yīng)該執(zhí)行這里
??console.log(state.name)
},?{
??//?但是指定scheduler之后，會(huì)執(zhí)行這里
??scheduler?()?{
????console.log('state變化了')
??}
})
state.name?=?'胖小魚'

聰明的你肯定也猜到了，scheduler不就是天然感知數(shù)據(jù)的變化的工具嗎？

沒錯(cuò)，watch的實(shí)現(xiàn)少不了它，來(lái)吧，搞起！??！

3. 支持兩種使用方式

3.1 支持回調(diào)函數(shù)形式

const?watch?=?(source,?cb)?=>?{
??effect(source,?{
????scheduler?()?{
??????cb()
????},
??})
}
//?測(cè)試一波
const?state?=?reactive({
??name:?'前端胖頭魚',
})
watch(()?=>?state.name,?()?=>?{
??console.log('state.name發(fā)生了變化',?state.name)
})
state.name?=?'胖小魚'

3.2 支持直接傳遞響應(yīng)式對(duì)象

不錯(cuò)哦！第一種方式已經(jīng)初步實(shí)現(xiàn)了，接下來(lái)搞第二種。

第二種直接傳入響應(yīng)式對(duì)象的方式和第一種傳入回調(diào)函數(shù)并指向響應(yīng)式數(shù)據(jù)的區(qū)別是什么？

在于我們需要手動(dòng)遍歷這個(gè)響應(yīng)式對(duì)象使得它的任意屬性發(fā)生變化我們都能感知到。

3.3 廣度優(yōu)先搜索遍歷深層嵌套的屬性

此時(shí)就到了這篇文章裝逼(額~~)的點(diǎn)了。如果想訪問一個(gè)深層嵌套對(duì)象的所有屬性，最常見的做法就是遞歸。

如果你想在面試的過程中秀一波，我覺得使用廣度優(yōu)先搜索是個(gè)不錯(cuò)的主意（狗頭臉），代碼也非常簡(jiǎn)單，就不詳細(xì)解釋了。

如果您對(duì)廣度優(yōu)先搜索和深度優(yōu)先搜索感興趣歡迎在評(píng)論區(qū)留言，我會(huì)單獨(dú)寫一篇文章來(lái)講它。

?const?bfs?=?(obj,?callback)?=>?{
??const?queue?=?[?obj?]
??while?(queue.length)?{
????const?top?=?queue.shift()
????if?(top?&&?typeof?top?===?'object')?{
??????for?(let?key?in?top)?{
????????//?讀取操作出發(fā)getter，完成依賴搜集
????????queue.push(top[?key?])
??????}
????}?else?{
??????callback?&&?callback(top)
????}
??}
}
const?obj?=?{
??name:?'前端胖頭魚',
??age:?100,
??obj2:?{
????name:?'胖小魚',
????age:?10,
????obj3:?{
??????name:?'胖小小魚',
??????age:?1,
????}
??},
}
bfs(obj,?(value)?=>?{
??console.log(value)
})

我們已經(jīng)能夠讀取深層嵌套對(duì)象的任意屬性了，接下來(lái)繼續(xù)完善watch方法

const?watch?=?(source,?cb)?=>?{
??let?getter
??//?處理傳回調(diào)的方式
??if?(typeof?source?===?"function")?{
????getter?=?source
??}?else?{
????//?封裝成讀取source對(duì)象的函數(shù)，觸發(fā)任意一個(gè)屬性的getter，進(jìn)而搜集依賴
????getter?=?()?=>?bfs(source)
??}
??const?effectFn?=?effect(getter,?{
????scheduler()?{
??????cb()
????}
??})
}
//?測(cè)試一波
const?state?=?reactive({
??name:?"前端胖頭魚",
??age:?100,
??obj2:?{
????name:?"胖小魚",
????age:?10,
??},
})
watch(state,?()?=>?{
??console.log("state發(fā)生變化了");
});

看來(lái)還是有不少坑啊！雖然我們實(shí)現(xiàn)了n層嵌套對(duì)象屬性的讀?。ɡ碚撋纤械膶傩愿淖兌紤?yīng)該觸發(fā)回調(diào)），但是state.obj2.name = 'yyyy'卻沒有被感知到，為什么呢？

3.4 淺響應(yīng)與深響應(yīng)

回顧一下reactive函數(shù)，你會(huì)發(fā)現(xiàn)，當(dāng)value本身也是一個(gè)對(duì)象的時(shí)候，我們并不會(huì)使value也變成一個(gè)響應(yīng)式數(shù)據(jù)。

所以哪怕我們通過bfs方法遍歷了該對(duì)象的所有屬性，也僅僅是第一層的key具有了響應(yīng)式效果而已。

//?統(tǒng)一對(duì)外暴露響應(yīng)式函數(shù)
function?reactive(state)?{
??return?new?Proxy(state,?{
????get(target,?key)?{
??????const?value?=?target[key]
??????//?搜集key的依賴
??????//?如果value本身是一個(gè)對(duì)象，對(duì)象下的屬性將不具有響應(yīng)式
??????track(target,?key)?
??????return?value;
????},
????set(target,?key,?newValue)?{
??????//?console.log(`set?${key}:?${newValue}`)
??????//?設(shè)置屬性值
??????target[key]?=?newValue
??????trigger(target,?key)
????},
??})
}

解決辦法也很簡(jiǎn)單，是對(duì)象的情況下再給他reactive一次就好了。

//?統(tǒng)一對(duì)外暴露響應(yīng)式函數(shù)
function?reactive(state)?{
??return?new?Proxy(state,?{
????get(target,?key)?{
??????const?value?=?target[key]
??????//?搜集key的依賴
??????//?如果value本身是一個(gè)對(duì)象，對(duì)象下的屬性將不具有響應(yīng)式
??????track(target,?key)?
??????//?如果是對(duì)象，再使其也變成一個(gè)響應(yīng)式數(shù)據(jù)
??????if?(typeof?value?===?"object"?&&?value?!==?null)?{
????????return?reactive(value);
??????}
??????return?value;
????},
????set(target,?key,?newValue)?{
??????//?console.log(`set?${key}:?${newValue}`)
??????//?設(shè)置屬性值
??????target[key]?=?newValue
??????trigger(target,?key)
????},
??})
}

最后再回到前面的例子，你會(huì)發(fā)現(xiàn)我們成功了!!!

4. watch的新值和舊值

到目前為止，我們實(shí)現(xiàn)了watch最基本的功能，感知其數(shù)據(jù)的變化并執(zhí)行對(duì)應(yīng)的回調(diào)。

接下來(lái)我們?cè)賹?shí)現(xiàn)一個(gè)基礎(chǔ)功能：在回調(diào)函數(shù)中獲取新值與舊值。

watch(state,?(newVal,?oldVal)?=>?{
??//?xxx
})

新值和舊值主要在于獲取時(shí)機(jī)不一樣，獲取方式確實(shí)一模一樣的，執(zhí)行effectFn即可

const?watch?=?(source,?cb)?=>?{
??let?getter
??let?oldValue
??let?newValue
??//?處理傳回調(diào)的方式
??if?(typeof?source?===?"function")?{
????getter?=?source
??}?else?{
????getter?=?()?=>?bfs(source)
??}
??const?effectFn?=?effect(getter,?{
????lazy:?true,
????scheduler()?{
??????//?變化后獲取新值
??????newValue?=?effectFn()
??????cb(newValue,?oldValue)
??????//?執(zhí)行回調(diào)后將新值設(shè)置為舊值
??????oldValue?=?newValue
????}
??})
??//?第一次執(zhí)行獲取值
??oldValue?=?effectFn()
}

測(cè)試一波

const?state?=?reactive({
??name:?"前端胖頭魚",
??age:?100,
??obj2:?{
????name:?"胖小魚",
????age:?10,
??},
})
watch(()?=>?state.name,?(newValue,?oldValue)?=>?{
??console.log("state.name",?{?newValue,?oldValue?})
})
state.name?=?'111'

5. 支持立即調(diào)用時(shí)機(jī)

最后再實(shí)現(xiàn)立即調(diào)用時(shí)機(jī)immediate，watch就大功告成啦！

const?watch?=?(source,?cb,?options?=?{})?=>?{
??let?getter
??let?oldValue
??let?newValue
??//?處理傳回調(diào)的方式
??if?(typeof?source?===?"function")?{
????getter?=?source
??}?else?{
????getter?=?()?=>?bfs(source)
??}
??const?job?=?()?=>?{
????//?變化后獲取新值
????newValue?=?effectFn()
????cb(newValue,?oldValue)
????//?執(zhí)行回調(diào)后將新值設(shè)置為舊值
????oldValue?=?newValue
??}
??const?effectFn?=?effect(getter,?{
????lazy:?true,
????scheduler()?{
??????job()
????}
??})
??//?如果指定了立即執(zhí)行，便執(zhí)行第一次
??if?(options.immediate)?{
????job()
??}?else?{
????oldValue?=?effectFn()
??}
}
watch(()?=>?state.name,?(newValue,?oldValue)?=>?{
??console.log("state.name",?{?newValue,?oldValue?});
},?{?immediate:?true?});