【框架实现】vue3的computed

一直游到海水变蓝2024-01-08 14:13

源码阅读与调试

计算属性computed会基于其响应式以来被缓存 ，并且在依赖的响应式数据发生变化时重新计算 。

创建一个computed的测试实例；

js 复制代码 
const { reactive, effect, computed } = Vue

const obj = reactive({
  name: '张三'
})

const computedObj = computed(() => {
  return '姓名：' + obj.name
})

effect(() => {
  document.querySelector('#app').innerText = computedObj.value
})

setTimeout(() => {
  obj.name = '李四'
}, 2000)

reactive之前文章有详细描述，这里就不赘述了，直接来看本文的主题computed；

ts 复制代码 
export function computed<T>(
  getterOrOptions: ComputedGetter<T> | WritableComputedOptions<T>,
  debugOptions?: DebuggerOptions,
  isSSR = false
) {
  let getter: ComputedGetter<T>
  let setter: ComputedSetter<T>
  // isFunction判断是不是函数
  const onlyGetter = isFunction(getterOrOptions)
  // onlyGetter为true
  if (onlyGetter) {
    getter = getterOrOptions
    // 当前没有setter,所以它现在是一个空函数
    setter = __DEV__
      ? () => {
          console.warn('Write operation failed: computed value is readonly')
        }
      : NOOP
  } else {
    getter = getterOrOptions.get
    setter = getterOrOptions.set
  }

  const cRef = new ComputedRefImpl(getter, setter, onlyGetter || !setter, isSSR)
  // 返回ComputedRefImpl的实例
  return cRef as any
}

第9行的getterOrOptions此时为我们computed传入的函数，如下图所示；

接着会进入new ComputedRefImpl；

ts 复制代码 
export class ComputedRefImpl<T> {
  public dep?: Dep = undefined

  private _value!: T
  public readonly effect: ReactiveEffect<T>

  public readonly __v_isRef = true

  // _dirty变量非常重要
  public _dirty = true
  public _cacheable: boolean

  constructor(
    getter: ComputedGetter<T>,
    private readonly _setter: ComputedSetter<T>,
    isReadonly: boolean,
    isSSR: boolean
  ) {
    // 如果effect.run()执行就会触发getter方法，接着触发回调函数
    this.effect = new ReactiveEffect(getter, () => {
      // 如果this._dirty为false,执行triggerRefValue方法
      // this._dirty用来控制什么时候触发依赖
      if (!this._dirty) {
        this._dirty = true
        triggerRefValue(this)
      }
    })
  }
}

第20行中传入的getter就是我们在computed中传入的函数，如下图所示：

到这里computed函数就执行完成了；接着测试实例中是在effect方法中触发了computedObj的Getter，也就是class ComputedRefImpl的get方法；

ts 复制代码 
export class ComputedRefImpl<T> {
  get value() {
    // self可以被看作this
    const self = toRaw(this)
    // 收集依赖
    trackRefValue(self)
    // _dirty为true
    if (self._dirty || !self._cacheable) {
      self._dirty = false
      // 这里会执行computed中传入的函数
      self._value = self.effect.run()!
    }
    // self._value为"姓名：张三"
    return self._value
  }
  set value(newValue: T) {
    this._setter(newValue)
  }
}

第14行返回self._value,此时的self._value如下图所示：

到这里我们发现computed本质上也没有代理监听的机制，它也是通过get value和set value进行的触发；我们发现get value和set value中只有收集依赖没有触发依赖；触发依赖在class ComputedRefImpl的constructor中，也就是ReactiveEffect的回调函数里；这时我们去看一下ReactiveEffect都做了什么：

调度器相关逻辑，先来划重点：

我们继续调试跟踪代码，执行settimtout时，会触发Setter，也就是baseHandler文件中的createSetter方法;

createSetter方法=>trigger方法=>triggerEffects方法=>triggerEffect方法

看一下triggerEffects方法具体做了什么：

ts 复制代码 
export function triggerEffects(
  dep: Dep | ReactiveEffect[],
  debuggerEventExtraInfo?: DebuggerEventExtraInfo
) {
  const effects = isArray(dep) ? dep : [...dep]
  for (const effect of effects) {
    // 判断是否有computed
    if (effect.computed) {
      triggerEffect(effect, debuggerEventExtraInfo)
    }
  }
  for (const effect of effects) {
    if (!effect.computed) {
      triggerEffect(effect, debuggerEventExtraInfo)
    }
  }
}

