Vue.js深入理解：Watch与Computed的运用解析

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 应用中的数据处理逻辑。在实际开发中，合理运用它们可以帮助提高代码的可读性和性能。