watch函数
作用：监听数一个或者多个数据的变化，数据变化时执行回调函数，两个额外的参数：1、immediate（立即执行）2、deep（深度监听）
监听单个数据：
<script setup>
import { ref,watch} from 'vue'
const count = ref(0)
const setCount = () => {
count.value++
}
watch(count,(newVal,oldVal) => {
console.log('count变化了',newVal,oldVal)
})
</script>
<template>
<div>
<button @click="setCount">{{ count }}</button>
</div>
</template>监听多个数据：
<script setup>
import { ref,watch} from 'vue'
const count = ref(0)
const changeCount = () => {
count.value++
}
const name = ref('con')
const changeName = () => {
name.value = 'pc'
}
watch(
[count,name],
(
[newCount,newName],
[oldCount,oldName]
) => {
console.log('有值发生变化了',[newCount,newName],
[oldCount,oldName]
)
}
)
</script>immediate：在监听器创建时立即触发回调，响应式数据变化之后继续执行回调
watch(count,() =>{
console.log('count变化了')
},{
immediate: true
})deep
通过watch监听的ref对象默认是浅层监听的，直接修改嵌套的对象属性不会触发回调执行，需要开启deep选项
const state = ref({ count:0 })
watch(state,() => console.log('数据变化了'))
const changeStateByCount = () => {
//直接1修改属性 -> 不会触发回调
state.value.count++
}
//深度监听
watch(state,() => {
console.log('count变化了')
},{
deep: true
})deep开启之后，对象中的任意一个属性发生了变化以后都会触发回调
精确监听对象的某个属性：
在不开启deep的前提下，监听age的变化，只有age发生变化的时候才会发生回调
const info = ref({
name: 'cp',
age: 18
})
watch(
//监听具体某一属性
() => info.value.age,
() =>console.log('age发生变化了')
)总结：
1、作为watch函数的第一个参数，ref对象不需要添加.value
2、watch可以监听多个数据，使用数组封装
3、不开启deep，直接修改嵌套属性不会触发回调
4、不开启deep，想在某个层次比较深的属性变化时执行回调：可以把第一个参数写成函数的写法，这次要监听具体的属性
