Vue3 响应式系统 - 2 - Computed实现思路

undefined_521

已于 2023-05-04 22:44:40 修改

阅读量237

点赞数

CC 4.0 BY-SA版权

分类专栏：前端框架 vue Vue 响应式原理文章标签：前端框架 vue.js 前端 javascript

于 2023-05-04 21:11:32 首次发布

本文链接：https://blog.youkuaiyun.com/undefined_521/article/details/130495320

文章介绍了响应式系统中可调度性的重要性，以及如何通过scheduler控制副作用函数的执行。通过jobQueue实现了连续变更只触发一次的效果。接着讨论了lazy执行和computed函数的实现，以及计算属性的缓存策略，确保数据不变时避免重复计算。最后提到了在非Proxy对象上实现响应式更新的必要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 调度执行

可调度性是响应式系统非常重要的一个特性，所谓可调度性就是当trigger触发时控制副作用函数的执行时机和执行次数的能力。比如连续更改data.a时，如果按照之前写的逻辑就会发现data.a改变了几次，副作用函数就触发了几次，这显然不是我们想要的结果。

data.a++

我们改进一下effect方法，多接收一个option对象，并挂在efectFn上方便拓展一些能力。

const effect = (fn, options = {}) => {
  const effectFn = () => {
    effectFn.deps.forEach(bucket => bucket.delete(effectFn));
    effectFn.deps = []
    effectStack.push(effectFn)

    activeFuction = effectFn
    const res = fn()
    effectStack.pop()
    activeFuction = effectStack[effectStack.length - 1]
    return res
  }
  effectFn.deps = []
  effectFn.options = options
  effectFn()
}

调用efeect方法传入option,option中有一个scheduler函数，然后在trigger方法内判断当前依赖是否有scheduler，有就执行scheduler并把当前依赖传入，否则执行依赖。