this.$set(obj, key, value)使用

当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。

<template>
  <div class="hello">
    <button @click="setMessage">添加属性</button>
    {{ student.name }}
    <input type="text" v-model="student.age">
  </div>
</template>

<script>
export default {
  data() {
    return {
      student: {
        name: '亚索',
      }
    }
  },
  methods: {
    setMessage() {
      this.student.age = 15
      console.log(this.student) //此时对象的值更改了，但是视图没有更新
    }
  }
}
</script>

在这里我们发现虽然这个对象身上已经有了该属性，但是视图层并没有更新该数据，是什么造成的呢？由于受JavaScript的限制，vue.js不能监听对象属性的添加和删除，因为在vue组件初始化的过程中，会调用getter和setter方法，所以该属性必须是存在在data中，视图层才会响应该数据的变化。
解决方法：

1. 利用this.$set(obj, key, value)

   <script>
   export default {
    data() {
      return {
        student: {
          name: '亚索',
        }
      }
    },
    methods: {
      setMessage() {
        this.$set(this.student, 'age', 15)
        console.log(this.student) // 数据和视图都已经更新
      }
    }
   }
   </script>
   

   target: 要更改的数据源（可以是一个对象或者数组）
   key 要更改的具体数据 （索引）
   value 重新赋的值

2. 通过Object.assign(target, sources)方法

<script>
export default {
  data() {
    return {
      student: {
        name: '亚索',
      }
    }
  },
  methods: {
    setMessage() {
      this.student.age = 15
      this.student = Object.assign({}, this.student)
      console.log(this.student)
    }
  }
}
</script>

过这两种方式为对象添加属性之后，他的对象身上多了get和set方法，所以，此时我们再次操作该属性的时候，就会引起视图的更新…

以上。