vue3 computed计算属性用法

在 Vue 3 中，Computed（计算属性）是一种响应式的数据处理方式。它允许你在组件内部创建读取数据的“计算”版本，而这些计算结果会自动更新，当依赖的原始数据改变时。以下是Vue3 Computed的基本用法：

1. 定义计算属性：

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

在这个例子中，`fullName`是一个计算属性，它将 `firstName` 和 `lastName` 的值组合起来。

2. 访问计算属性：
在模板中，可以直接像访问普通属性一样使用计算属性：

<p>{{ fullName }}</p>

3. 使用依赖：
当你在计算属性内部引用了其他变量时，Vue会跟踪这些依赖。例如：

computed: {
  ageInMonths() {
    return this.birthDate ? (new Date().getTime() - new Date(this.birthDate).getTime()) / (1000 * 60 * 60 * 24) : null;
  },
},

这里，`ageInMonths`计算属性依赖于`birthDate`数据，当`birthDate`改变时，`ageInMonths`会被更新。