computed 在vue3中

在 Vue3 中，`computed` 是一种响应式属性，它允许你基于其他数据计算出新的值。当你需要依赖于多个数据源并返回一个复杂的结果时，可以使用 `computed`。它的工作原理类似于数学中的函数，输入是其他数据的绑定（通常是 props 或者 data），输出则是由这些输入计算得出的值。

Vue会在这些数据改变时自动更新 `computed` 的结果。`computed` 对象可以包含多个属性，每个属性都有一个对应的计算函数。创建 computed 属性的语法如下：

export default {
  data() {
    return {
      // ...
    }
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    },
    // 可以有更多的计算属性...
  }
}

在模板中，可以直接像访问普通属性一样使用 computed 属性，无需担心底层数据变化带来的影响：

<p>Full Name: {{ fullName }}</p>