开始刷八股文了，人还是不能一直安逸，哪怕现在的环境是一个比较舒服的。但也要居安思危！！
想着还是要记录一下，这样既是督促自己也是鼓励自己。后面也会陆续更新之前面百度、字节、阿里的面试题~（一轮游也是值得记录的！）
分割线
以下是正文部分
官方解析
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 )，限制执⾏该操作的频率，并在得到最终结果前，设置中间状态。这些都是计算属性⽆法做到的。