vue3 computed 语法糖

Vue.js 3中的`computed`属性是其核心特性之一，它提供了数据绑定和计算依赖的简洁方式。`computed`允许你在组件中定义读取器（getter）和写入器（setter），这些方法会在数据变化时自动更新，而无需手动触发。它的语法糖体现在以下几个方面：

1. **简化的依赖表达式**：
使用计算属性表达式，如 `this.total = this.items.length * this.price`，当`items`或`price`发生变化时，`total`会自动更新。

2. **响应式**：
计算属性本身是响应式的，这意味着当你在模板中使用它们时，如果计算结果改变，视图会实时更新。

3. **缓存**：
计算属性会缓存中间结果，避免不必要的重新计算。除非依赖项改变，否则不会再次执行。

4. **读取-写入模式**：
你可以为计算属性设置一个读取器和一个可选的写入器，像这样：`get total() { ... }, set total(newTotal) { ... }`。写入器会在接收到新的值时被调用。

5. **访问实例数据**：
计算属性可以直接访问实例的其他属性和方法，例如 `this.name` 或 `this.calculateSomething()`。

// 示例
export default {
  data() {
    return {
      items: [1, 2, 3],
      price: 10,
    };
  },
  computed: {
    total() {
      // 返回计算结果，如总价
      return this.items.reduce((sum, item) => sum + item * this.price, 0);
    },
  },
};