【前端面经】Vue-Vue中computed和watch区别?

在 Vue 中，computed 和 watch 都是当数据发生变化时去执行对应的逻辑代码。虽然这两者都可以监听数据变化并执行对应的操作，但它们有着不同的使用场景。

Computed

computed 是计算属性，顾名思义就是如果页面中某个地方需要计算某个值其实可以用 computed。当需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时都要重新计算。这就意味着，当计算属性所依赖的数据没有发生变化时，计算属性函数不会重新执行。

例如，下面的代码展示了如何使用 computed 进行数值计算。

<template>
  <input v-model="firstNum" /> + <input v-model="secondNum" /> = {{ finalValue }}
</template>
<script setup>
import { ref, computed } from 'vue'

const firstNum = ref(0)
const secondNum = ref(1)

// 计算属性:
const finalValue = computed(() => {
  return firstNum + secondNum;
})
</script>

需要注意的是，computed 必须要有返回值。

Watch

watch 称为侦听器，就是说它会监听一个值的变化，当这个值发生变化时去执行一个对应的逻辑。当需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许执行异步操作（访问一个 API），限制执行该操作的频率，并在得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

例如，下面的代码展示了如何使用 watch 监听一个数组的变化。

<template>
  <ul>
    <li v-for="(item, index) in list" :key="index">{{ item }}</li>
  </ul>
  <input v-model="inputValue" />
  <button @click="addItem">添加</button>
</template>
<script setup>
import { ref, watch } from 'vue'

const list = ref(['apple', 'banana', 'orange'])
const inputValue = ref('')

watch(list, (newList, oldList) => {
  console.log(`list changed from ${oldList} to ${newList}`)
})

function addItem() {
  if (inputValue.value) {
    list.value.push(inputValue.value)
    inputValue.value = ''
  }
}
</script>

需要注意的是，watch 是不支持缓存的，只要有数据变化时，就会触发响应的操作，并且 watch 支持异步监听。监听的回调函数接收两个参数，第一个参数是最新的值，第二个参数是变化前的值。如果需要在组件加载时就触发回调函数可以使用 immediate 属性来设置；如果需要对对象进行深层的监听，可以使用 deep 属性开启深度监听。

总结

通过本文的介绍，我们可以了解到 computed 和 watch 两者的使用场景和区别。当需要进行数值计算，并且依赖于其它数据时，应该使用 computed。而当需要在数据变化时执行异步或开销较大的操作时，应该使用 watch。这样可以让我们更加有效地使用 Vue 中的这两个特性。

希望本篇文章对您理解 Vue 中的 computed 和 watch 有所帮助。同时，我们也希望您能够在实际开发中灵活运用，提高开发效率。