Vue.js设计与实现无限递归学习总结
更新时间：2023年05月31日 14:54:33 作者：玛拉_以琳
这篇文章主要为大家介绍了Vue.js设计与实现无限递归学习总结，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
栈溢出
const data = { foo: 1 }
const obj = new Proxy(data, {/*...*/})
effect(() => obj.foo = obj.foo + 1)此项操作会引起栈溢出:
Uncaught RangeError: Maximum call sack size exceeded
在此操作中, 会先读取obj.foo的值, 这会触发track操作, 将副作用函数入栈, 此时有加一并赋值, 此时会触发trigger操作, 将副作用函数出栈并执行, 在这种情况下, 该副作用函数还在执行中, 又开始下一次的执行, 导致无限递归调用自己导致栈溢出报错.
在这个操作中读取与设置的是同一个副作用函数activeEffect, 因此在trigger要触发时添加条件: 如果trigger触发的副作用函数与当前执行的副作用函数相同, 则不触发执行:
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())
}目前为止响应式完整代码
// 储存副作用函数的桶
const bucket = new WeakMap()
// 用于储存被注册的副作用的函数
let activeEffect = undefined
// 副作用函数栈
const effectStack = []
function cleanup (effectFn) {
for (let itme of effectFn.deps) {
itme.delete(effectFn)
}
effectFn.deps.length = []
}
function effect (fn) {
const effectFn = () => {
cleanup(effectFn)
// 调用当前的副作用函数时, 赋值给 全局变量
activeEffect = effectFn
// 在调用副作用函数之前将该函数压入栈
effectStack.push(effectFn)
fn()以上就是Vue.js设计与实现无限递归学习总结的详细内容，更多关于Vue.js无限递归的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要给大家介绍了关于vue.js watch经常失效的场景与解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
这篇文章主要为大家详细介绍了vue实现滑动超出指定距离回顶部功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
本文主要介绍了ElementUI中el-tabs事件绑定的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
vue-virtual-scroller是一个高度可定制的虚拟滚动列表插件，它可以在大量数据下提供高性能的渲染和滚动，这篇文章主要介绍了vue-virtual-scroller 的使用,需要的朋友可以参考下2023-07-07
form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成器。本文给大家简单介绍了VueJS U取得RL 参数值的方法，详细给大家介绍了vue自定义表单生成器可根据json参数动态生成表单效果，感兴趣的朋友一起看看吧2019-07-07
这篇文章主要介绍了Vue router传递参数并解决刷新页面参数丢失问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
这篇文章主要介绍了vue大型项目之分模块运行/打包的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-09-09
这篇文章主要介绍了修改vue源码实现动态路由缓存的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-01-01
这篇文章主要介绍了vue3+ts+Vuex中使用websocket协议方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
点击弹窗其实就是添加一个弹窗图层，然后在点击的时候让他显示出来罢了。本文将利用openlayers实现这一效果，快跟随小编一起学习一下吧2022-06-06
最新评论