和计算属性computed一样，在组合API中侦听器也是一个函数，在使用时需要先导入

import { watch } from 'vue'

1.侦听简单数据类型的值

1）最基础的使用

我们来声明一个counter计数，然后在onMounted中把它加一，使用watch来侦听它的改变，
watch第一个参数接受你要侦听的数据，第二个参数是数据变化后的回调函数

watch(counter, () => {
  console.log('counter变化了' )
})

这样就可以对counter进行监听了

完整的代码：

<template>
  <div>{{ counter }}</div>
</template>

<script>
import { ref, watch, onMounted } from 'vue'
export default {
  name: 'App',
  setup() {
    const counter = ref(0)
    watch(counter, () => {            // 新增
      console.log('counter变化了')
    })
    onMounted(() => {
      counter.value++
    })
    return {
      counter,
    }
  },
}
</script>

在浏览器中打开，控制台输出了

counter变化了

2）获取改变前后的值

这个跟我们之前学的一样，在watch的回调函数中，有两个参数
第一个表示改变以后的值
第二个表示改变以前的值

watch(counter, (newVal, oldVal) => {
  console.log('counter变化了，现在的值是:' + newVal, '原来的值是:' + oldVal)
})

改好代码以后我们在浏览器控制台中查看，输出了

counter变化了，现在的值是:1 原来的值是:0

3）immediate选项

watch函数还接受第三个参数，就是选项对象，其中有immediate选项，也跟之前学习的一样，把immediate设置为true后，开始就会执行一遍回调函数

    watch(
      counter,
      (newVal, oldVal) => {
        console.log(
          'counter变化了，现在的值是:' + newVal,
          '原来的值是:' + oldVal
        )
      },
      {
        immediate: true,   // 新增
      }
    )

控制台输出

counter变化了，现在的值是:0 原来的值是:undefined
counter变化了，现在的值是:1 原来的值是:0

后面的内容有些和官网不同，是我自己试验出来的用法

2.侦听数组类型的变化

1）只要侦听变化，不需要得到变化前的值

简单来说这样和侦听简单类型一样，我们来举个例子
先声明一个数组

const list = reactive(['苏格拉底', '柏拉图', '亚里士多德'])

在onMounted时，给数组增加一项

onMounted(() => {
  list.push('亚历山大')
})

侦听和简单类型一样

    watch(list, () => {
      console.log('列表变化了')
    })

这时候控制台就会打印

列表变化了

2）需要知道数组变化前后的值

这时候第一个参数的写法要变一下，要写成一个函数，返回这个数据的一个副本

    watch(
      () => [...list],
      (newVal, oldValue) => {
        console.log('列表变化了')
        console.log(newVal)
        console.log(oldValue)
      }
    )

我们看到第一个参数的函数返回的是一个新对象，是list的一个副本
这样就可以获取改变之前的值了
控制台输出

这种方式是官网写的方式。

3.侦听对象的变化

1）不用获取变化之前的值，也是和简单类型是一样的

现在我们来写一个person对象

    const person = reactive({
      name: '林哥',
      age: 18,
      job: {
        name: '前端工程师',
        salary: '3k',
      },
    })

然后我们在onMounted的时候把salary改为4k

    onMounted(() => {
      person.job.salary = '4k'
    })

最后添加侦听

    watch(person, () => {
      console.log('person变化了')
    })

控制台输出

person变化了

2）需要知道变化前后的值

这时候，watch的第一个参数需要返回深度克隆的要监听的数据，
在顶部导入lodash库，使用它的cloneDeep方法

import { cloneDeep } from 'lodash'

同时还要把watch的deep选项设置为true

    watch(
      () => cloneDeep(person),  // 新增
      (newVal, oldValue) => {
        console.log('person变化了')
        console.log(newVal)
        console.log(oldValue)
      },
      {
        deep: true,  // 新增
      }
    )

这样就可以得到变化之前的值了

这个写法是官网的写法

3）直接侦听对象里面的简单数据类型

这个例子中，只有salary这个字段变化了，我们可以直接侦听这一个简单类型的字段，
这样深度克隆和deep选项都不用了

    watch(
      () => person.job.salary,
      (newVal, oldValue) => {
        console.log('salary变化了')
        console.log(newVal)
        console.log(oldValue)
      }
    )

控制台输出

salary变化了
4k
3k

关于watch内容看上去挺多，其实好多都是之前学习过的，比如deep、immediate等，
新内容主要在于监听复杂类型时，watch函数第一个参数的写法，大家一定要自己动手写一写，看看到底什么情况下会触发watch。