Vue中为对象添加属性/this.$set()的使用方法&&Object.assign(target, sources)

this.$set(obj,key,value)

• 应用场景：为data中的某一个对象添加属性

1<template>
2  <div>
3    <button @click="addProps">添加属性</button>
4    {{ hun.name }}
5    <input type="text" v-model="hun.age">
6  </div>
7</template>
8
9<script>
10export default {
11  data() {
12    return {
13      hun: {
14        name: 'LinMeng',
15      }
16    }
17  },
18  methods: {
19    addProps() {
20      this.hun.age = 15
21      console.log(this.hun)
22    }
23  }
24}
25</script>

当我们点击按钮为hun添加age属性时，视图层不能够及时更新，控制台中可以看到新添加的属性，这是因为受js的限制，vue.js不能监听对象属性的添加和删除，因为在vue组件初始化的过程中，会调用getter和setter方法，所以该属性必须是存在在data中，视图层才会响应该数据的变化

• 解决方法如下：

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

1<script>
2export default {
3 data() {
4   return {
5     hun: {
6       name: 'LinMeng',
7     }
8   }
9 },
10 methods: {
11   addProps() {
12     this.$set(this.hun, 'age', 15)
13     console.log(this.hun)
14   }
15 }
16}
17</script>

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

1<script>
2export default {
3  data() {
4    return {
5      hun: {
6        name: 'LinMeng',
7      }
8    }
9  },
10  methods: {
11    addProps() {
12      this.hun.age = 15
13      this.hun= Object.assign({}, this.hun)
14      console.log(this.hun)
15    }
16  }
17}
18</script>

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