vue之监听对象、对象数组的改变
vue之监听对象的改变
⼀、对象监听
1. 深度监听vue逗号分割的字符串转数组
<template>
<div id="test">
<button @click="changeAge">change</button>
</div>
</template>
<script>
export default {
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
}
}
}
</script>
通过watch中的deep属性，监听对象的所有属性，当属性值改变的时候，watch将会被打印，但是这样消耗会很⼤
当然，也可以只监听对象的依噶属性
watch: {
'user.age' () {
console.log(1111)
}
}
2..$set(obj,ket,value)
Vue 不允许在已经创建的实例上动态添加新的根级响应式属性，如果是添加⼀个新的属性，可以使⽤$set，但是如果需要修改属性的值，$set 将⽆效
<template>
<div id="test1">
<button @click="changeAge">change</button>
</div>
</template>
<script>
export default {
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)
}
}
}
</script>
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: '男' })
钻研不易，转载请注明出处......

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。