Vue.js设计与实现无限递归学习总结
作者：玛拉_以琳 发布时间：2024-04-28 10:53:53
标签：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()
来源：https://segmentfault.com/a/1190000042308922
0
投稿猜你喜欢
前言圣诞节快到了，是不是想用python画一个可爱的圣诞树，我在各大网站都查了一下，都不太美观，然后我就学习了一下别人的代码改写了一下，自己- 本文实例讲述了Python3中的真除和Floor除法用法。分享给大家供大家参考，具体如下：在Python3中，除法运算有两种，一种是真除，一
- 首先是抓包，使用scapy模块，sniff()函数 在其中参数为本地文件路径时，操作为打开本地文件若参数为BPF过滤规则和回调函数，则进行S
- 上次在blueidea上看到一个元素圆角的实现方法，但是那个太复杂了。于是就自己写了一个函数，可以将元素自动圆角，如div层，表格等。共有四
- 前言用python编程绘图，其实非常简单。中学生、大学生、研究生都能通过这10篇教程从入门到精通！快速绘制几种简单的柱状图。1垂直柱图（普通
- 前言mitmproxy 是 man-in-the-middle proxy 的简称，译为中间人代理工具，可以用来拦截、修改、保存 HTTP/
- 定时刷新的不足与改进web开发中可能遇到这样的场景：网页里的某一块区域里写了一些内容，但这些内容不是固定的，即使看网页的人没有做任何操作，它
- 有史以来最牛逼的绘图工具，没有之一plotly是现代平台的敏捷商业智能和数据科学库，它作为一款开源的绘图库，可以应用于Python、R、MA
- 1.正则匹配数字，\为转义字符，d+为匹配一次或多次如下所示：返回的结果为列表2.正则匹配小数如下所示，返回的结果125.6为字符串总结&n
- <!-- -----------[test]表生成脚本---------------
- 一年一度的元宵节刚刚过去，由于时间关系，在元宵节当天晚上11点多才完成本文灯笼的绘制。这两天又在忙着别的事情，所以现在才跟大家分享。一、效果
- 本文实例为大家分享了vue简单实现购物车结算的具体代码，供大家参考，具体内容如下样式没有写<template> <
- 函数使用单下划线_开头使用单下划线(_)开头的函数_func不能被模块外部以: from module import *形式导入。但可以用：
- 这是一个神奇的组件，通过名字我们可以看出来，这个组件的功能就是把model和form组合起来，对，你没猜错，相信自己的英语水平。先来一个简单
- 一、单字节SQL注入MYSQL的SQL注入已经由来已久，以下是普遍采用的注入步骤：1、在GET参数上加一个/*或者#（mysql专有的注释）
- 在一个规范化的研发流程中，一般遵循如下流程：开发阶段：研发功能或者修复bug，在本地自测。代码审核阶段：提交代码，并请求团队内人员做code
- 能评估使用方法性能评估模块提供了一系列用于模型性能评估的函数,这些函数在模型编译时由metrics关键字设置性能评估函数类似与目标函数, 只
- 一、前言最近忙着在服务器上跑代码学习积累了一些经验技巧这里用来记录分享给大家二、创建虚拟环境用来跑代码下面我会以一个实例为模板，学习完之后，
- 一、excel的内容二、效果三、需要用的库：openpyxlsmptlibemail.mime.textemail.header四、实现步骤
- virtualenv用于创建独立的Python环境，多个Python相互独立，互不影响，它能够：1. 在没有权限的情况下安装新套件2. 不同
