【面试题系列Vue01】Vue 中 computed 和 watch 的区别？分别适⽤于什么场景？

开始刷八股文了，人还是不能一直安逸，哪怕现在的环境是一个比较舒服的。但也要居安思危！！
想着还是要记录一下，这样既是督促自己也是鼓励自己。后面也会陆续更新之前面百度、字节、阿里的面试题~（一轮游也是值得记录的！）

分割线
以下是正文部分

---

官方解析

Vue中的computed 和 watch 是两种用于响应式数据更新的方法。

computed 是计算属性，它会根据响应式数据的变化自动计算出新的值，并缓存结果，只有在计算属性所依赖的响应式数据发生改变时才会重新计算。computed适用于需要根据响应式数据计算得出结果的场景，例如根据商品的数量和单价计算商品的总价，或者根据选中的过滤条件过滤出数据列表。

watch是侦听器，它可以监听指定的响应式数据的变化，并在数据发生改变时执行指定的回调函数。watch适用于需要执行一些异步或复杂操作的场景，例如监听表单输入框的变化并发送Ajax请求，或者监听路由变化并根据路由参数切换页面。

总的来说，computed适用于计算数据的场景，而watch适用于需要执行异步或复杂操作的场景。

具体来说

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>

finalValue 的回调函数中有两个依赖的值分别为firstName和lastName，当这两个值发⽣变化
时，就会触发回调函数的执⾏，当每次执⾏完后，会将结果缓存起来，如果下次再去使⽤这个
finalValue 但是所依赖的值没有发⽣变化，它会直接返回缓存的值。直到它所依赖的值发⽣改变
时，才回去重新执⾏回调函数。需要注意的时computed必须要有返回值。

watch侦听器：
用来监听⼀个值的变化，当这个值发⽣变化时去执⾏⼀个对应的逻辑。

<template>
	 姓：<input v-model="firstName" />
	 名：<input v-model="lastName" />
	<p> 您的姓名为：{{ fullName }} </>
</template>
<script setup>
 import { ref, watch } from 'vue'
 const firstName = ref('')
 const lastName = ref('')
 const fullName = ref('')
 // 侦听器：
 watch([firstName, lastName], ([newFirstName, newSecondName],
	[oldFirstName, oldSecondName])=>{
	 fullName.value = newFirstName + newSecondName;
 })
</script>

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

一个总结

● 当需要进行数值计算,并且依赖于其它数据时，应该使用 computed，因为可以利用
computed 的缓存特性，避免每次获取值时都要重新计算。

● 当需要在数据变化时执行异步或开销较的操作时，应该使用 watch，使用 watch 选项允许执⾏异步操作 ( 访问⼀个 API )，限制执⾏该操作的频率，并在得到最终结果前，设置中间状态。这些都是计算属性⽆法做到的。