Vue 的计算属性使用

Vue 的计算属性（Computed Properties）是一种基于依赖数据动态计算值的特性，适用于处理模板中的复杂逻辑，提高代码可读性和性能。以下是关键点总结：

1. 基本用法

在 computed 选项中定义函数，函数返回派生值：

computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName;
  }
}

模板中直接使用 {{ fullName }}，当 firstName 或 lastName 变化时自动更新。

---

2. 计算属性 vs 方法

• 计算属性：有缓存，依赖变化时重新计算，适合同步派生数据。
• 方法：无缓存，每次渲染都执行，适合需频繁更新或无依赖的场景。

---

3. Getter 和 Setter

支持通过 get/set 实现双向绑定：

computed: {
  fullName: {
    get() {
      return this.firstName + ' ' + this.lastName;
    },
    set(newValue) {
      const names = newValue.split(' ');
      this.firstName = names[0];
      this.lastName = names[1] || '';
    }
  }
}

---

4. 依赖响应性

• 仅当依赖项是响应式（如 data 或 props 中的属性）时，计算属性才会更新。
• 避免依赖非响应式数据（如动态添加的属性）。

---

5. 注意事项

• 避免副作用：Getter 中不要修改依赖数据，防止无限循环。
• 同步计算：不支持异步操作，需改用 watch 或 methods。
• 缓存优势：依赖不变时直接返回缓存值，优化性能。

---

6. 常见场景

• 组合/格式化数据（如拼接姓名、过滤列表）。
• 减少模板复杂度，提升可维护性。
• 需要缓存的复杂计算（如大数据排序）。

---

7. Vue3 组合式 API

在 Vue3 中使用 computed 函数：

import { computed, ref } from 'vue';

const count = ref(0);
const double = computed(() => count.value * 2);

---

总结：计算属性是处理响应式数据派生逻辑的高效工具，合理使用可提升应用性能及代码可读性。避免在计算属性中执行异步或副作用操作，确保依赖项的响应式。