一文解析Vue computed原理及其实现方式，深入学习数据绑定！

一、Vue computed简介

在Vue中，computed属性是一种计算属性，它允许你以声明的方式定义一个属性，该属性的值是基于其他属性的值计算得到的。computed属性是惰性的，这意味着它只会在第一次访问时计算，之后每次访问时都会返回缓存的结果。这使得computed属性非常适合用于计算一些开销较大的值，比如从数组中筛选出满足特定条件的元素。

二、Vue computed实现原理

Vue的computed属性是通过依赖收集和依赖更新来实现的。

1. 依赖收集

当一个computed属性被访问时，Vue会自动收集该computed属性所依赖的所有属性。这些属性可能是data属性、props属性或者其他computed属性。

2. 依赖更新

当一个computed属性所依赖的属性之一发生变化时，Vue会自动触发该computed属性的更新。更新过程包括重新计算computed属性的值并将其缓存起来。

三、Vue computed使用示例

// 定义一个computed属性
const computed = {
  // 计算属性的名称
  fullName: {
    // 计算属性的getter函数
    get() {
      // 返回计算属性的值
      return this.firstName + ' ' + this.lastName;
    },
    // 计算属性的setter函数
    set(newValue) {
      // 将计算属性的值分解成firstName和lastName
      const [firstName, lastName] = newValue.split(' ');

      // 更新firstName和lastName的值
      this.firstName = firstName;
      this.lastName = lastName;
    }
  }
};

四、Vue computed与其他响应式特性的比较

特性	惰性	缓存	使用场景
data	否	是	存储应用程序的数据
props	否	是	接收父组件传递的数据
computed	是	是	计算一些开销较大的值
watch	否	否	监听属性的变化并执行回调函数

五、Vue computed使用注意事项

• computed属性只能用于声明属性，不能用于声明方法。
• computed属性是惰性的，这意味着它只会在第一次访问时计算，之后每次访问时都会返回缓存的结果。
• computed属性不能使用箭头函数定义，因为箭头函数没有自己的this上下文。
• computed属性的setter函数只能用于更新computed属性所依赖的属性，不能用于更新其他属性。