Vue watch属性

vue 中watch 属性的使用
1.普通数据监听
new Vue({
el: “#app”,
data:{
msg: ‘’,
}
watch:{
msg(newVal,oldVal){
console.log(‘newVal–’+ newVal,’—oldVal----’+oldVal);
}
}
})

new Vue({
el: “#app”,
data:{
msgStr:’’
},
methods:{
changeMsg(newVal,oldVal){
console.log(‘newVal—’ + newVal+’----oldVal—’ + oldVal)
}
},
watch:{
msgStr: ‘changeMsg’
}
})

new Vue({
el: ‘#app’,
data: {
obj:{
id: 1,
name: ‘123’
}
}
watch：{
obj:{
handler(newVal,oldVal){
},
deep: true//深度监听
immediate: true//第一次绑定就监听
},
obj.name:{
handler(newVal,oldVal){
},
deep: true
}
}
})

watch中的immediate、handler和deep属性

immediate :watch 第一次绑定的时候不会监听，值发生变化的时候才会触发监听 使用immedidate:true 第一次绑定就会触发监听
deep: 数据时是一个基本的数值的时候 使用watch 监听变化可以 但是是一个复杂的对象或者是一个数组中包含的对象 要使用deep:true 来 深度监听