大白话讲懂Vue3.6的响应式升级

127 阅读1分钟

首先回顾一下Vue3.5及之前的响应式收集的方法。

有两个主要的集合,targetMap主要用来存储目标的对象映射表,depsMap主要是存储属性依赖映射表。

举例来说有一个响应式对象obj={count:1},那么在targetMap中key就是obj而键值就是depsMap,那么depsMap中key就是obj的每一个属性,这里就是count,键值就是一个充满副作用函数的set集合,当响应式数据count更新时,就先从targetMap中找到obj属性映射的Map集合,再从集合中找到count对应的副作用函数,拿出来执行。

再来说一下Vue3.6的响应式升级。

Vue3.6实现了一种类似订阅链表的形式,它会记住两者之前的依赖关系。

举例说明,有一个 a=ref(1)

b=computed(return a.value*2)

watchEffect里面函数打印b.value

首先他会通过watcheffect一层一层往下寻找,第一次找到b,再找到a,那么它会把a和b建立一层发布订阅的关联,可以理解通过链表联系在一起,之后再把b和副作用联系在一起,当a发生变化时,会通知b,b会向上游拿取值,如果值发生变化,就会触发给下一层,也就是触发watcheffect里面的函数,如果值没有变化,则不会触发。