以Vue.js 2.0源码为基础探索计算属性的奥秘

前端

2024-02-04 23:55:13

在Vue.js 2.0中，计算属性作为一种强大且高效的工具，通过对响应式数据的依赖关系进行缓存，极大地提升了应用程序性能。这篇文章将带你深入Vue.js源码，逐行解析计算属性的初始化过程，为你揭开其神秘面纱。

计算属性：优化性能的利器

在大型单页面应用程序中，数据的频繁变化会给应用程序性能带来严峻挑战。计算属性应运而生，它通过缓存响应式数据的计算结果，避免了重复计算，极大地提升了应用程序响应速度。

initComputed()：计算属性的初始化

Vue.js在做数据初始化时，通过initComputed()方法初始化计算属性。该方法主要执行以下步骤：

初始化变量watchers，用于存储计算属性的观察者。
初始化变量_computedWatchers，用于存储计算属性的依赖关系。
遍历计算属性，为每个属性创建观察者并添加到watchers和_computedWatchers中。
为每个计算属性创建getter和setter函数。
返回计算属性对象。

深入分析initComputed()方法

initComputed (computed) {
  // 定义watchers对象，用于存储计算属性的观察者
  const watchers = this._computedWatchers = new WatcherNode()
  const isSSR = typeof window === 'undefined'

  // 初始化变量_computedWatchers，用于存储计算属性的依赖关系
  const _computedWatchers = {}

  // 遍历计算属性
  for (const key in computed) {
    const userDef = computed[key]
    // 创建观察者并添加到watchers和_computedWatchers中
    const getter = typeof userDef === 'function' ? userDef : userDef.get
    if (getter === undefined) {
      process.env.NODE_ENV !== 'production' && warn(
        `Getter is missing for computed property "${key}".`,
        this
      )
    }

    // 创建getter和setter函数
    watchers.add(key, new Watcher(
      this,
      getter,
      noop,
      { lazy: true },
      isSSR
    ))

    if (process.env.NODE_ENV !== 'production') {
      if (_computedWatchers[key]) {
        warn(
          `Duplicate computed property name in "${this._scopeId}".`,
          this
        )
      }
      _computedWatchers[key] = new Watcher(
        this,
        getter,
        noop,
        { lazy: true },
        isSSR
      )
    }
  }

  return watchers
}