学习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 中任意的属性发生改变都会执行回调函数，和 vue2 的区别是不要写 deep 属性，默认就是深度监听了。

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

<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 是默认会执行一次，然后属性改变也会执行。