面试题：Vue中watch与computed在监听响应式数据上的区别

触发时机

computed：具有缓存性，只有当它依赖的响应式数据发生变化时才会重新计算。如果依赖的数据没有变化，多次访问 computed 属性会直接返回缓存的结果，不会再次执行计算函数。
watch：当监听的响应式数据变化时，就会触发回调函数。无论新值与旧值是否相同，只要数据发生变化就会执行监听回调。

应用场景

computed：适用于数据的计算依赖于其他响应式数据，且计算结果是“缓存性”的场景。比如购物车总价的计算，依赖于商品数量和单价，只要数量或单价不变，总价计算结果就不会重新计算。
watch：适用于需要在数据变化时执行副作用操作的场景，例如数据变化时进行异步操作（如数据保存到服务器）、手动操作DOM等。

代码示例

<template>
  <div>
    <input v-model="num1">
    <input v-model="num2">
    <p>计算属性结果: {{ sum }}</p>
    <p>监听结果: {{ watchResult }}</p>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue';

const num1 = ref(0);
const num2 = ref(0);

const sum = computed(() => {
  return num1.value + num2.value;
});

const watchResult = ref('');
watch([num1, num2], (newValues, oldValues) => {
  watchResult.value = `num1从${oldValues[0]}变为${newValues[0]}, num2从${oldValues[1]}变为${newValues[1]}`;
});
</script>

在上述代码中，computed 用于计算 num1 和 num2 的和，只有 num1 或 num2 变化时才重新计算。watch 用于监听 num1 和 num2 的变化，每次变化都会更新 watchResult 并打印新旧值变化情况。

星途面试题库

面试题：Vue中watch与computed在监听响应式数据上的区别

知识考点

面试题答案

触发时机

应用场景

代码示例