响应式原理

约 375 字大约 1 分钟

2025-03-14

提问

Vue 响应式原理

在 javascript 中，有两种劫持属性访问的方式： getter/setter 和 Proxies。在Vue3 中，使用了 Proxy 来创建响应式对象。

在 Vue 中，跟数据关联的其他操作行为，被称为副作用 effect，Vue 内部会维护一个使用 WeakMap 定义的副作用队列，将副作用订阅都存储在其中。
```
WeakMap<target, Map<key, Set<effect>>>
```
在数据的 getter 方法中，使用 track 函数检查是否有正在运行的副作用，然后将这个副作用添加到该数据的订阅者 Set 中。
在数据的 setter 方法中，当数据发生改变，则找到该数据的所有订阅的副作用，然后一一执行这些副作用。
对于组件实例，将 DOM 渲染也认为是副作用的一种，数据更新时，同样会去执行这个副作用。