vue之监听对象、对象数组的改变

vue之监听对象的改变

一、对象监听

1. 深度监听

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

 

 

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