watch和watchEffect用法

watch的用法：

const count=ref(1)

1.watch(count,()=>{change()},options)

2.watch(()=>count.value,()=>{change()},options)

3.watch([count,...],()=>{change()},options)

4.watch([()=>count.value,()=>{count2.value}],()=>{change()},options)

 当count发生变化的时候就会执行change函数，大家肯定遇到诸多弊端关于使用这个watch的时候1.比如没有一种情况是我需要当初始的时候就需要执行这个change函数呢，第一种可以使在options中配置{immediate:true}的时候就可以达到这个效果，你就会在第一次赋值或者初始化的时候执行一下change()，非常的方便
2.大家有没有遇到监测那种对象数组的时候呢，就是一个数组里装的全是对象，这个时候就会导致watch失效，然而大家可以通过配置{deep:true}；来达到深度监听的效果，然而大家还有一种方法就是可以通过()=>[...arr.value]这种就是把旧数组展开然后每次生成一个新的数组嘛，这样子也可以达到深度监听不用通过配置deep选项了
3.第三个配置选项也就是{flush:''},这个选项用于指定回调函数的触发时机（刷新时机）。它可以取以下值

1. pre'：在 DOM 更新之前同步执行回调函数。

2. 'post'：在 DOM 更新之后异步执行回调函数（默认选项）。

3. 'sync'：在 DOM 更新期间同步执行回调函数

watchEffect函数用法:

watchEffect(()=>{

example=count.value

})
这个函数呢它会根据你输入的回调函数自动的去确定依赖项，然后并且能够达到深度监听以及像初始化执行的这种效果，这就非常的方便了，然而自动去确定依赖项也就会遇到麻烦了，当我们不再调用其中具有依赖项的语句的时候就会立即失去跟踪该依赖项，这个大家可能不好理解，我举个例子吧

watchEffect(()=>{

if(boolean){

example=count.value

}

...后续操作，不涉及依赖跟踪

})

当我们使用上述语法的时候如果说有一次boolean为false的时候就会导致这个watchEffect跟踪的依赖项丢失，后边就不会再继续跟踪count.value,这也就导致这个watchEffect函数失效了。有个很好的例子大家可以研究下，我放在下方了。（果然不愧是副作用函数！！！）watchEffect doesn't trigger when it should · vuejs/core · Discussion #9773 · GitHub