Vue.js設(shè)計(jì)與實(shí)現(xiàn)無限遞歸學(xué)習(xí)總結(jié)
更新時(shí)間：2023年05月31日 14:54:33 作者：瑪拉_以琳
這篇文章主要為大家介紹了Vue.js設(shè)計(jì)與實(shí)現(xiàn)無限遞歸學(xué)習(xí)總結(jié)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
棧溢出
const data = { foo: 1 }
const obj = new Proxy(data, {/*...*/})
effect(() => obj.foo = obj.foo + 1)此項(xiàng)操作會(huì)引起棧溢出:
Uncaught RangeError: Maximum call sack size exceeded
在此操作中, 會(huì)先讀取obj.foo的值, 這會(huì)觸發(fā)track操作, 將副作用函數(shù)入棧, 此時(shí)有加一并賦值, 此時(shí)會(huì)觸發(fā)trigger操作, 將副作用函數(shù)出棧并執(zhí)行, 在這種情況下, 該副作用函數(shù)還在執(zhí)行中, 又開始下一次的執(zhí)行, 導(dǎo)致無限遞歸調(diào)用自己導(dǎo)致棧溢出報(bào)錯(cuò).
在這個(gè)操作中讀取與設(shè)置的是同一個(gè)副作用函數(shù)activeEffect, 因此在trigger要觸發(fā)時(shí)添加條件: 如果trigger觸發(fā)的副作用函數(shù)與當(dāng)前執(zhí)行的副作用函數(shù)相同, 則不觸發(fā)執(zhí)行:
function trigger (target, key) {
const depsMap = bucket.get(target)
if (!depsMap) return
const effects = depsMap.get(key)
const effectsToRun = new Set()
effects && effects.forEach(effectFn => {
if (effectFn !== activeEffect) {
effectsToRun.add(effectFn)
}
})
effectsToRun.forEach(effectFn => effectFn())
}目前為止響應(yīng)式完整代碼
// 儲(chǔ)存副作用函數(shù)的桶
const bucket = new WeakMap()
// 用于儲(chǔ)存被注冊(cè)的副作用的函數(shù)
let activeEffect = undefined
// 副作用函數(shù)棧
const effectStack = []
function cleanup (effectFn) {
for (let itme of effectFn.deps) {
itme.delete(effectFn)
}
effectFn.deps.length = []
}
function effect (fn) {
const effectFn = () => {
cleanup(effectFn)
// 調(diào)用當(dāng)前的副作用函數(shù)時(shí), 賦值給 全局變量
activeEffect = effectFn
// 在調(diào)用副作用函數(shù)之前將該函數(shù)壓入棧
effectStack.push(effectFn)
fn()以上就是Vue.js設(shè)計(jì)與實(shí)現(xiàn)無限遞歸學(xué)習(xí)總結(jié)的詳細(xì)內(nèi)容，更多關(guān)于Vue.js無限遞歸的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
highCharts提示框中顯示當(dāng)前時(shí)間的方法
今天小編就為大家分享一篇關(guān)于highCharts提示框中顯示當(dāng)前時(shí)間的方法，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧2019-01-01
這篇文章主要介紹了Nuxt使用axios跨域問題解決方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-07-07
vue實(shí)現(xiàn)單點(diǎn)登錄的方式匯總
最近項(xiàng)目停工了，RageFrame的學(xué)習(xí)暫時(shí)告一段落，這一篇給大家分享下有關(guān)單點(diǎn)登錄的相關(guān)知識(shí)，并提供一些demo給大家參考，對(duì)vue單點(diǎn)登錄的實(shí)現(xiàn)方式感興趣的朋友一起看看吧2021-11-11
這篇文章主要為大家詳細(xì)介紹了vue自定義翻頁組件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-09-09
基于Vue實(shí)現(xiàn)HTML轉(zhuǎn)PDF并導(dǎo)出
這篇文章主要為大家介紹了三種方法，可以實(shí)現(xiàn)將HTML頁面轉(zhuǎn)為PDF并實(shí)現(xiàn)下載。文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以學(xué)習(xí)一下2022-04-04
Vue3.0中的monorepo管理模式的實(shí)現(xiàn)
這篇文章主要介紹了Vue3.0中的monorepo管理模式的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
這篇文章主要介紹了Vue中使用mixins混入方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要為大家詳細(xì)介紹了vue中常用的幾種表單rules驗(yàn)證方式,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-10-10
這篇文章主要給大家介紹了關(guān)于Vue3中watch用法與最佳實(shí)踐的相關(guān)資料,watch的作用可以監(jiān)控一個(gè)值的變換,并調(diào)用因?yàn)樽兓枰獔?zhí)行的方法,可以通過watch動(dòng)態(tài)改變關(guān)聯(lián)的狀態(tài),需要的朋友可以參考下2021-07-07
這篇文章主要介紹了vue-cli中模擬數(shù)據(jù)的兩種方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-07-07