参考

学习Vue3 第十章（认识watch侦听器）_vue3 watch 两个值-CSDN博客

一、定义

监听响应式数据的变化（ref 或 reactive 包裹起来的数据）

二、用法

2.1 基本用法

当修改input内容时，就会触发Watch函数

2.2 监听多个对象

使用数组将要监听的多个对象包裹起来

2.3 对象监听

2.3.1 监听的对象为 ref

需要额外定义deep:true

注意，开启深度监听后，虽然能够监听到新的值，但是旧的值会和新的一样

2.3.2 监听的对象为 reactive

此时无需开启deep：true也可监听对象，因为源码中以及帮我们进行隐性的开启

2.3.3 监听单个属性

若一个对象有多个属性，而我们只想监听其中一个

需要将监听的对象变为一个函数：()=>msg.foo.bar.name

2.4 属性说明

2.4.1 deep

是否开启深度监听，用法参考 2.3.1

2.4.2 imediate

imediate：true,立即执行一次，默认为false

刷新页面，就会开启监听事件，由于初始值为空，所以显示为undefined

2.4.3 flush

有三个值：

pre(默认)：组件更新之前调用

sync: 组件同步执行

post: 组件更新之后调用