位置：文档库 > JavaScript > Vue.js中的computed工作原理

Vue.js中的computed工作原理

博览群书上传于 2021-04-28 04:38

《Vue.js中的computed工作原理》

在Vue.js框架中，computed（计算属性）是开发者高频使用的核心特性之一。它通过声明式的方式将依赖数据动态转换为派生状态，既避免了模板中冗余的逻辑代码，又通过缓存机制显著提升了性能。本文将从底层实现、响应式依赖追踪、缓存策略三个维度深入解析computed的工作原理，并结合源码与实际案例探讨其设计哲学。

一、computed的基础概念与使用场景

计算属性本质上是基于依赖响应式数据的派生值。与methods不同，computed会缓存计算结果，只有当依赖数据发生变化时才会重新计算。这种特性使其特别适合处理以下场景：

模板中需要频繁使用的复杂表达式
需要基于多个响应式数据派生的状态
需要保持数据同步但又不希望手动触发更新的场景

典型的使用示例如下：

// Vue组件定义
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName() {
      console.log('计算fullName') // 仅在依赖变化时触发
      return this.firstName + ' ' + this.lastName
    }
  }
}

在模板中直接使用{{ fullName }}时，Vue会自动处理依赖追踪和缓存更新。这种声明式编程模式显著提升了代码的可维护性。

二、computed的响应式依赖追踪机制

computed的核心能力在于自动追踪依赖关系。这一过程通过Vue的响应式系统实现，主要涉及三个关键角色：

Dep类：负责管理依赖收集和通知更新
Watcher类：作为观察者监听数据变化
getter劫持：在计算属性执行时收集依赖

1. 依赖收集过程

当组件初始化时，computed属性会被转换为Watcher实例。在执行计算函数时，Vue会通过Object.defineProperty或Proxy劫持getter操作，将当前Watcher实例推入依赖队列：

// 简化版依赖收集逻辑
function defineReactive(obj, key, val) {
  const dep = new Dep()
  
  Object.defineProperty(obj, key, {
    get() {
      if (Dep.target) { // 当前活动的Watcher
        dep.addSub(Dep.target) // 收集依赖
      }
      return val
    },
    set(newVal) {
      val = newVal
      dep.notify() // 触发更新
    }
  })
}

2. Watcher与Dep的协作

每个computed属性对应一个ComputedWatcher实例，其工作流程如下：

初始化时执行getter函数，触发依赖收集
将自身注册到依赖的Dep实例中
当依赖数据变化时，Dep通知所有关联的Watcher
Watcher标记为dirty，下次访问时重新计算

// ComputedWatcher简化实现
class ComputedWatcher {
  constructor(getter) {
    this.getter = getter
    this.dirty = true // 标记是否需要重新计算
    this.value = undefined
  }

  evaluate() {
    Dep.target = this // 设置当前Watcher
    this.value = this.getter() // 执行计算触发依赖收集
    Dep.target = null
    this.dirty = false
    return this.value
  }

  depend() {
    // 递归收集嵌套依赖
    let value = this.getter()
    if (value && typeof value === 'object') {
      traverse(value)
    }
  }
}

三、computed的缓存策略与性能优化

computed的缓存机制是其性能优势的核心。与methods每次调用都执行不同，computed通过dirty标记实现按需更新：

首次访问：执行getter函数并缓存结果
后续访问：直接返回缓存值，除非标记为dirty
依赖变化：触发重新计算并更新缓存

1. 缓存失效条件

缓存失效发生在以下情况：

计算属性依赖的响应式数据被修改
手动调用Vue.set修改嵌套对象属性
组件实例被销毁后重新创建

2. 异步计算属性的处理

标准computed不支持异步操作，但可通过以下方式实现类似功能：

// 使用watch模拟异步computed
export default {
  data() {
    return { asyncValue: null }
  },
  watch: {
    depValue: {
      handler(newVal) {
        fetchData(newVal).then(res => {
          this.asyncValue = res
        })
      },
      immediate: true
    }
  }
}

Vue 3的Composition API中通过computed函数提供了更优雅的异步处理方案。

四、源码级实现解析（Vue 2.x）

Vue 2.x中computed的实现主要集中在src/core/instance/state.js文件。初始化过程分为三个阶段：

1. 初始化阶段

function initComputed(vm, computed) {
  const watchers = vm._computedWatchers = Object.create(null)
  
  for (const key in computed) {
    const userDef = computed[key]
    const getter = typeof userDef === 'function' ? userDef : userDef.get
    
    // 创建ComputedWatcher
    watchers[key] = new Watcher(
      vm,
      getter || noop,
      noop,
      { lazy: true } // 标记为延迟计算
    )
    
    // 定义计算属性
    if (!(key in vm)) {
      defineComputed(vm, key, userDef)
    }
  }
}

2. 属性定义阶段

function defineComputed(target, key, userDef) {
  const shouldCache = !isServerRendering()
  
  Object.defineProperty(target, key, {
    enumerable: true,
    configurable: true,
    get: function() {
      const watcher = this._computedWatchers[key]
      if (watcher.dirty) { // 检查是否需要重新计算
        watcher.evaluate()
      }
      if (Dep.target) {
        watcher.depend() // 收集嵌套依赖
      }
      return watcher.value
    },
    set: userDef.set || noop
  })
}

3. 更新阶段

当依赖数据变化时，Dep会通知所有关联的Watcher：

// Dep类核心方法
class Dep {
  constructor() {
    this.subs = []
  }

  addSub(sub) {
    this.subs.push(sub)
  }

  notify() {
    for (let i = 0, l = this.subs.length; i

五、Vue 3中的computed实现改进

Vue 3使用Proxy重构响应式系统，computed的实现也更加简洁高效。主要变化包括：

基于Effect的自动依赖追踪
更精细的缓存控制
支持TypeScript类型推断

1. Composition API中的computed

import { ref, computed } from 'vue'

const count = ref(0)
const double = computed(() => count.value * 2)

// 异步computed示例
const asyncComputed = computed(() => {
  return new Promise(resolve => {
    setTimeout(() => resolve(count.value * 3), 1000)
  })
})

2. 底层实现差异

Vue 3通过@vue/reactivity包中的computed函数实现：

export function computed(getterOrOptions) {
  let getter
  let setter

  if (isFunction(getterOrOptions)) {
    getter = getterOrOptions
    setter = () => {
      console.warn('Write operation failed: computed value is readonly')
    }
  } else {
    getter = getterOrOptions.get
    setter = getterOrOptions.set
  }

  let dirty = true
  let value
  let runner

  const effect = new ReactiveEffect(getter, () => {
    dirty = true
    trigger(computed, 'set' /* trigger op */)
  })

  const obj = {
    get value() {
      if (dirty) {
        value = effect.run()
        dirty = false
      }
      track(computed, 'get' /* track op */)
      return value
    },
    set value(newValue) {
      setter(newValue)
    }
  }

  return obj
}