vue之监听对象的改变
一、对象监听
1. 深度监听
change
name:'test',
data () {return{
user: { id:1, name: '李四', age: 14, sex: '男'}
}
},
watch: {
user: {
handler:function(val) {
console.log(val)
},
deep:true}
},
methods: {
changeAge () {this.user.age = 15}
}
}
通过watch中的deep属性,监听对象的所有属性,当属性值改变的时候,watch将会被打印,但是这样消耗会很大
当然,也可以只监听对象的依噶属性
watch: {'user.age'() {
console.log(1111)
}
}
2..$set(obj,ket,value)
Vue 不允许在已经创建的实例上动态添加新的根级响应式属性,如果是添加一个新的属性,可以使用$set,但是如果需要修改属性的值,$set将无效
change
name:'assess',
data () {return{
user: { id:1, name: '李四', age: 14, sex: '男'}
}
},
watch: {
user (val) {
console.log(val)
}
},
methods: {
changeAge () {this.$set(this.user, 'ages', 15)
}
}
}
3.Object.assign对象复制
原理:新建一个空对象将对象复制进空对象再赋值给监听的值,这种方法可以监听到对象属性的新增和修改
this.user = Object.assign({}, this.user)
二、对象数组监听
1.深度监听
同1.1
2..$set(obj,ket,value)替换
this.$set(this.user, 'ages', { id: 1, name: '张三', age: 13, sex: '男' })
钻研不易,转载请注明出处......