和计算属性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。
