vue通过 this.$set（或者Vue.set） 和 Object.assign 两种方式给对象添加属性

最终效果是这样的：添加了一个age属性

 

第一种：this.$set

<template>
    <div class="hello">
      <button @click="setMessage">添加属性</button>
      {{ student.name }}
      <input type="text" v-model="student.age">
    </div>
  </template>
  
  <!-- 第一种实现方式：利用this.$set 和 Vue.set -->
  <script>
  import Vue from 'vue'
  export default {
   data() {
     return {
       student: {
         name: '张三',
       }
     }
   },
   methods: {
     setMessage() {
        // this.$set(obj, key, value)
        this.$set(this.student, 'age', 15)  
        //使用Vue.set时，必须导入vue，不然会报错
        // Vue.set(this.student, 'age', 18)
        console.log(this.student)
     }
   },
  }
  </script>
 

第二种：通过Object.assign(target, sources)方法 

<template>
    <div class="hello">
      <button @click="setMessage">添加属性</button>
      {{ student.name }}
      <input type="text" v-model="student.age">
    </div>
  </template>
  
  
  <!-- 第二种实现方式：通过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方法，所以，此时我们再次操作该属性的时候，就会引起视图的更新啦！