一、监听方法
vue3中定义的变量默认不是响应式的，所以只能监听用ref和reactive定义的数据和变量。
监听前要确保引入相关依赖ref、reactive、watch：
<script setup lang="ts"> import { ref,watch,reactive } from 'vue'; </script>
1、监听单个值的变化：
通过ref定义一个变量testText，并将这个值和文本框绑定，对这个值进行监听：
<script setup lang="ts"> import { ref,watch,reactive } from 'vue'; let testText = ref<string>("testText")； watch(testText,(newValue,OldValue) => { console.log(newValue); console.log(OldValue); }); </script> <template> <input type="text" v-model="testText" /> </template>
2、监听多个值的变化：
通过ref定义两个变量testText、testContent，并将这两个值和文本框绑定，对这两个值进行监听：
<script setup lang="ts"> import { ref,watch,reactive } from 'vue'; let testText = ref<string>("testText"); let testContent = ref<string>("testContent"); watch([testText,testContent],(newValue,OldValue) => { console.log(newValue); console.log(OldValue); }); </script> <template> <input type="text" v-model="testText" /> <input type="text" v-model="testContent" /> </template>
多个监听值的时候，输出的监听结果新值和旧值也是多个：
3、监听表单变化：
通过reactive创建一个表单testText ，并将其内部的属性title与文本框绑定，对表单整体进行监听：
<script setup lang="ts"> import { ref,watch,reactive } from 'vue'; let testText = reactive({ title:"标题" }); watch(testText,(newValue,OldValue) => { console.log(newValue); console.log(OldValue); }); </script> <template> <input type="text" v-model="testText.title" /> </template>
得到的结果如下：
注：从这里可以看出，当表单的内部属性发生变化后，监听表单整体时是拿不到修改前的值。
而且监听表单整体时默认watch自动开启了deep属性，即深度监听。
4、监听表单下的属性值：
通过reactive创建一个表单testText ，并将其内部的属性title与文本框绑定，对表单内部的title属性进行单独监听：
<script setup lang="ts"> import { ref,watch,reactive } from 'vue'; let testText = reactive({ title:"标题" }); watch(() => testText.title,(newValue,OldValue) => { console.log(newValue); console.log(OldValue); }); </script> <template> <input type="text" v-model="testText.title" /> </template>
得到的结果如下：
这次新值和旧值都打出来了，单独监听的话是可以取到旧值的。
注：监听内部的时候需要使用 () => 来指向，如果是独立的单个定义值的话，也可以通过这个前缀加属性名称加.value来监听。
5、监听多层嵌套表单下的表单：
通过reactive创建一个表单testText ，并将其内部的表单form里的title属性值与文本框绑定，对表单内部的form表单整体进行监听：
<script setup lang="ts"> import { ref,watch,reactive } from 'vue'; let testText = reactive({ form:{ title:"标题" } }); watch(() => testText.form,(newValue,OldValue) => { console.log(newValue); console.log(OldValue); },{ deep:true }); </script> <template> <input type="text" v-model="testText.form.title" /> </template>
这里就要在监听时候加上deep属性并配置为true，通过深度监听才能监听到内部表单的变化，而且因为是监听的表单，同样无法拿到旧值。
二、监听属性
1、是否立即执行（immediate）：
这是个布尔类型值，true和false代表是否开启该属性。默认为false即关闭，而开启和关闭的区别在于，监听是否要在初始化的时候触发。
例如，定义一个字符串值的时候，默认为”初始值”，然后将其修改为”修改值”，此时会产生差异：
true：会先在初始化为“初始值”时触发一次监听，再在值调整为“修改值”时触发第二次监听。
false：初始化为“初始值”时不触发，在值调整为“修改值”时触发第一次监听。
2、是否深度监听（deep）：
主要用于监听多层嵌套的表单内部表单，默认为false关闭，需要监听时属性可以设置为true。
三、无指向监听
watch的监听需要三个参数，分别是监听的数据内容、监听回调函数方法、监听配置属性。
而watchEffect不同，它不需要指定监听的数据内容，会根据回调函数方法里用到的数据，自动去监听这些内容，且immediate和deep两个属性都默认为开启状态。
<script setup lang="ts"> import { ref,watch,reactive, watchEffect } from 'vue'; let testText = reactive({ form:{ title:"watchEffect" } }); watchEffect(() => { console.log(testText.form.title); }); </script> <template> <input type="text" v-model="testText.form.title" /> </template>
得到的结果如下：
