Vue.js 是一个流行的前端框架,它的核心特性之一就是响应式数据绑定。在 Vue 应用中,`watch` 和 `computed` 是两个重要的概念,它们分别用于数据变化的监听和计算属性的管理。
### 01. 监听器 `watch`
**(1)作用**
`watch` 用于监控 Vue 实例中的数据属性,当这些属性发生变化时,它会执行预定义的回调函数。这使得开发者可以在数据变化时执行相应的逻辑,比如数据同步、异步请求或者复杂的业务处理。
**(2)属性和方法**
- `handler`: 这是回调函数,当被监听的属性变化时执行。
- `immediate`: 如果设置为 `true`,组件创建后立即触发一次回调。
- `deep`: 如果设置为 `true`,将深度监听对象或数组的所有嵌套属性。
**(3)监听对象**
监听整个对象时,`handler` 函数会接收到新旧对象的完整副本。然而,它不会监听对象内新增或删除的属性,只有在直接修改已存在的属性时才会触发。
**(4)监听数组**
默认情况下,Vue 只能监听数组的 `push`, `pop`, `shift`, `unshift`, `splice`, `sort`, `reverse` 方法,如果需要监听数组内元素的变动,需要开启 `deep` 属性。
### 02. 计算属性 `computed`
**(1)计算属性的 `set` 方法**
计算属性默认只有 getter,但可以通过定义 `set` 方法来实现设置功能。当在模板中尝试更改计算属性时,Vue 将调用 `set` 方法并将新的值作为参数传递。
```javascript
export default {
data() {
return {
number: 1
}
},
computed: {
computedNumber: {
get() {
return this.number * 2
},
set(value) {
this.number = value / 2
}
}
}
}
```
在上面的例子中,当尝试改变 `computedNumber` 时,Vue 会调用 `set` 方法,将新的值除以 2 并赋给 `number`。
**(2)区别**
- `watch` 是主动监听数据变化并执行回调,而 `computed` 是被动的,仅在依赖的数据变化时重新计算结果。
- `computed` 的结果会被缓存,只有依赖变化时才更新,而 `watch` 每次数据变化都会触发。
**(3)使用场景**
- 当需要基于现有数据生成衍生数据时,使用 `computed`,如计算总和、过滤列表等。
- 当需要在数据变化时执行复杂逻辑或副作用操作时,如发送请求、更新 DOM,使用 `watch`。
通过理解 `watch` 和 `computed` 的差异和用法,开发者可以更有效地组织和优化 Vue 应用中的数据处理逻辑。在实际开发中,合理运用它们可以帮助提高代码的可读性和性能。