参考
学习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: 组件更新之后调用