关于 watch 的数据种类
1、监听data中数据
2、监听computed中的数据
3、监听props中数据
4、监听vuex中的数据(可以先通过计算属性computed来获取vuex中的数据,然后监听computed)
以下为案例(无vuex数据案例)
data中的属性:watch_obj为对象,watch_string为字符串
props属性:count为字符串
new Vue({
data() {
watch_obj:{ name:'王八', age:18},
watch_string:'Y'
},
props:[conut],
computend(){
getNewName(){ return this.watch_obj.name + '蛋'}
},
**注意** ---在watch中不要使用箭头函数,因为箭头函数中的this是指向当前作用域
watch:{
//1---监听字符串 watch_string
watch_string(newVal,oldVal){console.log('监听成功')},
//2---监听对象 watch_obj
'watch_obj':{
handler: function() {
console.log('监听成功');
}
//深度监听,监听对象所有属性,任何一个属性发生变化,都会执行handler这个方法
deep:true
//是否立即执行,--默认初始化不执行
immediate: true
},
//3---监听对象中的某一个属性 watch_obj.name
'watch_obj.name'(newVal,oldVal){
console.log('监听成功');
}
//4---监听计算属性
getNewName(newVal.oldVal){console.log('监听成功')}
//5---监听props(监听父组件传过来的值)
conut(newVal.oldVal){console.log('监听成功')}
}
})