vue的watch和watchEffect详解

一、前言
在options api中我们采用watch来监听data中的数据或者props中的参数变化。在componsiton api中我们采用watchEffect和watch来进行监听数据变化，并且watchEffect是自动收集依赖，watch则需要我们自己指定需要监听的数据。接下来我们将详细讲解一下composition api中的watchEffect和watch两个api。
二、watchEffect的使用

watchEffect刚开始就会立即执行，并且会自动收集依赖，当其中的依赖项发生改变，都会执行回调函数。
watchEffect的停止监听
我们想一个例子，我们监听info对象中的age属性，当改变age到25时，则取消监听。

watchEffect选项中返回的函数是停止监听函数。
watchEffect清除副作用

在watchEffect函数中需要传入一个回调函数，回调函数存在一个形参，该形参的调用可以传入一个回调函数可以清除副作用。
在setup中使用ref

如上面代码所示，我们首先先对ref传入内容为空，然后使用watchEffect来对变量进行监听。但是存在一个问题，就是watchEffect打印两次，因为首先当执行setup函数时，此时DOM并没有挂载，当执行完setup之后，dom挂载完毕，此时hEl的值更换，再次执行watchEffect的回调。
如果我们不想要执行第一个打印null，此时我们可以设置第二个参数，第二个参数是一个对象，设置{ flush:"post" }，这样可以调整watchEffect的执行时机为DOM挂载之后，pre表示挂载之前，也就是默认值，sync这将强制效果始终同步触发。然而，这是低效的，应该很少需要。

此时只打印一个结果。
三、watch
componsition api中的watch和options api中的watch一样，都是用来监听某一个属性发生变化，执行相关的回调。
watchEffect和watch进行对比，watch是懒执行的(也就是说第一次不执行)。执行时会将newValue和oldValue传入函数。
watch的简单使用

watch监听对象类型

监听ref对象

监听reactive对象

数组对象

函数

四、watch选项
deep:是否深层监测
immediate：是否立即执行。
我们监听普通对象，在使用deep:true时不能使用reactive对象，因为在源码内部如果判断是reactive对象时，默认会将deep设置为true。

设置immediate:true就是当页面刚渲染时，就立即执行。此时oldValue为undefined。