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

目录
  • proxy
  • 依赖收集
    • currentEffect
  • 派发更新
  • 总结

proxy

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

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

  • 对reactive传进来的对象进行Proxy进行劫持在内部进行依赖收集与通知更新操作
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劫持的target与key找到对应的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响应式的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • Vue3关于响应式数据类型详解(ref、reactive、toRef、及toRefs)

    目录 ref reactive toRef() toRefs() ref 接受一个内部值,返回一个响应式的.可更改的 ref 对象,此对象只有一个指向其内部值的 property .value. 类型 function ref<T>(value: T): Ref<UnwrapRef<T>> interface Ref<T> { value: T } 详细信息 ref 对象是可更改的,也就是说你可以为 .value 赋予新的值.它也是响应式的,即所有对 .va

  • vue3.2 reactive函数问题小结

    reactive函数 上篇文章给大家介绍了Vue中的reactive函数操作代码,需要的朋友点击查看. reactive用来包装一个对象,使其每个对象属性都具有响应性(也就是深层次响应式). 语法:const 代理对象= reactive(源对象) . 接收一个对象(或数组),返回一个代理对象(简称proxy对象). 内部基于 ES6 的 Proxy 实现,通过代理对象操作源对象内部数据进行操作. 注意点1: 问题:reactive函数使用基本类型数据会报警告 注意点2: 总结:基础类型数据推荐

  • vue3 reactive函数用法实战教程

    目录 vue3 reactive函数用法 Vue3中reactive的理解 1.什么是reactive? 2.reactive注意点 错误示范 正确实例 arr正确实例 vue3 reactive函数用法 reactive的用法与ref的用法相似,也是将数据变成响应式数据,当数据发生变化时UI也会自动更新.不同的是ref用于基本数据类型,而reactive是用于复杂数据类型,比如对象和数组例如:定义一个对象类型的变量user <template> <div> <p>{{

  • Vue3 源码分析reactive readonly实例

    目录 引言 一.reactive 和 readonly 1. reactive相关类型 2. 相关全局变量与方法 3. reactive函数 4. 造物主createReactiveObject 5. shallowReactive.readonly和shallowReadonly 二.对应的 Handlers 1. baseHandlers 1.1 reactive 1.2 readonly 1.3 shallowReactive 1.4 shallowReadonly 2. cellecti

  • vue3 中ref和reactive的区别讲解

    1. ref和reactive区别:    如果在template里使用的是ref类型的数据, 那么Vue会自动帮我们添加.value    如果在template里使用的是reactive类型的数据, 那么Vue不会自动帮我们添加.value 2. Vue是如何决定是否需要自动添加.value的    Vue在解析数据之前, 会自动判断这个数据是否是ref类型的,    如果是就自动添加.value, 如果不是就不自动添加.value 3. Vue是如何判断当前的数据是否是ref类型的   

  • vue3中如何使用ref和reactive定义和修改响应式数据(最新推荐)

    需求:vue3中setup组合式api中如何定义响应式数据并且修改赋值呢? 1.字符串/数字:“ref”是vue3中用来存储值的响应式数据源,它可以定义字符串,数字等 <script setup> import { ref } from 'vue' // "ref"是用来存储值的响应式数据源. // 理论上我们在展示该字符串的时候不需要将其包装在 ref() 中, const message = ref('Hello World!') // 但是在这个示例中更改这个值的时候

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

    目录 proxy 依赖收集 currentEffect 派发更新 总结 proxy vue3的响应式实现依旧是依赖收集与派发更新,本节乃至后面涉及的代码都是经过简化,文章目的是讲解原理,直接贴源码会很枯燥 vue3已经从Object.property更换成Proxy,Proxy相比于前者可以直接监听对象数组,对于深层次的对象和数组,会把触发对应getter,然后去递归进行依赖收集,并不是直接像vue2暴力那样递归,总体而言性能更好 对reactive传进来的对象进行Proxy进行劫持在内部进行依

  • Vue3 reactive响应式赋值页面不渲染的解决

    目录 Vue3 reactive响应式赋值页面不渲染 问题描述 1.因数据结构而导致的未渲染解决方法 2.因页面节点未加载导致页面未渲染解决方法 3.因未指到具体点未渲染解决方法 Vue3 响应式原理-reactive Reactivity模块基本使用 编写reactive函数 Vue3 reactive响应式赋值页面不渲染 问题描述 //声明变量 let data = reactive([]) http().then(res=>{   data = res.data   console.log

  • Vue3 Reactive响应式原理逻辑详解

    Vue3 Reactive响应式原理逻辑详解

    目录 前言 一.怎么实现变量变化 二.怎么实现变量变化 三.将多个dep存储在Map中 四.将多个object的depsMap继续存储起来 五.核心 六.源码解析(TypeScript) 前言 本篇文章主要讲解vue响应式原理的逻辑,也就是vue怎么从最开始一步步推导出响应式的结构框架. 先从头构建一个简单函数推导出Vue3的Reactive原理,最后再进行源码的验证. 一.怎么实现变量变化 怎么实现变量变化,相关依赖的结果也跟着变化 当原本price=5变为price=20后total应该变为

  • Vue3中的ref和reactive响应式原理解析

    目录 1 ref 2 isref判断是不是一个ref对象 3 shallowref创建一个跟踪自身.value变化的 ref,但不会使其值也变成响应式的 4 triggerRef 5 customRef 6 reactive用来绑定复杂的数据类型 7 readonly 8 shallowReactive 9toRef 10toRefs 11toRaw Vue3系列4--ref和reactive响应式 本节主要介绍了响应式变量和对象,以及变量和对象在响应式和非响应式之间的转换. 1 ref 接受一

  • Vue3 的响应式和以前有什么区别，Proxy 无敌？

    前言 大家都知道,Vue2 里的响应式其实有点像是一个半完全体,对于对象上新增的属性无能为力,对于数组则需要拦截它的原型方法来实现响应式. 举个例子: let vm = new Vue({ data() { return { a: 1 } } }) // ❌ oops,没反应! vm.b = 2 let vm = new Vue({ data() { return { a: 1 } }, watch: { b() { console.log('change !!') } } }) // ❌ oo

  • 一文带你了解vue3.0响应式

    一文带你了解vue3.0响应式

    目录 使用案例 reactive API相关的流程 reactive createReactiveObject 创建响应式对象 mutableHandlers 处理函数 get函数 get函数的的调用时机 track 收集依赖 set函数 trigger 分发依赖 get和副作用渲染函数关联 副作用渲染函数的执行过滤 结尾 我们知道Vue 2.0是利用Ojbect.defineProperty对对象的已有属性值的读取和修改进行劫持,但是这个API不能监听对象属性的新增和删除,此外为了深度劫持对象

  • 40行代码把Vue3的响应式集成进React做状态管理

    前言 vue-next是Vue3的源码仓库,Vue3采用lerna做package的划分,而响应式能力@vue/reactivity被划分到了单独的一个package中. 如果我们想把它集成到React中,可行吗?来试一试吧. 使用示例 话不多说,先看看怎么用的解解馋吧. // store.ts import { reactive, computed, effect } from '@vue/reactivity'; export const state = reactive({ count:

  • vue3.0响应式函数原理详细

    目录 1.reactive 2.ref 3.toRefs 4.computed 前言: Vue3重写了响应式系统,和Vue2相比底层采用Proxy对象实现,在初始化的时候不需要遍历所有的属性再把属性通过defineProperty转换成get和set.另外如果有多层属性嵌套的话只有访问某个属性的时候才会递归处理下一级的属性所以Vue3中响应式系统的性能要比Vue2好. 接下来我们自己实现Vue3响应式系统的核心函数(reactive/ref/toRefs/computed/effect/trac

  • 浅析一下Vue3的响应式原理

    浅析一下Vue3的响应式原理

    目录 Proxy Reflect 举个例子 reactive effect track trigger Proxy Vue3 的响应式原理依赖了 Proxy 这个核心 API,通过 Proxy 可以劫持对象的某些操作. const obj = { a: 1 }; const p = new Proxy(obj, {   get(target, property, receiver) {     console.log("get");     return Reflect.get(tar

随机推荐