当前位置：首页 > VUE

vue computed 实现

2026-01-12 11:10:55VUE

Vue computed 实现原理

Vue 的 computed 属性是基于响应式依赖进行缓存的计算属性，其核心实现依赖于 Vue 的响应式系统和 Watcher 机制。

基本用法

在 Vue 组件中定义 computed 属性：

new Vue({
  data: {
    firstName: '张',
    lastName: '三'
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName
    }
  }
})

实现机制

computed 属性通过 Object.defineProperty 被定义到组件实例上，每个 computed 属性都会创建一个对应的 Watcher 实例。

初始化阶段会为 computed 属性创建 getter 函数，这个 getter 会在首次访问 computed 属性时执行，并将结果缓存起来。

依赖收集

当 computed 属性的 getter 函数执行时，会访问响应式数据，触发这些数据的 getter，从而完成依赖收集。

computed 属性会记住它所依赖的所有响应式属性，只有当这些依赖发生变化时，才会重新计算。

缓存机制

computed 属性具有缓存特性，只有在其依赖的响应式属性发生变化时才会重新计算，否则直接返回缓存的值。

这种机制避免了不必要的计算，提高了性能。

与 methods 的区别

computed 属性是基于它们的响应式依赖进行缓存的，而 methods 方法每次调用都会执行函数。

computed 适合用在需要基于现有数据计算新值的场景，methods 适合用在需要执行操作的场景。

计算属性的 setter

computed 属性也可以定义 setter 函数：

computed: {
  fullName: {
    get() {
      return this.firstName + ' ' + this.lastName
    },
    set(newValue) {
      const names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[1] || ''
    }
  }
}