computed 计算属性实现 | 源码解析系列 2.5一、引言computed计算属性是Vue中非常实用的特性它允许我们定义一个基于响应式数据的派生值。计算属性具有缓存机制只有当其依赖的响应式数据发生变化时才会重新计算。二、computed的基本概念2.1 什么是计算属性计算属性是一个基于响应式数据计算得出的新值它具有缓存机制。import{reactive,computed}fromvueconststatereactive({firstName:John,lastName:Doe})constfullNamecomputed((){console.log(计算中...)returnstate.firstName state.lastName})console.log(fullName.value)// 执行计算console.log(fullName.value)// 使用缓存不打印计算中...2.2 计算属性的特点计算属性有四个重要特点懒计算、缓存机制、依赖追踪和响应式。三、computed的实现原理3.1 computed工厂函数exportfunctioncomputedT(getterOrOptions:(()T)|WritableComputedOptionsT,debugOptions:DebuggerOptions{}){letgetter:()Tletsetter:(()void)|undefinedif(isFunction(getterOrOptions)){gettergetterOrOptions}else{gettergetterOrOptions.get settergetterOrOptions.set}returnnewComputedRefImpl(getter,setter,debugOptions)asany}3.2 ComputedRefImpl类classComputedRefImplT{private_value!:Tprivate_dirtytrueprivatereadonlyeffect:ReactiveEffectTconstructor(getter:()T,privatereadonly_setter:(()void)|undefined,debugOptions:DebuggerOptions){this.effecteffect(getter,{lazy:true,scheduler:(){if(!this._dirty){this._dirtytruetriggerRefValue(this)}}})}getvalue():T{trackRefValue(this)if(this._dirty){this._dirtyfalsethis._valuethis.effect()}returnthis._value}}四、懒计算与缓存机制4.1 懒计算的实现通过设置lazy: true创建effect时不立即执行。this.effecteffect(getter,{lazy:true,scheduler:(){/* ... */}})4.2 缓存机制工作流程第一次访问value时执行effect计算新值后续访问时直接返回缓存结果当依赖变化时scheduler将_dirty设为true。五、依赖追踪与触发更新5.1 计算属性的依赖收集计算属性内部使用effect来收集依赖。this.effecteffect(getter,{lazy:true,scheduler:(){/* ... */}})5.2 触发更新当计算属性的依赖变化时scheduler会被调用标记计算属性为dirty并触发依赖于它的effect。六、总结计算属性通过lazy选项实现懒计算通过_dirty标志实现缓存机制。它的实现巧妙地将响应式的依赖收集和触发更新机制结合起来既保证了计算结果的正确性又通过缓存机制提供了良好的性能。参考资料Vue3 官方源码https://github.com/vuejs/core