vue中$set和$delete

vue給對象新增屬性

對於一般的對象新增屬性,只需要對象新增屬性賦值操作就可以啦,但是不會觸發視圖更新.
示例：

<template>
  <div>
     <div class="box">
       <span>姓名： {{infos.name}}</span>
       <span>{{infos.message}}</span>
       <button @click="addtooltip">查看信息</button>
     </div>
  </div>
</template>

<script>
  export default {
    name: "module1",
    data() {
      return {
        infos: {
          name: '張三'，
          age: 24
        }
      }
    },
    methods:{
       addtooltip() {
          this.infos.message = '出生於四川遂寧';
       }
    }
  }
</script>

而在我們點擊“查看信息”按鈕時，看到頁面並沒有顯示，而打印 this.infos 就有message字段，所以

實例創建后添加屬性，並不會觸發視圖更新
這時候需要使用 vue中 $set 方法,既可以新增屬性，又可更新視圖

this.$set(this.infos, "message",  "出生於四川遂寧")

或者如果是全局就使用這種

var vm = new Vue({..})
vm.set(this.data, "key", value)

---

vue刪除對象中某個屬性同理，使用delete

delete this.data.key

或者

var vm = new Vue({..})
vm.delete(this.info, "age")