文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue3 reactive响应式依赖收集派发更新原理解析

2023-03-06 11:10

关注

proxy

vue3的响应式实现依旧是依赖收集与派发更新,本节乃至后面涉及的代码都是经过简化,文章目的是讲解原理,直接贴源码会很枯燥

vue3已经从Object.property更换成ProxyProxy相比于前者可以直接监听对象数组,对于深层次的对象和数组,会把触发对应getter,然后去递归进行依赖收集,并不是直接像vue2暴力那样递归,总体而言性能更好

function reactive(raw) {
  return new Proxy(raw, {
    get(target, key) {
      const res = Reflect.get(target, key);
      //添加依赖
      track(target, key as string);
      return res;
    },
    set(target, key, value) {
      const res = Reflect.set(target, key, value);
      trigger(target, key);
      return res;
    },
  });
}

采用Reflet对对象进行标准化操作,因为如果直接采用JS如果失败了,不会产生异常提示

这样在进行获取数据是后进行依赖收集,在更新数据后进行通知依赖更新

依赖收集

接下来便介绍依赖收集是个什么样子

const targetMap = new WeakMap();
function track(target, key) {
  let depsMap = targetMap.get(target);
  if (!depsMap) {
    depsMap = new Map();
    targetMap.set(target, depsMap);
  }
  let dep = depsMap.get(key);
  if (!dep) {
    dep = new Set();
    depsMap.set(key, dep);
  }
  dep.add(currentEffect);
}

首先是一个WeakMap-->然后用户通过target获取对应的内部Map-->然后通过key获取到Set集合,内部便是存储的一个个依赖。其实依赖收集的过程就是这样。

这里使用WeakMap原因是它是一个弱引用,不会影响垃圾回收机制回收。

currentEffect

那么currentEffect 到底是个什么东西呢?实际上是ReactiveEffect中正在运行的类

class ReactiveEffect {
  private fn: Function;
  constructor(_fn: Function) {
    this.fn = _fn;
  }
  run() {
    currentEffect = this;
    this.fn();
  }
}
let currentEffect: null | ReactiveEffect = null;
function effect(fn: Function) {
  const reactiveEffect = new ReactiveEffect(fn);
  reactiveEffect.run();
}

后续会详情讲解,目前可以就把他理解成一个依赖,用户使用了effect函数过后,里面的响应式数据发生变化后会重新执行传递进去的回调函数

vue2中收集的依赖对应watcher,vue3收集的依赖实际是effect,他们两者实现功能实际上是一样的。

派发更新

这里暂不考虑DOM问题,操作起来其实很简单就是通过被Proxy劫持的targetkey找到对应的Set集合调用用户传递的fn函数进行依赖更新

function trigger(target, key) {
  let depsMap = targetMap.get(target);
  let dep = depsMap.get(key);
  for (let effect of dep) {
    effect.fn();
  }
}

总结

依赖收集与更新流程非常简单,其实就是当用户访问数据Proxy监听到后进行依赖收集;怎么收集呢用户在使用effect函数时实际上currentEffect就有值,待到访问数据后就可以收集这个依赖;然而用户如果设置对应数据那么就会被Proxy监听到,然后通过key拿到对应依赖执行fn函数

下一节会详细介绍effect,这一节只是初步介绍effect是的作用,以及如何解决分支切换、嵌套栈、无限循环递归问题。

以上就是vue3 reactive响应式依赖收集派发更新原理解析的详细内容,更多关于vue3 reactive响应式的资料请关注编程网其它相关文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