【源码系列#03】Vue3计算属性原理(Computed)

  • 【源码系列#03】Vue3计算属性原理(Computed)已关闭评论
  • 48 次浏览
  • A+
所属分类:Web前端
摘要

专栏分享:vue2源码专栏,vue3源码专栏,vue router源码专栏,玩具项目专栏,硬核💪推荐🙌


专栏分享:vue2源码专栏vue3源码专栏vue router源码专栏玩具项目专栏,硬核💪推荐🙌

欢迎各位ITer关注点赞收藏🌸🌸🌸

语法

传入一个 getter 函数,返回一个默认不可手动修改的 ref 对象

const count = ref(1) const plusOne = computed(() => count.value + 1)  console.log(plusOne.value) // 2  plusOne.value++ // 错误! 

或者传入一个拥有 get 和 set 函数的对象,创建一个可手动修改的计算状态

const count = ref(1) const plusOne = computed({   get: () => count.value + 1,   set: (val) => {     count.value = val - 1   }, })  plusOne.value = 1 console.log(count.value) // 0 

源码实现

  • @issue1 computed参数兼容只传getter方法和handler对象的情况

  • @issue2 缓存特性,只要依赖的变量值没有发生变化,就取缓存中的值

    _dirty作为缓存标识,如果依赖的变量值有变化,则将 _dirty 值置为 true,后续读取计算属性时,重新执行getter;否则直接取_value

  • @issue3 嵌套effect,firstname -> 计算属性fullName -> effect,下一章节详细介绍

import { isFunction } from '@vue/shared' import { ReactiveEffect, trackEffects, triggerEffects } from './effect'  /**  * @issue1 computed参数兼容只传getter方法和handler对象  * @issue2 缓存,只要依赖的变量值没有发生变化,就取缓存中的值  * @issue3 嵌套effect,firname -> fullName -> effect  */ class ComputedRefImpl {   public effect   public _dirty = true // 默认应该取值的时候进行计算   public _value   public dep = new Set()   public __v_isReadonly = true   public __v_isRef = true   constructor(public getter, public setter) {     // 我们将用户的getter放到effect中,这里面firstname和lastname就会被这个effect收集起来     this.effect = new ReactiveEffect(getter, () => {       // 稍后依赖的属性firstname、lastname变化了,会执行此调度函数       if (!this._dirty) {         this._dirty = true         // 实现一个触发更新 @issue3         triggerEffects(this.dep)       }     })   }      // 类中的访问器属性 底层就是Object.defineProperty   // https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/get   get value() {     // 做依赖收集 @issue3     trackEffects(this.dep)     // @issue2     if (this._dirty) {       // 说明这个值是脏的       this._dirty = false       this._value = this.effect.run()     }     return this._value   }      set value(newValue) {     this.setter(newValue)   } }  export const computed = getterOrOptions => {   let onlyGetter = isFunction(getterOrOptions)    let getter   let setter   // @issue1    if (onlyGetter) {     getter = getterOrOptions     setter = () => {       console.warn('no set')     }   } else {     getter = getterOrOptions.get     setter = getterOrOptions.set   }   return new ComputedRefImpl(getter, setter) }  

trackEffects 和 triggerEffects 方法如下

export function trackEffects(dep) { // 收集dep 对应的effect   if (activeEffect) {     let shouldTrack = !dep.has(activeEffect) // 去重了     if (shouldTrack) {       dep.add(activeEffect)       // 存放的是属性对应的set       activeEffect.deps.push(dep) // 让effect记录住对应的dep, 稍后清理的时候会用到     }   } }  export function triggerEffects(effects) {    effects = new Set(effects);   for (const effect of effects) {     if (effect !== activeEffect) { // 如果effect不是当前正在运行的effect       if (effect.scheduler) {         effect.scheduler()       } else {         effect.run(); // 重新执行一遍       }     }   } } 

嵌套 effect

让我们分析一下这个测试用例

const { effect, reactive, computed } = VueReactivity const state = reactive({ firname: '李', lastname: '柏成' })  const fullName = computed(() => {   // defineProperty中的getter   return state.firstname + state.lastname })  effect(() => {   app.innerHTML = fullName.value })  setTimeout(() => {   state.firstname = '王' }, 1000)  // 1. firstname要依赖于计算属性的effect // 2. 计算属性收集了外层effect // 3. 依赖的值变化了会触发计算属性effect重新执行, 计算属性重新执行的时候会触发外层effect来执行  // computed 特点:缓存 console.log('fullName.value', fullName.value) console.log('fullName.value', fullName.value) 
  1. 当执行到 renderEffect 时,默认先执行一次 effect.run(),activeEffect --> renderEffect,并运行 this.fn() --> app.innerHTML = fullName.value
effect(() => {   app.innerHTML = fullName.value }) 
  1. 当访问 fullName.value 时,在 getter 方法中执行 trackEffects(this.dep),计算属性fullName 依赖收集 当前的 activeEffect(renderEffect)
  2. 当运行 this._value = this.effect.run() 时,activeEffect --> computedEffect,并运行 this.fn() ---> return state.firstname + state.lastname
  3. 访问了state.firstname,属性 firstname 依赖收集当前的 activeEffect(computedEffect)
  4. 访问了state.lastname,属性 lastname 依赖收集当前的 activeEffect(computedEffect)
  5. 一秒钟后,firstname 发生了变化。。。firstname变化触发更新 triggerEffects --> computedEffect.scheduler()
  6. 在计算属性 scheduler 中,触发更新 triggerEffects(this.dep) --> renderEffect.run() ,最终重新渲染页面 app.innerHTML = fullName.value

【源码系列#03】Vue3计算属性原理(Computed)