（一）计算属性computed
对于任何复杂逻辑，你都应当使用计算属性。
1. 基本使用
计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要依赖数据没有发生改变，computed将从缓存中获取之前的计算结果，而不必再次执行函数。
例子：
Original message: {{ message }}
Computed reversed message: {{ reversedMessage }}
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
Vue.js 是一款流行的前端框架，用于构建用户界面。在Vue中，有两类特殊的属性用于处理数据的计算和响应式变化：计算属性（computed）和侦听器（watch）。这两个概念是Vue开发中不可或缺的部分，帮助开发者高效地管理复杂的业务逻辑。
### 1. 计算属性（computed）
计算属性主要用来处理任何基于现有数据的复杂逻辑。计算属性是基于其响应式依赖进行缓存的，这意味着只要依赖的数据没有变化，计算属性就不会重新计算，而是从缓存中直接获取结果，节省了不必要的计算资源。
#### 1.1 基本使用
```javascript
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
})
```
在这个例子中，`reversedMessage`是一个计算属性，它根据`message`数据的变化动态地返回反转后的字符串。当`message`改变时，`reversedMessage`会自动更新。
#### 1.2 计算属性的setter
计算属性默认只有getter，但可以通过提供setter来自定义设置值的行为：
```javascript
computed: {
fullName: {
get: function () {
return this.firstName + ' ' + this.lastName
},
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
```
在这里，`fullName`不仅有getter用于获取姓名，还有setter用于更新`firstName`和`lastName`。
### 2. 侦听器（watch）
侦听器主要用于监听Vue实例中数据的变化，并在数据变化时执行指定的回调函数。
#### 2.1 基本使用
```javascript
var vm = new Vue({
data: {
a: 1,
b: 2,
c: 3,
d: 4,
e: { f: { g: 5 } }
},
watch: {
a: function (val, oldVal) { console.log('new: %s, old: %s', val, oldVal) },
b: 'someMethod',
c: {
handler: function (val, oldVal) { /* ... */ },
deep: true // 深度监听
},
d: {
handler: function (val, oldVal) { /* ... */ },
immediate: true // 默认执行一次
},
e: [function handle1(val, oldVal) { /* ... */ }, function handle2(val, oldVal) { /* ... */ }],
'e.f': function (val, oldVal) { /* ... */ }
}
})
```
这里，`watch`对象定义了对多个数据属性的监听。例如，当`a`的值改变时，会打印新旧值；`b`的变化会调用`somemethod`；`c`的深度监听会在对象内部值改变时触发；`d`会立即执行一次回调；`e`数组监听整个`e`对象，而'e.f'则监听`e.f`的值。
#### 2.2 计算属性与侦听器的对比
- **使用场景**：计算属性适合于计算一个新属性并将其挂载到Vue实例上，而侦听器则用于监听已经存在的数据变化，包括计算属性和其他数据。
- **执行时机**：计算属性在依赖变更时自动更新，而侦听器在数据变化后手动执行回调。
- **性能**：计算属性是惰性求值的，仅在依赖变化时更新，而侦听器可以设置频率限制或者执行异步操作。
总结来说，Vue的计算属性和侦听器提供了强大的数据处理和响应式能力。计算属性适用于简单的计算和自动更新，而侦听器则更适合需要更精细控制数据变化后的操作，如处理异步任务或进行复杂逻辑处理。在实际开发中，应根据需求选择合适的工具，以实现高效且灵活的代码。