triggerEffect方法;

ts 复制代码 
function triggerEffect(
  effect: ReactiveEffect,
  debuggerEventExtraInfo?: DebuggerEventExtraInfo
) {
  if (effect !== activeEffect || effect.allowRecurse) {
    if (__DEV__ && effect.onTrigger) {
      effect.onTrigger(extend({ effect }, debuggerEventExtraInfo))
    }
    // 判断是否有scheduler
    if (effect.scheduler) {
      effect.scheduler()
    } else {
      effect.run()
    }
  }
}

第2行中effect如下图所示；它里面是包含一个scheduler的；因此它会执行scheduler的逻辑；这是会再次执行class ComputedRefImpl中constructor里的传入的函数；

scheduler也就是我们测试实例中computed传入的方法；

js 复制代码 
const computedObj = computed(() => {
      return '姓名：' + obj.name
})

进入scheduler方法，也就是我们new ReactiveEffect传入的回调函数；

ts 复制代码 
export class ComputedRefImpl<T> {
  constructor(
  ) {
    this.effect = new ReactiveEffect(getter, () => {
      if (!this._dirty) {
        this._dirty = true
        triggerRefValue(this)
      }
    })
  }
}

第5行的this.dirty是false,会去触发依赖；会再次进入triggerRefValue方法；

triggerRefValue方法=>triggerEffects方法

ts 复制代码 
export function triggerEffects(
  dep: Dep | ReactiveEffect[],
  debuggerEventExtraInfo?: DebuggerEventExtraInfo
) {
  const effects = isArray(dep) ? dep : [...dep]
  // 第一层for循环没有触发
  for (const effect of effects) {
    if (effect.computed) {
      triggerEffect(effect, debuggerEventExtraInfo)
    }
  }
  // 触发第二层for循环
  for (const effect of effects) {
    if (!effect.computed) {
      triggerEffect(effect, debuggerEventExtraInfo)
    }
  }
}

此时的effect的scheduler不存在了，fn也变成了effect中传入的方法；

fn此时如下图所示：

执行完effect，页面视图也从姓名：张三 变成了姓名：李四；

触发依赖：

  1. 第一次settimeout中触发Setter；
  2. 第二次是在new ReactiveEffect的回调函数中触发；

computed的总结：

  1. computed的本质是一个ComputedRefImpl的实例；
  2. ComputedRefImpl中通过dirty变量来控制run的执行和triggerRefValue的触发；
  3. 想要访问计算属性的值，必须通过.value，因为它内部和ref一样是通过get value来进行实现的；
  4. 每次.value时都会触发trackRefValue即：收集依赖；
  5. 在触发依赖时，需要先触发computed的effect，再触发非computed的effect；

实现computed

实现class ComputedRefImpl

首先创建一个computed的测试实例：

js 复制代码 
const { reactive, effect, computed } = Vue;

const obj = reactive({
  name: "张三",
});

const computedObj = computed(() => {
  return "姓名：" + obj.name;
});

effect(() => {
  document.querySelector("#app").innerText = computedObj.value;
});

setTimeout(() => {
  obj.name = "李四";
}, 2000);

创建packages/reactivity/src/computed.ts

ts 复制代码 
import { isFunction } from "@vue/shared";
import { ReactiveEffect } from "./effect";
import { trackRefValue } from "./ref";
import { Dep } from "./dep";

export type ComputedGetter<T> = (...args: any[]) => T;

export function computed<T>(getterOrOptions: ComputedGetter<T>) {
  let getter: ComputedGetter<T>;

  const onlyGetter = isFunction(getterOrOptions);
  if (onlyGetter) {
    getter = getterOrOptions;
    const cRef = new ComputedRefImpl(getter);

    return cRef as any;
  }
}
export class ComputedRefImpl<T> {
  public dep?: Dep = undefined;
  private _value!: T;
  private readonly effect: ReactiveEffect<T>;
  public _dirty = true;

  constructor(getter: ComputedGetter<T>) {
    this.effect = new ReactiveEffect(getter);
  }
  get value() {
    trackRefValue(this);
    return this._value;
  }
}

shared/index.ts中增加：

ts 复制代码 
export const isFunction = (fn: unknown) => typeof fn === "function";

还有两个地方需要导出computed；

实现调度器及dirty相关逻辑

修改packages/reactivity/src/computed.ts;

