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()})