面试题：Vue 中 computed 和 watch 的区别是什么？

在 Vue 中，computed 和 watch 都用于监听数据变化并执行相应的逻辑，但它们的用途和实现方式有显著的区别。以下是它们的详细对比：

一、`computed` 和 `watch` 的区别

特性	`computed`	`watch`
定义方式	计算属性，基于依赖的缓存	监听器，监听特定数据的变化
缓存机制	有缓存，依赖不变时直接返回缓存值	无缓存，每次变化都会触发回调
使用场景	适合计算依赖于响应式数据的值	适合执行异步操作或复杂逻辑
调用方式	像属性一样访问（无需括号）	像方法一样调用（需要配置回调）
性能优化	高效，适合复杂计算或频繁使用的值	无优化，适合一次性操作
响应式依赖	自动追踪依赖，依赖变化时重新计算	需要手动指定监听的数据

二、详细说明

1. `computed`（计算属性）

定义：computed 是基于响应式依赖的缓存属性。
特点：
- 只有当依赖的响应式数据发生变化时，才会重新计算。
- 适合用于计算依赖于其他数据的值。
- 在模板中像属性一样使用，无需调用括号。
示例：

  <template>
    <div>
      <p>原始值: {{ message }}</p>
      <p>计算属性: {{ reversedMessage }}</p>
    </div>
  </template>

  <script>
  export default {
    data() {
      return {
        message: 'Hello Vue!'
      };
    },
    computed: {
      reversedMessage() {
        return this.message.split('').reverse().join('');
      }
    }
  };
  </script>

2. `watch`（监听器）

定义：watch 用于监听特定数据的变化，并在变化时执行回调函数。
特点：
- 每次监听的数据变化时，都会触发回调函数。
- 适合用于执行异步操作或复杂逻辑。
- 需要手动指定监听的数据。
示例：

  <template>
    <div>
      <p>输入内容: {{ inputText }}</p>
      <input v-model="inputText" />
    </div>
  </template>

  <script>
  export default {
    data() {
      return {
        inputText: ''
      };
    },
    watch: {
      inputText(newVal, oldVal) {
        console.log('输入内容变化:', newVal);
      }
    }
  };
  </script>

三、使用场景对比

1. 适合使用 `computed` 的场景

复杂计算：当需要基于响应式数据进行复杂计算时，使用 computed 可以避免重复计算。
频繁使用：当某个值在模板中多次使用时，使用 computed 可以利用缓存提高性能。
依赖追踪：当需要自动追踪依赖并在依赖变化时更新值时，使用 computed。

2. 适合使用 `watch` 的场景

异步操作：当需要在数据变化时执行异步操作（如请求数据）时，使用 watch。
复杂逻辑：当需要在数据变化时执行复杂逻辑时，使用 watch。
监听特定数据：当需要监听特定数据的变化时，使用 watch。

四、性能对比

computed：由于有缓存机制，适合用于计算频繁使用或依赖复杂的数据，性能更高。
watch：每次监听的数据变化时都会触发回调，适合用于一次性操作或复杂逻辑。

五、总结

特性	`computed`	`watch`
缓存	有缓存	无缓存
调用方式	像属性一样访问	像方法一样调用
使用场景	计算依赖于响应式数据的值	执行异步操作或复杂逻辑
性能	高效，适合复杂计算或频繁使用的值	无优化，适合一次性操作