【vue3】入门系列—vue3 watch监听

Watch在vue3中是一个组合API，可以多次调用，它有三个参数：
Params1：被监听的变量，可以是一个数组，存放多个变量。
Params2：回调函数，监听的数据有变化时调用，回调函数中有两个参数，newVal和oldVal。
Params3：是一个对象，存放watch的配置{immediate:true,deep:true}。

1、Watch监听ref变量

Watch监听reactive变量

Vue3bug：
1）watch监听reactive变量时，oldValue值获取不到。
2）强制开启了深度监听，deep配置无效。

新旧值一样。

在vue3中，不管嵌套的层级有多深，只要是用reactive定义的，都可以监听到。但是获取不到正确的oldVal。

监听reactive定义的嵌套多级的对象，不管嵌套层级有多深，都是深度监听

监听reactive定义的响应式对象中的某一属性。使用回调函数的方式。并且可以获取到oldValue值。

监视reactive定义的响应式对象的某些属性。可以成功获取oldVal。

特殊情况：监听salary，要使用deep。拿不到oldValue。

总结：


答疑：
1、为什么监听ref定义的基本数据类型不需要使用.value，监听ref定义的引用类型的数据需要使用.value。
监听ref定义的基本数据类型：监听的是RefImpl对象。
监听ref定义的引用类型数据，监听的是RefImpl对象，但是RefImpl中的value值是Proxy对象，需要深度监听，所以需要使用{deep:true}，或者监听person.value。

WatchEffect

Watch：既要指明监视的属性，又要指明监视的回调。
WatchEffect：不用指明监视的属性，监视的回调中用到了哪个属性，就监视哪个，而且深度监听。
WatchEffect有点像computed：
1）但computed注重的是计算出来的值（回调函数的返回值），所以必须要写返回值。
2）而WatchEffect注重的是过程（即函数体），所以不用写返回值。

watchEffect(() => {
    const x = sum.value
    const y = person.job.work1.gongzi
    console.log('watchEffect变化了')
})

WatchEffect在组件初始化的时候就会调用一次，相当一watch的immediately:true