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