watch函数用于侦听某个值的变化，当该值发生改变后，触发对应的处理逻辑。
一、watch的基本实例
{{ count }}import {ref,reactive, watch} from 'vue'const count = ref(0)function changCount(){count.value++}watch(count,(newValue,oldValue)=>{if(newValue){console.log(`我侦听到了count状态的变化，当前值为${newValue},从而处理相关逻辑`);}})二、watch监听多个数据
getter 函数：
{{ x }}import { ref, reactive, watch } from "vue";const x = ref(1);const y = ref(5);function changCount() {x.value++;}watch(() => x.value + y.value,(sum) => {console.log(`我是x与y之和${sum}`);});多个来源组成的数组
{{ x }}import { ref, reactive, watch } from "vue";const x = ref(1);const y = ref(5);function changCount() {x.value++;}watch([x,y],([x,y]) => {console.log(`我是x=>${x},我是y=》${y}`);});三、watch监听对象的值
{{ obj.name }}import { ref, reactive, watch } from "vue";const obj = ref({name:'你好'})function changObj(){obj.value.name+='我不好'}watch(()=>obj.value.name,(name)=>{console.log(name);})四、watch监听器的配置参数
1.deep
用于开启深度监听
{{ obj.name }}import { ref, reactive, watch, watchEffect } from "vue";const obj = ref({name:'你好'})function changObj(){obj.value.name+='我不好'}// obj是一个RefImpl对象，当不开启深度监听的时候，监听obj无法检测到obj属性的变化watch(obj,()=>{console.log(obj.value.name);}, { deep: true })2.immediate
是否开启初始化检测，默认是值发生变化时，才会执行监听器里面的方法，开启immediate后初始化就执行一次。
{{ obj.name }}import { ref, reactive, watch, watchEffect } from "vue";const obj = ref({name:'你好'})function changObj(){obj.value.name+='我不好'}// obj是一个RefImpl对象，当不开启深度监听的时候，监听obj无法检测到obj属性的变化watch(obj,()=>{console.log(obj.value.name);}, { deep: true,immediate:true })五、通过watchEffect()简化watch
侦听器的回调使用与源完全相同的响应式状态是很常见的。例如：
{{ obj.name }}import { ref, reactive, watch, watchEffect } from "vue";const obj = ref({name:'你好'})function changObj(){obj.value.name+='我不好'}watch(obj.value,()=>{console.log(obj.value.name);})我们可以使用watchEffect 函数来简化上面的代码。watchEffect()允许我们自动跟踪回调的响应式依赖。上面的侦听器可以重写为：
{{ obj.name }}import { ref, reactive, watch, watchEffect } from "vue";const obj = ref({name:'你好'})function changObj(){obj.value.name+='我不好'}// watch(obj.value,()=>{// console.log(obj.value.name);// })watchEffect(()=>{console.log(obj.value.name);})注：需要注意的是watchEffect 回调会立即执行，不需要指定immediate
六、watchvs.watchEffect
watch和watchEffect都能响应式地执行有副作用的回调。它们之间的主要区别是追踪响应式依赖的方式：
watch只追踪明确侦听的数据源。它不会追踪任何在回调中访问到的东西。另外，仅在数据源确实改变时才会触发回调。watch会避免在发生副作用时追踪依赖，因此，我们能更加精确地控制回调函数的触发时机。watchEffect，则会在副作用发生期间追踪依赖。它会在同步执行过程中，自动追踪所有能访问到的响应式属性。这更方便，而且代码往往更简洁，但有时其响应性依赖关系会不那么明确。
七、回调触发机制与停止监听器
如果想在侦听器回调中能访问被 Vue 更新之后的 DOM，你需要指明flush: 'post'选项：
watch(source, callback, {flush: 'post'})watchEffect(callback, {flush: 'post'})停止监听
在setup()或中用同步语句创建的侦听器，会自动绑定到宿主组件实例上，并且会在宿主组件卸载时自动停止。因此，在大多数情况下，你无需关心怎么停止一个侦听器。
一个关键点是，侦听器必须用同步语句创建：如果用异步回调创建一个侦听器，那么它不会绑定到当前组件上，你必须手动停止它，以防内存泄漏。如下方这个例子：
// ...当该侦听器不再需要时unwatch()