持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第9天，点击查看活动详情

前言

在上一篇的文章中，我们一起学习了compositionAPI中的watch和watchEffect的使用（上），本篇文章中我们继续学习compositionAPI中的watch和watchEffect的使用（下）。

watch中的immediate

上一章节中我们一起学习了compositionAPI中的watch侦听器的使用方法，知道了它具备一定的惰性，也就是页面加载时不会立即执行的侦听器，当然watch侦听器也可以去设置是否惰性执行的方法。

watch([() => nameObj.name, () => nameObj.job], ([curNameVal, curJobVal], [preNameVal, preJobVal]) => {
   console.log(curNameVal, preNameVal + '-----' + curJobVal, preJobVal)
}, { immediate: true })

在watch侦听器中还有第三个参数：immediate，将它设置为true之后，就会在页面加载完成之后立即执行watch侦听器方法。

除了watch侦听器之外，compositionAPI还提供了另外一个侦听器：watchEffect

watchEffect

watchEffect侦听器和watch侦听器类似，都是用来侦听某个数据值发生改变的。

但是watchEffect侦听器默认就是immediate类型的，也就是刷新页面之后就会立即触发侦听器方法。

watchEffect(() => {
    console.log('abc')
})

watchEffect侦听器的代码就比watch侦听器的代码要简洁得多。
而且watchEffect侦听器里面只接收一个回调函数。

通过刷新页面可以看出，浏览器控制台会在页面加载完成之后理解执行watchEffect侦听器函数。
当我们改变input标签中的值时，控制台是没有任何变化的。

❓ 只有一个回调函数的话如何监听我们需要的数据值呢 ❓

watchEffect(() => {
    console.log(nameObj.name)
})

我们把输出的内容改成我们之前定义的数据值，即可完成该数据值的侦听了。

watchEffect侦听器会自动检测回调函数中的代码，当它检测到内部的值有依赖的话，就会去侦听值的改变了。
如果检测到里面的数据并没有对其他数据的依赖，那么watchEffect侦听器就不会做任何侦听行为。

因为目前watchEffect侦听器函数中只有对nameObj.name的依赖，所以当我们改变nameObj.job的值时，是不会有任何反应的。

watchEffect(() => {
    console.log(nameObj.name)
    console.log(nameObj.job)
})

此时我们把job的依赖关系也加到watchEffect侦听器函数中去。

当我们把name和job都放到watchEffect侦听器函数中之后，两者的依赖关系都有了，在页面上改变数据值的时候，控制台都会输出改变之后的值。
但是watchEffect侦听器只会输出最新的值，并不会和watch侦听器一样输出原始值。

watch和watchEffect对比

通过两个章节的内容，我们会发现这两个侦听器还是有许多不同点的。

watchEffect侦听器是页面加载完之后立即执行的，而watch侦听器是有一定的惰性，如果需要立即执行，需要加上第三个参数：immediate
watchEffect侦听器不需要传递你侦听的内容，会自动感知代码依赖；而watch侦听器会让你传递需要侦听的参数，包括但不限于基础类型、函数、数组等。
watchEffect侦听器是不能获取到原始数据的值；而watch侦听器是可以获取到每一次改变的值和改变之前的值。

停止侦听

假如有个场景，我们需要侦听某个值的变化，而一段时间之后我们就不需要去侦听该值了，那应该怎么办呢？

const stop = watchEffect(() => {
    console.log(nameObj.name)
    console.log(nameObj.job)
    setTimeout(() => {
        stop()
    }, 2000)
})

我们可以给侦听器定义一个stop来接收这个侦听器函数。
在侦听器函数中写一个定时器，两秒之后执行stop函数即可。

在浏览器控制台中就会发现，当我们在两秒钟之内改变数据值时，控制台还会打印出数据，但是两秒钟之后再去改变数据值时，控制台是没有任何反应的。

总结

结合上一篇文章，主要和大家一起学习了watch侦听器和watchEffect侦听器的用法和区别，大家在实战过程中需要结合实际情况去使用这两个侦听器。

比如当我们使用Ajax请求的时候，可能用不到之前的值，这时候就可以使用watchEffect侦听器了。

其实watch侦听器和watchEffect侦听器还有更多需要深入了解的地方，这里就不和大家深入展开了，在后面的章节中如果有需要深入了解的地方，会和大家一起深入学习的。这样也不会耽误大家的学习成本和时间。

【Vue3从零开始-第六章】6-7 compositionAPI中的watch和watchEffect的使用（下）

前言

watch中的immediate

watchEffect

watch和watchEffect对比

停止侦听

总结