Vue 计算属性

在 **Vue.js** 中，**计算属性（Computed Properties）** 是一种非常强大的功能，用于处理基于响应式数据的复杂逻辑。它们会根据依赖的数据自动重新计算，并且具有缓存机制，只有当依赖的数据发生变化时才会重新计算。

---

## 一、什么是计算属性？

计算属性是 Vue 实例中定义的函数，用来返回一个值。这个值是基于其他数据（响应式数据）计算出来的。

---

## 二、计算属性的特点

1. **缓存性**：计算属性只会在其依赖的数据发生改变时才重新计算。
2. **响应性**：如果依赖的数据变化了，计算属性会自动更新。
3. **可读性高**：适合将复杂的逻辑封装成属性，提升代码可维护性。

---

## 三、使用方式

### 1. 在 `computed` 属性中定义

```javascript
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  }
};
```

### 2. 在模板中使用

```vue
<template>
  <div>全名：{{ fullName }}</div>
</template>
```

---

## 四、计算属性 vs 方法（methods）

| 特性 | 计算属性（computed） | 方法（methods） |
|------|-----------------------|------------------|
| 缓存 | ✅ 有缓存             | ❌ 每次调用都执行 |
| 响应性 | ✅ 自动响应数据变化 | ❌ 需要手动触发 |
| 适用场景 | 复杂逻辑、重复使用 | 简单逻辑、事件处理 |

---

## 五、带参数的计算属性

计算属性不能直接接收参数，但可以通过 **getter/setter** 或者结合 `methods` 使用：

```javascript
computed: {
  fullNameWithPrefix(prefix) {
    return function() {
      return prefix + this.firstName + ' ' + this.lastName;
    };
  }
}
```

或者使用方法：

```javascript
methods: {
  getFullNameWithPrefix(prefix) {
    return prefix + this.firstName + ' ' + this.lastName;
  }
}
```

---

## 六、计算属性的 setter（可选）

你可以为计算属性定义一个 `setter`，用于监听属性的变化并进行操作：

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

然后在模板中赋值：

```vue
<template>
  <input v-model="fullName" />
</template>
```

---

## 七、总结

- 计算属性适用于需要根据数据动态生成值的场景。
- 它具有缓存机制，提高了性能。
- 适合封装复杂的逻辑，提升代码可读性和可维护性。

如果你有任何关于计算属性的具体问题（比如嵌套计算属性、与 watch 的区别等），欢迎继续提问！