vue computed 实现

Vue computed 实现原理

Vue 的 computed 属性是基于响应式依赖进行缓存的，当依赖的响应式数据发生变化时，computed 属性会重新计算，否则直接返回缓存值。

基本用法

在 Vue 组件中定义 computed 属性：

export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName
    }
  }
}

计算属性 vs 方法

计算属性会缓存结果，只有依赖的响应式数据变化时才会重新计算。方法每次调用都会执行函数体：

methods: {
  getFullName() {
    return this.firstName + ' ' + this.lastName
  }
}

计算属性的 setter

计算属性默认只有 getter，也可以提供 setter：

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

实现原理分析

Vue 内部通过 Object.defineProperty 或 Proxy 实现计算属性：

1. 初始化阶段收集计算属性的依赖
2. 建立计算属性和依赖数据的关联
3. 依赖变化时触发计算属性重新计算
4. 计算结果缓存，避免重复计算

注意事项

计算属性应只包含同步操作，异步操作应使用 watch 或 methods 避免在计算属性中产生副作用（如修改其他数据） 计算属性依赖的数据必须是响应式的