watch 和 computed 的区别 - 2024最新版前端秋招面试短期突击面试题【100道】

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中的响应式特性，提高应用的性能和可维护性。在面试中能够清晰地阐述这两者的用法将为你加分！