Vue中的监视属性watch以及深度监视、监视的简写形式
- 当被监视的属性发生变化时，回调函数自动掉用，进行相关操作
- 监视的属性必须存在，才能进行监视 🔭
- 监视的两种写法
– new Vue时传入watch配置
– 通过vm.$watch监视 immediate:true可以在初始化时让handler调用一下
new Vue时传入watch配置
<body>
<div id="root">
姓<input type="text" v-model="firstname"><br/>
名<input type="text" v-model="lastname"><br/>
</div>
<script type="text/javascript">
new Vue({
el:"#root",
data:{
firstname:"Chen",
lastname:"Chuanyang"
},
watch:{
firstname:{
handler(){
console.log('firstname被修改成:'+this.firstname)
}
}
}
})
</script>
</body>
通过vm.$watch监视
<body>
<div id="root">
姓<input type="text" v-model="firstname"><br/>
名<input type="text" v-model="lastname"><br/>
</div>
<script type="text/javascript">
const vm = new Vue({
el:"#root",
data:{
firstname:"Chen",
lastname:"Chuanyang"
}
})
vm.$watch('firstname',{
immediate:true,
handler(){
console.log('firstname修改成：'+this.firstname)
}
})
</script>
</body>
深度监视deep
<script type="text/javascript">
const vm = new Vue({
el: "#root",
data: {
firstname: "Chen",
lastname: "Chuanyang",
numbers: {
a: 88,
b: 99,
},
},
watch: {
numbers: {
deep: true,
handler() {
console.log("numbers改变了");
}
}
}
});
</script>
监视的简写形式
前提要求：只简单监视属性的变动
<body>
<div id="root">
<input type="text" v-model="firstname" />
<input type="text" v-model="lastname" />
</div>
<script type="text/javascript">
const vm = new Vue({
el: "#root",
data: {
firstname: "Chen",
lastname: "Chuanyang"
},
watch: {
lastname(){
console.log('lastname修改了')
}
}
});
</script>
</body>
|