学习vue3系列watch 原创

watch 函数用来侦听特定的数据源，并在回调函数中执行副作用。默认情况是懒执行的，也就是说仅在侦听的源变更时才执行回调。

<template> <button @click="change">count is: {{ state.count }}</button> </template> <script> import { reactive, watch } from 'vue' export default { setup () { let state = reactive({count: 0}) let change = () => state.count++; watch(state, () => { console.log(state, '改变') }) return { state, change } } } </script> 

注意上面的代码，第一个参数传入的 state 对象，第二个参数是回调函数，只要 state 中任意的属性发生改变都会执行回调函数。

现在是监听整个对象，当然我们也可以监听对象上的某个属性，注意下面代码的写法：第一个是回调函数，第二个参数也是回调函数。

<template> <button @click="change">count is: {{ state.count }}</button> </template> <script> import { reactive, watch } from 'vue' export default { setup () { let state = reactive({count: 0}) let change = () => state.count++; watch(() => state.count, (oldVlaue, newValue) => { console.log(oldVlaue, newValue, '改变') }) return { state, change } } } </script> 

其实与 watch 类似的 API 还有一个就是：watchEffect，立即执行传入的一个函数，并响应式追踪其依赖，并在其依赖变更时重新运行该函数。

<template> <button @click="change">count is: {{ state.count }}</button> </template> <script> import { reactive, watchEffect } from 'vue' export default { setup () { let state = reactive({count: 0}) let change = () => state.count++; watchEffect(() => { console.log(state.count, '改变') }) return { state, change } } } </script> 

注意它与watch的区别：

1、watch 是需要传入侦听的数据源，而 watchEffect 是自动收集数据源作为依赖。

2、watch 可以访问侦听状态变化前后的值，而 watchEffect 没有。

3、watch 是属性改变的时候执行，而 watchEffect 是默认会执行一次，然后属性改变也会执行。