- 以下情况,在父组件中改变reload对象的name属性,子组件中是监听不到reload对象的变化的
<template>
<div>
<about :reload="reload"></about>
<input type="text" v-model="reload.name">
</div>
</template>
<script>
import about from "./About";
export default {
components: { about },
data() {
return {
reload: {name:"malinshu"}
};
}
};
</script>
watch: {
reload() {
console.log("监听对象是否变化");
}
}
- 但是,如果子组件中的监听方式改成这样
reload: {
handler() {
console.log("监听对象是否变化");
},
deep: true,//深度检测reload对象的属性值变化
immediate: true,
}
在改变对象的属性时,可以监听到对象的变化。
一般地,刚进入是不会触发监听事件的,但是加上immediate: true之后,刷新页面就触发了handler