1.当被监视的属性发生变化时,回调函数自动调用,进行相关操作
2.监视的属性必须存在才能被监视,如果是不存在的不会报错,输出undefined,watch可以监听vue中的任意data里的数据、方法、计算属性等
3.immediate属性默认值为false,当改为true时页面在初始化就会调用一次handler
4.watch默认不监测对象内部值的变化,需配置deep:true 才可以需要深度监视对象内部值
5.监视的两种写法:
a.new Vue时传入watch配置
b.通过vm.$watch监视
6.在没有配置immediate和deep属性的情况下有简写形式
现在举例子说明,监视msg,在发生变化后,输出新值和旧值:
一、第一种写法:
<body>
<div id="app">
{{msg}}
<button @click="change" type="button">点击切换</button>
</div>
<script type="text/javascript">
new Vue({
data:{
msg:"欢迎来到Vue页面"
},
methods:{
change(){
this.msg = "改变了"
}
},
watch:{
msg:{
handler(newvalue,oldvalue){
console.log(newvalue,oldvalue)
}
}
}
}).$mount("#app")
</script>
</body>
二、第二种写法:
<body>
<div id="app">
{{msg}}<!-- 插值表达式写法 -->
<button @click="change" type="button">点击切换</button>
</div>
<script type="text/javascript">
const vm=new Vue({
data:{
msg:"欢迎来到Vue页面"
},
methods:{
change(){
this.msg = "改变了"
}
}
}).$mount("#app")
vm.$watch('msg',{
handler(newvalue,oldvalue){
console.log(newvalue,oldvalue)
}
})
</script>
</body>
运行的界面以及点击后的输出:
三、配置immediate属性:
watch:{
msg:{
immediate:true,
handler(newvalue,oldvalue){
console.log(newvalue,oldvalue)
}
}
}
输出如下:
四、配置deep属性:
如下代码,点击按钮将msg对象里的list数组里的值改变:
未配饰deep属性:
<body>
<div id="app">
{{msg}}<br>
<button @click="change" type="button">点击切换</button>
</div>
<script type="text/javascript">
new Vue({
data:{
msg:{
id:"001",
type:"女装",
list:[
{
id:"001001",
type:"连衣裙"
},
{
id:"001002",
type:"羽绒服"
},
,
{
id:"001003",
type:"毛衣"
}
]
}
//存放数据
},
methods:{
change(){
this.msg.list[0].type = "卫衣"
}
},
watch:{
msg:{
handler(newvalue,oldvalue){
console.log(newvalue,oldvalue)
}
}
}
}).$mount("#app")
</script>
</body>
当点击按钮后msg值已发生变化,但是控制台未输出新值旧值,说明未监听到数据变化
在配置deep属性后:
watch:{
msg:{
deep:true,
handler(newvalue,oldvalue){
console.log(newvalue,oldvalue)
}
}
}
控制台有输出新值和旧值,监听到了数据变化
五、在没有配置immediate和deep属性的情况下可以进行简写:
watch:{
msg(newvalue,oldvalue){
console.log(newvalue,oldvalue)
}
}
vm.$watch('msg',function(newvalue,oldvalue){
console.log(newvalue,oldvalue)
})