ts 复制代码 
export class ComputedRefImpl<T> {
  public dep?: Dep = undefined;
  private _value!: T;
  private readonly effect: ReactiveEffect<T>;
  public _dirty = true;

  constructor(getter: ComputedGetter<T>) {
    this.effect = new ReactiveEffect(getter, () => {
      console.log("schedule");
      if (!this._dirty) {
        this._dirty = true;
        triggerRefValue(this);
      }
    });
    this.effect.computed = this;
  }
  get value() {
    trackRefValue(this);
    if (this._dirty) {
      this._dirty = false;
      this._value = this.effect.run();
    }
    return this._value;
  }
}

修改effect.ts;

ts 复制代码 
export type EffectScheduler = (...args: any[]) => any;

export function triggerEffects(dep: Dep) {
  // 转化成数组
  const effects = isArray(dep) ? dep : [...dep];

  // 依次触发依赖
  for (const effect of effects) {
    triggerEffect(effect);
  }
}

// 触发指定依赖
export function triggerEffect(effect: ReactiveEffect) {
  // 判读是否有scheduler
  if (effect.scheduler) {
    effect.scheduler();
  } else {
    effect.run();
  }
}

export class ReactiveEffect<T = any> {
  computed?: unknown;
  constructor(
    public fn: () => T,
    public scheduler: EffectScheduler | null = null
  ) {}
}

此时测试实例就具有响应性了；

实现computed的缓存性

computed是有缓存性的，我们通过一个测试实例来看一下：

js 复制代码 
const { reactive, effect, computed } = Vue

const obj = reactive({
  name: '张三'
})

const computedObj = computed(() => {
  console.log('计算属性执行')
  return '姓名：' + obj.name
})

effect(() => {
  document.querySelector('#app').innerText = computedObj.value
  document.querySelector('#app').innerText = computedObj.value
})

setTimeout(() => {
  obj.name = '李四'
}, 2000)

第一次log是computed初始化，第二次是setTimeout触发了Setter；说明vue3的computed是具有缓存性，此时我们可以用刚才实现computed来做对比实验；

triggerEffects方法：

第一遍执行，打印出effects:

第二遍执行，打印出effects:

schedule如果在run之后执行，就会疯狂执行computed中的方法，形成死循环；schedule中做了什么呢？schedule中把_dirty改成了true，并且又一次triggerRefValue；所以就会造成死循环；想到这里大家应该有解决办法了吧；只要改变一下schedule的执行顺序，问题就可以解决啦！

ts 复制代码 
export function triggerEffects(dep: Dep) {
  // 转化成数组
  const effects = isArray(dep) ? dep : [...dep];

  // 依次触发依赖
  // 判断是否有computed
  for (const effect of effects) {
    if (effect.computed) {
      triggerEffect(effect);
    }
  }

  for (const effect of effects) {
    if (!effect.computed) {
      triggerEffect(effect);
    }
  }
}
相关推荐
多多米100544 分钟前
初学Vue（2）
前端·javascript·vue.js
柏箱1 小时前
PHP基本语法总结
开发语言·前端·html·php
新缸中之脑1 小时前
Llama 3.2 安卓手机安装教程
前端·人工智能·算法
hmz8561 小时前
最新网课搜题答案查询小程序源码/题库多接口微信小程序源码+自带流量主
前端·微信小程序·小程序
看到请催我学习1 小时前
内存缓存和硬盘缓存
开发语言·前端·javascript·vue.js·缓存·ecmascript
blaizeer2 小时前
深入理解 CSS 浮动（Float）：详尽指南
前端·css
编程老船长2 小时前
网页设计基础 第一讲：软件分类介绍、工具选择与课程概览
前端
编程老船长2 小时前
网页设计基础 第二讲：安装与配置 VSCode 开发工具，创建第一个 HTML 页面
前端
速盾cdn2 小时前
速盾：网页游戏部署高防服务器有什么优势？
服务器·前端·web安全
小白求学12 小时前
CSS浮动
前端·css·css3
热门推荐
01【经验分享】Ubuntu22.04安装微信(linux官方版)02安卓系列机型永久去除data分区加密 详细步骤解析032024年高教社杯数学建模国赛C题超详细解题思路分析04CTF网络安全大赛简单的web抓包题目：HEADache05组基轨迹建模 GBTM的介绍与实现（Stata 或 R）06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07【极空间NAS】使用WebDAV服务 + DDNSTO内网穿透 实现思源笔记的内外网同步08苍穹外卖面试总结09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10分享几个惊艳的 Three.js 个人站点