Vue3.x watch函数----侦听器

watch函数，是用来定义侦听器的

1.监听ref定义的响应式数据----基本类型

const count = ref ( 10 )

watch ( count , ( newValue, oldValue ) => {

console.log ( newValue,oldValue )

)

总结：侦听普通数据可以获取修改前后的值；被侦听的数据必须是响应式的。

2.监听reactive定义的响应式数据

侦听reactive定义的响应式数据

reactive定义的响应式数据

总结：如果侦听对象，那么侦听器的回调函数的两个参数是一样的结果，表示最新的对象数据，此时，也可以直接读取被侦听的对象，那么得到的值也是最新的。

3.监听多个 ref 定义的响应式数据

通过ref侦听多个响应式数据

总结：可以得到更新前后的值；侦听的结果也是数组，数据顺序一致。

4.监听reactive定义的响应式数据的某一个属性

reactive定义的某一个属性

总结：

如果侦听对象中当个属性，需要使用函数方式，侦听更少的数据有利于提高性能

5.配置选项用法

watch( ( )=>obj.age , (v1,v2)=>{

console.log( 'sutInfo' ) },

{immediate:true, deep:true}

)

总结：1.immediate：true,表示组件渲染时立即调用

          2.deep：true，表示深度监听对象里面的子属性

              （被侦听的内容需要是函数的写法）

---

用reactive定义的响应式数据，如果整个都需要被侦听，那么就直接将这个对象变量当做第一个参数使用；如果是侦听某一个 ，那么就需要用函数的方式当做第一个参数，例如：（）=>obj.age ; ----复杂数据类型

用ref定义的响应式数据，侦听单个数据；侦听多个数据，用数组包裹起来当做第一个参数，新值旧值也都返回数组，并且数组中数值也是一一对应的----简单数据类型

配置选项用法，用于reactive对象包对象的情况。因为此时需要深度侦听，需要通过deep选项。