watch 和 computed 的区别 - 2024最新版前端秋招面试短期突击面试题【100道】 🔍
在Vue.js中，computed 和 watch 都是用于响应式编程的重要特性，二者虽然都与数据的变化有关，但适用场景和实现方式有明显的区别。以下是它们的详细对比。
1. Computed 计算属性 🌟
特点
- 计算属性：
computed是基于响应式数据的计算属性，当其依赖的数据发生变化时，计算属性会重新计算并返回最新的值。 - 初始执行：在初始时会执行一次计算。
- 缓存：
computed会读取缓存数据，如果依赖的数据没有变化，则不会重新计算，而是直接返回之前的计算结果。
示例代码
const app = Vue.createApp({data() {return {number: 1};},computed: {double() {return this.number * 2; // 当number变化时，此属性会重新计算}}
});
使用场景
computed 更适合用于基于现有响应式数据的简单计算，如格式化数据、组合数据等。
2. Watch 观察者 🌐
特点
- 数据监控：
watch用于监控某个响应式数据的变化，当被监控的数据发生变化时，watch会执行指定的回调函数。 - 初始化时不执行：在默认情况下，
watch不会在初始化时执行。如果希望在初始时执行，可以使用immediate: true选项。
示例代码
const app = Vue.createApp({data() {return {number: 1};},watch: {number(newValue, oldValue) {console.log(`number changed from ${oldValue} to ${newValue}`);}}
});
使用场景
watch 更适合用于观察数据变化以执行更复杂的逻辑或异步操作，如 API 请求、获取数据等。
总结 📝
区别概述
-
计算属性（computed）：
- 计算出一个基于响应式数据的结果。
- 初始时执行一次。
- 具有缓存特性，依赖的数据未变化时不会重新计算。
-
观察者（watch）：
- 监控某个数据的变化。
- 默认情况下，初始化时不执行（除非设置
immediate）。 - 适合用于执行复杂逻辑或异步操作。
选择使用场景
- 使用
computed：当你需要根据已有数据简单计算出新值时。 - 使用
watch：当你需要对某个数据变化做出响应并执行更复杂的逻辑时。
通过理解这两者之间的区别，你将能够更有效地使用Vue.js中的响应式特性，提高应用的性能和可维护性。在面试中能够清晰地阐述这两者的用法将为你加分！