vue之监听对象的改变

一、对象监听

1. 深度监听

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将无效

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: '男' })

钻研不易，转载请注明出处......