Skip to content

响应式原理

386字约1分钟

2022-04-20

vue@3

提问

  1. 简单介绍一下Vue的响应式原理
  2. vue2 和 vue3 的响应式对象有什么区别?

Vue 响应式原理

在 javascript 中,有两种劫持属性访问的方式: getter/setterProxies。 在Vue3 中,使用了 Proxy 来创建响应式对象。

  • 在 Vue中,跟数据关联的其他操作行为,被称为副作用 effect,Vue内部会维护一个使用 WeakMap 定义的副作用队列, 将副作用订阅都存储在其中。

    WeakMap<target, Map<key, Set<effect>>>
  • 在 数据的 getter 方法中,使用 track 函数检查是否有正在运行的副作用,然后将这个副作用添加到该数据的订阅者 Set 中。

  • 在数据的 setter 方法中,当数据发生改变,则找到该数据的所有订阅的副作用,然后一一执行这些副作用。

  • 对于组件实例,将DOM渲染也认为是副作用的一种,数据更新时,同样会去执行这个副作用。

Vue3 和 Vue2 实现响应式原理的区别

  • 相比于 Vue2, Vue3的由于采用了 Proxy的方式来实现响应式对象, 响应式数据能够检测到响应式对象的属性的添加和删除

  • 使用WeakMap数据结构来保存响应式对象的副作用,在响应式对象没有再被引用时,能够及时的被垃圾回收,减少内存开销。