Vue2.0深度监听
Vue项目中对数据的监听,提供了一个很好的钩子watch,watch可以极其方便的监听我们常用数据类型值的变化,但通常当我们想监听一个对象中,某个属性值的变化时,很难达到我们预期的效果。那么如何实现对象属性的深度监听呢?1、vue中提供了在watch监听时设置deep:true 就可以实现对对象的深度监听。直接监听对象–代码如下:watch:{obj:{ //监听的对象deep:true, //深
·
Vue项目中对数据的监听,提供了一个很好的钩子watch,watch可以极其方便的监听我们常用数据类型值的变化,但通常当我们想监听一个对象中,某个属性值的变化时,很难达到我们预期的效果。那么如何实现对象属性的深度监听呢?
1、vue中提供了在watch监听时设置deep:true 就可以实现对对象的深度监听。
直接监听对象–代码如下:
watch:{
obj:{ //监听的对象
deep:true, //深度监听设置为 true
handler:function(newV,oldV){
console.log('watch中:',newV)
}
}
}
监听对象下某个属性–代码如下:
data () {
return {
obj: {
name:'夜空中最亮的星星',
age:18
}
}
},
watch:{
'obj.name': {
deep:true,
handler:function(newV,oldV){
console.log('watch中:',newV)
}
}
}
2、利用computed配合watch实现单个属性的深度监听。
data() {
return {
obj:{
name:'夜空中最亮的星星',
age:18
}
}
},
computed: {
name() {
return this.obj.name;
}
},
watch: {
name(newV) {
console.log('watch中name为:',newV)
}
}
更多推荐
已为社区贡献3条内容
所有评论(0)