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)

set

vue删除对象中某个属性同理，使用delete

delete this.data.key

或者

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

delete