Vue响应式原理

Vue响应式原理

• 数据劫持：vue2的Object.defineProperty(对属性添加getter和setter方法)，vue3的Proxy。
• 依赖收集：模板渲染时收集，computed收集，watch收集。
• 依赖执行：将收集到的依赖依次执行。
  依赖其实就是数据变化时要执行的函数。

依赖收集

Vue 响应式依赖收集的核心是收集数据变化时需要重新执行的代码，具体包括：

• 组件模板渲染的「更新函数」（最核心）；
• 计算属性的「求值函数」；
• watch/watcher 的用户自定义的「回调函数」；
• 手动通过 watchEffect/ReactiveEffect 等 API 定义的「自定义函数」。

依赖收集的本质是「响应式数据与执行函数的映射」，数据变化时通过映射关系精准触发函数执行，这也是 Vue 实现「数据驱动视图」的核心原理。

源码解析

vue2是通过Dep类收集(watcher)，Dep类维护一个watcher数组，数据变化时通知watcher更新。
vue3是通过effect函数收集。get时调用track收集依赖，set时调用trigger触发所有的effect更新。

vue2通过watcher类收集依赖

• 渲染watcher
  每个组件在挂载时都会创建一个渲染watcher，负责渲染视图时的依赖收集。

newWatcher(vm,updateComponent,noop,watcherOptions,true)/* isRenderWatcher */

• 计算属性(缓存)
  每一个计算属性内部维护一个dirty属性，表示是否需要重新计算。
  当取值时dirty为true就会执行计算函数计算值，拿到值缓存起来this.value, 并将dirty设置为false。
  再次取值时，dirty为false就直接返回缓存的值this.value。
  当计算属性依赖的数据变化时，会将dirty设置为true，下次访问计算属性时会重新计算值。

• 计算属性watcher(lazy:true)

newWatcher(vm,getter,noop,{lazy:true})

计算属性会创建一个计算属性watcher，lazy:true表示懒执行。不会立即执行计算函数。
通过Object.defineProperty给计算属性添加getter和setter方法。
当访问计算属性时会调用getter方法，拿到计算属性watcher，看看dirty属性是否为true，如果是true就执行计算函数计算值，并将dirty设置为false。
同时让计算属性watcher中依赖的属性收集最外层的渲染watcher，这样当计算属性依赖的数据变化时会通知渲染watcher更新视图。

• 用户watch定义时的watcher

newWatcher(vm,expOrFn,cb,options)//cb是用户定义的回调函数。

用户通过watch选项或者$watch方法创建的watcher。

vue3通过effect函数收集依赖

• 渲染effect：

consteffect=(instance.effect=newReactiveEffect(componentUpdateFn))

• 计算属性effect

consteffect=newReactiveEffect(getter,()=>{if(!dirty){dirty=true// 计算属性依赖的属性变化时，通知计算属性收集的渲染effect更新triggerRefValue(computedRefImpl)}})

和vue2不一样的是，这个计算属性会收集当前组件渲染的effect作为它的依赖。不需要普通属性自己去收集渲染watcher。
计算属性依赖的属性变化时，会通知计算属性effect更新dirty, 并且计算属性会触发自己收集的渲染effect执行。

• 用户watch effect

consteffect=newReactiveEffect(getter,()=>{// 当数据变化时执行回调job()})