watch的效果默认状态下,只有监听的数据发生变化才会执行回调,如果你需要在一上来的时候就立刻执行一次,需要配置一下immediate
属性
当我们监听的数据是一个对象的时候,默认状态下,对象内部的属性发生变化是不会引起回调函数执行的,如果想让对象下面所有属性都能得到监听,需要开启deep
配置
<template>
{{ state.name }}
{{ state.info.age }}
<button @click="name = 'pink'">change name</button>
<button @click="info.age++">change age</button>
</template>
<script>
import { reactive, toRefs, watch } from 'vue'
export default {
setup() {
const state = reactive({
name: 'cp',
info: {
age: 18
}
})
watch(() => {
return state // 侦听对象
}, () => {
// 数据变化之后的回调函数
console.log('age发生了变化')
}, {
deep: true,// 深度侦听
immediate: true// 立即执行
})
return {
state
}
}
}
</script>