vue3计算属性

在 Vue 3 中，计算属性是一种基于其他属性值动态计算出的属性，其计算结果会被缓存，只有当依赖的属性发生变化时，相关计算才会重新执行。这使得计算属性非常适合处理复杂逻辑或是重复使用的逻辑，而无需在模板中编写过多的代码。

定义计算属性

在 Vue 3 组件中，计算属性是在 computed 选项中定义的。下面是一个简单的例子：

<template>
  <div>
    <p>Original message: {{ message }}</p>
    <p>Reversed message: {{ reversedMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue 3'
    }
  },
  computed: {
    // 计算属性
    reversedMessage() {
      // 计算属性的值是基于 `message` 的
      return this.message.split('').reverse().join('');
    }
  }
}
</script>

计算属性的特点

1. 缓存：计算属性会基于其依赖的数据进行缓存，只有当依赖的数据发生变化时才会重新计算。这意味着，如果 message 没有变化，多次访问 reversedMessage 不会触发新的计算。

2. 声明式：计算属性的使用是声明式的，你只需要定义它们之间的关系，Vue 会负责管理和更新。

3. 可读：计算属性一般用于读取数据，但它们也可以是可写的（即可以设置 getter 和 setter）。

可写计算属性

如果你需要计算属性既可以读取又可以写入，你可以使用 getter 和 setter。如下例所示：

<template>
  <div>
    <p>Full name: {{ fullName }}</p>
    <input v-model="fullName" placeholder="Enter full name">
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName: {
      // getter
      get() {
        return `${this.firstName} ${this.lastName}`;
      },
      // setter
      set(newValue) {
        const names = newValue.split(' ');
        this.firstName = names[0];
        this.lastName = names[names.length - 1];
      }
    }
  }
}
</script>

在这个例子中，fullName 是一个可写的计算属性。当 fullName 被修改时，setter 会被调用，并更新 firstName 和 lastName。

计算属性 vs 方法

• 计算属性：适用于基于其他数据计算数据的场景，有缓存机制，适合复杂计算。
• 方法：用于执行操作或返回计算结果，但每次调用都会执行函数，没有缓存。

选择使用计算属性还是方法，主要取决于你是否需要缓存结果。对于需要频繁访问且计算开销较大的数据，计算属性是更好的选择。