import { ref, reactive, watch } from 'vue'
watch(data, (newVal, oldVal) => {}, {immediate: true, deep: true})
一、监听普通类型
const name = ref('握奇')
const age = ref(21)
// 监听单个普通类型
watch(name, (newVal, oldVal) => {
console.log(newVal)
})
// 监听多个普通类型，返回数组
watch([name, age], (newVal, oldVal) => {
console.log(newVal)
})
二、监听整个对象
const person = reactive({
name: '握奇',
infos: {
age: 21,
address: '上海'
}
})
// 监听对象person时，vue3将强制开启deep深度监听
watch(person, (newVal, oldVal) => {
console.log(newVal)
})
watch(() => person, (newVal, oldVal) => {
console.log(newVal)
}, { deep: true })
两种实现方式效果相同，只要对象中有任何变化就会触发watch方法
三、监听对象中的属性
const person = reactive({
name: '握奇',
infos: {
age: 21,
address: '上海'
}
})
// 只有当person对象中的name属性发生变化才会触发watch方法
watch(() => person.name, (newVal, oldVal) => {
console.log(newVal)
})
// 注意：监听对象的属性为复杂数据类型时，需要开启deep深度监听
watch(() => person.infos, (newVal, oldVal) => {
console.log(newVal)
}, { deep: true })
注意：第一个参数是一个箭头函数
watch 的第三个参数：
- deep: 深度监听
- immediate: 作用就是设置是否立即执行监控，当值设置为 true 时，那么被监控的对象在初始化时就会触发一次 watch 方法。
