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

 

 

鑽研不易，轉載請注明出處......