监听属性
在Vue中可以使用watch属性来监听属性变化
语法
watch: {
要监视的属性(newValue, OldValue) {
/在这里可以添加响应属性变化的逻辑
}
},
- 在 Vue 组件中定义一个属性,在这个案例中我们定义了
count
属性。
<div id="root">
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
</div>
<script>
new Vue({
el:"#root",
data(){
return{
count:0
}
},
methods:{
increment() {
this.count++
}
},
watch:{
count(newValue,OldValue){
console.log(`从${OldValue}变化为${newValue}`)
}
}
})
</script>
在上述案例中,创建了一个简单的计数器组件。每次点击 “Increment” 按钮时,count
值都会递增。在 watch
选项中,监听 count
属性的变化,并在控制台打印出新旧值的信息。在回调函数中添加处理属性变化的逻辑。
深度监听
要在 watch 中进行深度监听,可以使用 { deep: true } 作为选项。这将使 Vue 在检测到嵌套属性、对象或数组内部值发生变化时触发回调函数。
语法
watch: {
要监听的对象或数组:{
handler(newValue, OldValue) {
/在这里可以添加响应属性变化的逻辑
}
}
},
<div id="root">
<p>Person: {{ person.name }}</p>
<p>Age: {{ person.age }}</p>
<button @click="changeName">Change Name</button>
</div>
<script>
new Vue({
el:"#root",
data() {
return {
person: {
name: 'John',
age: 30
}
};
},
watch: {
person: {
deep: true,
handler(newValue, oldValue) {
console.log('Person changed:', newValue.name);
}
}
},
methods: {
changeName() {
this.person.name = 'Jane';
}
}
});
</script>
在上述示例中,拥有一个包含 person 对象的组件,并添加了对其的深度监听。当 person 对象内部的任何属性发生变化时,Vue 将调用回调函数,并打印出新的 person 值。