上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

vue计算函数新旧变化

[复制链接]

217

主题

1779

帖子

2329

积分

管理员

非物质文化遗产社会摇传承人

Rank: 9Rank: 9Rank: 9

积分
2329
发表于 2022-1-2 01:23:07 | 显示全部楼层 | 阅读模式

前文

只是自己的一次无聊想法

很基础的内容

大佬不要嘲笑

computed变化

vue对computed进行了响应优化

这里拿了2.5.6和2.5.17做对比

图片.png

2.5.17提示的是RangeError: Maximum call stack size exceeded

具体改变在于哪呢?

在源码的Watcher.prototype.update位置

图片.png

看注释和代码来说,大概意思是早期是判断deps是否为0,如果为0则再下轮访问刷新,否则立即刷新

但是新版无论是否进行notify,都会下轮访问才进行刷新

也就是说内部修改变量已经无法触发刷新了

新版则是收集dep之后,一旦网页访问compute函数,则同时对所有函数的user watch收集的dep也进行一次依赖响应

来让依赖也拿到渲染watch

一旦对其变量进行修改

则变量会对user watch做一个dirty处理

然后触发渲染watch刷新

渲染watch获取computed属性,触发重新计算值

而旧版的逻辑则是

一旦变量更新通知user watch,获取值之后,再由user watch通知渲染watch进行更新

Watcher.prototype.update = function update () {
    var this$1 = this;

  /* istanbul ignore else */
  if (this.computed) {
    // A computed property watcher has two modes: lazy and activated.
    // It initializes as lazy by default, and only becomes activated when
    // it is depended on by at least one subscriber, which is typically
    // another computed property or a component's render function.
    if (this.dep.subs.length === 0) {
      // In lazy mode, we don't want to perform computations until necessary,
      // so we simply mark the watcher as dirty. The actual computation is
      // performed just-in-time in this.evaluate() when the computed property
      // is accessed.
      this.dirty = true;
    } else {
      // In activated mode, we want to proactively perform the computation
      // but only notify our subscribers when the value has indeed changed.
      this.getAndInvoke(function () {
        this$1.dep.notify();
      });
    }
  } else if (this.sync) {
    this.run();
  } else {
    queueWatcher(this);
  }
};
混的人。

0

主题

12

帖子

19

积分

禁止访问

积分
19
发表于 2022-1-9 13:47:19 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
回复

使用道具 举报

发表回复

本版积分规则

快速回复 返回顶部 返回列表