面试题：Vue 的 watch 和计算属性有什么区别？

在 Vue 中，watch 和计算属性（computed）都用于响应数据变化，但它们的用途和工作方式有所不同。

1. 计算属性 (computed)

• 用途：计算属性用于基于依赖的响应式数据生成新的值，适合处理需要复杂逻辑或依赖多个数据源的场景。
• 缓存机制：计算属性会缓存结果，只有当依赖的数据发生变化时，才会重新计算，否则直接返回缓存值。
• 声明方式：通过 computed 选项定义，通常是一个函数，返回计算后的值。
• 适用场景：适合处理需要复杂计算或依赖多个数据的场景。

computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName;
  }
}

2. 监听器 (watch)

• 用途：watch 用于监听某个数据的变化，并在变化时执行特定的操作，适合处理异步操作或需要在数据变化时执行复杂逻辑的场景。
• 无缓存：watch 不会缓存结果，每次数据变化时都会执行回调函数。
• 声明方式：通过 watch 选项定义，通常是一个对象，键为要监听的数据，值为回调函数。
• 适用场景：适合处理需要在数据变化时执行异步操作或复杂逻辑的场景。

watch: {
  firstName(newVal, oldVal) {
    console.log('firstName changed from', oldVal, 'to', newVal);
  }
}

主要区别

1. 缓存：
   • 计算属性会缓存结果，依赖不变时直接返回缓存值。
   • watch 不会缓存，每次数据变化都会执行回调。
2. 用途：
   • 计算属性适合处理需要复杂计算或依赖多个数据的场景。
   • watch 适合处理需要在数据变化时执行异步操作或复杂逻辑的场景。
3. 返回值：
   • 计算属性必须有返回值。
   • watch 不需要返回值，通常用于执行副作用操作。

总结

• 计算属性：适合处理依赖多个数据且需要缓存的场景。
• watch：适合处理需要在数据变化时执行异步操作或复杂逻辑的场景。