watch函数
作用:监听数一个或者多个数据的变化,数据变化时执行回调函数,两个额外的参数:1、immediate(立即执行)2、deep(深度监听)
监听单个数据:
javascript
<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>
监听多个数据:
javascript
<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:在监听器创建时立即触发回调,响应式数据变化之后继续执行回调
javascript
watch(count,() =>{
console.log('count变化了')
},{
immediate: true
})
deep
通过watch监听的ref对象默认是浅层监听的,直接修改嵌套的对象属性不会触发回调执行,需要开启deep选项
javascript
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发生变化的时候才会发生回调
javascript
const info = ref({
name: 'cp',
age: 18
})
watch(
//监听具体某一属性
() => info.value.age,
() =>console.log('age发生变化了')
)
总结:
1、作为watch函数的第一个参数,ref对象不需要添加.value
2、watch可以监听多个数据,使用数组封装
3、不开启deep,直接修改嵌套属性不会触发回调
4、不开启deep,想在某个层次比较深的属性变化时执行回调:可以把第一个参数写成函数的写法,这次要监听具体的属性