简述Vue computed 和 watch 的区别和运用的场景 ？
参考回答
computed 和 watch 都是 Vue 中用于监听数据变化的工具，但它们在功能、使用场景和工作原理上有所不同。
computed：computed是基于依赖的缓存，只有在相关数据变化时，计算属性才会重新计算，避免了不必要的性能消耗。computed主要用于处理依赖于多个数据源的计算逻辑，并且它返回一个值，可以在模板中像普通数据一样使用。
watch：watch用于观察 Vue 实例中的数据变化，并在数据变化时执行异步或开销较大的操作（如请求数据、操作 DOM）。watch更适合用于副作用操作（side effects），如数据变化时执行复杂操作或调用方法。
详细讲解与拓展
1. computed：
- 基于缓存：
computed计算属性会基于它们的依赖进行缓存，只有当依赖的响应式数据发生变化时，计算属性才会重新计算。这使得computed属性非常高效。 -
使用场景：
- 适合用于计算基于其他数据的派生状态（例如，格式化数据、过滤数组等），尤其是计算密集型的操作。
- 适合在模板中直接使用，或者作为数据绑定的一部分。
示例：
<template>
<div>
<p>Full name: {{ fullName }}</p>
</div>
</template>
<script>
export default {
data() {
return {
firstName: 'John',
lastName: 'Doe'
}
},
computed: {
fullName() {
return `{this.firstName}{this.lastName}`;
}
}
}
</script>
- 这里，
fullName计算属性依赖firstName和lastName，只有在这两个属性改变时，fullName才会重新计算。
2. watch：
- 观察数据变化：
watch适用于观察和响应某个数据源的变化，并执行相关的操作。watch通常用于处理副作用（如异步操作、手动操作 DOM、或复杂的业务逻辑）。 -
使用场景：
- 适合用于需要执行副作用的场景，比如发起异步请求，处理复杂的逻辑，或是响应某些特定的属性变化。
watch更适合处理不可缓存的副作用，或处理需要立即执行的操作。
示例：
<template>
<div>
<input v-model="query" />
<p>{{ result }}</p>
</div>
</template>
<script>
export default {
data() {
return {
query: '',
result: ''
}
},
watch: {
query(newQuery) {
// 监听 query 的变化并执行异步请求
this.fetchData(newQuery);
}
},
methods: {
fetchData(query) {
// 假设这里发起一个 API 请求
this.result = `Results for: ${query}`;
}
}
}
</script>
- 在这个例子中，
watch用于观察query的变化，并触发fetchData方法，发起一个新的 API 请求。
computed 和 watch 的区别
| 特性 | computed |
watch |
|---|---|---|
| 触发时机 | 当计算属性的依赖发生变化时重新计算。 | 当观察的目标数据发生变化时执行回调函数。 |
| 缓存 | 具有缓存机制，只有依赖的数据发生变化时才会重新计算。 | 无缓存，数据变化时每次都会执行回调。 |
| 返回值 | 返回一个计算后的值，可以直接在模板中使用。 | 通常用于执行副作用操作，回调函数没有返回值。 |
| 适用场景 | 适合计算基于其他数据的派生状态。 | 适合处理副作用操作（如异步请求、DOM 操作）。 |
总结：
computed：适合用来处理数据的派生计算，尤其是计算过程较为复杂，且需要缓存计算结果的场景。watch：适合监听特定数据的变化并执行异步或副作用操作，尤其是在需要立即响应数据变化时。
选择 computed 还是 watch 取决于任务的需求：如果是计算属性或处理派生数据，使用 computed；如果是需要执行副作用操作，使用 watch。