开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第11天，点击查看活动详情

上一篇文章讲到了computed，它适合于通过值的变化来计算，也就是说他是一个值与值对应的一个方法，如果你需要在值的变化时运行函数，那么computed就不是很适用了，这时候就需要用到watch系列API

什么是watch

watch的意思就是看，在vue中我们叫它监听器，它的作用就是在被监听的对象变化时，执行一段函数。

watch的基本用法如下

const a = ref('')
const stop = wathc(a,()=>{
    //do sth
})

以一个比较隐蔽的知识点，watch的函数会返回一个stop函数，执行就会终止监听。那么，我们正好利用这个知识点来体验一下composition api的魅力。

// useWatch.js
export const useWatch = (val,cb) => {
    const stop = watch(val,cb)
    onBeforeUnmount(()=>{
        stop()
    })
}

我们在这个函数中，直接引入vue的生命周期onBeforeUnmount指的是在组件卸载之前,我们停止这个监听，虽然大部分时候并不会导致内存泄露，但是有备无患嘛。

其实watch还有第三个参数，里面有2个比较重要的参数，deep和immediate,这两个参数一个代表深度监听，一个代表立即执行。

所谓深度监听主要指的是监听引用类型时，会遍历里面的属性，任何一个属性变化都会监听 所谓立即执行主要指的是声明这个watch的时候，先支持一次回调，也就是说回调第一次执行的时候其实值并没有改变

什么是watchEffect

watchEffect是vue3新引入的一个api，从字面意思上讲是观察一个作用，其实就是观察一个函数，它适用于了同时观察很多值的情况。

比如我们现在有2个数，需要同时监听，那么很多人第一个想法就是watch(()=>a+b,()=>{}),这样做当然可以，但是如果有100个变量呢，这样就太繁琐了，于是有了watchEffect.

watchEffect只有一个参数，就是执行的函数，你只需要在那个函数里，访问你需要监听的变量，无论有多少，它们都会被加上依赖。

比如上面那个监听2个变量的，可以写成

watchEffect(()=>console.log(a,b))

同时watchEffect还有两个小兄弟，watchPostEffect ,watchSyncEffect.主要是执行的时机不同，一般watchPostEffect用到比较多，它的意思时在组件渲染完成之后再开始执行