vue3 computed 完整用法

Vue3中的Computed属性是一种响应式计算属性，它允许你在数据发生变化时自动更新视图。Computed的主要用途是将一些复杂或昂贵的计算封装起来，避免在模板中直接书写大量计算逻辑。以下是Computed的完整用法：

1. **创建Computed属性**：

// 在组件的data()或setup()中定义
export default {
  data() {
    return {
      count: 0,
      // 使用`get`和`set`声明Computed属性，这里的getter函数会作为响应式的计算结果
      expensiveCalculation: this.getExpensiveValue(),
    };
  },
  computed: {
    getExpensiveValue() {
      // 这里编写复杂的计算逻辑，如网络请求、数学运算等
      // 当count变化时，该计算会被重新执行
      return someLongRunningFunction(this.count);
    }
  }
}

2. **访问Computed属性**：
在模板中直接像属性一样引用它，不需要额外的this关键字：

<p>Expensive calculation result: {{ expensiveCalculation }}</p>

当`count`发生变化时，`getExpensiveValue`会被重新计算并同步到视图。

3. **设置只读Computed**：
如果你想确保Computed属性不会被外部直接修改，可以声明为`get-only`：

computed: {
  readonly expensiveCalculation: this.getExpensiveValue
}