Vue——给 data 中的对象属性添加一个新的属性时会发生什么？如何解决？

1.案例讲解：

   <div>
      <ul>
         <li v-for="value in obj" :key="value"> {{value}} </li> 
      </ul> 
      <button @click="addObjB">添加 obj.b</button> 
   </div>
</template>

<script>
    export default { 
       data () { 
          return { 
              obj: { 
                  a: 'obj.a' 
              } 
          } 
       },
       methods: { 
          addObjB () { 
              this.obj.b = 'obj.b' 
              console.log(this.obj) 
          } 
      }
   }
</script>

点击 button 会发现，obj.b 已经成功添加，但是视图并未刷新。这是因为在Vue实例创建时，obj.b并未声明，因此就没有被Vue转换为响应式的属性，自然就不会触发视图的更新，这时就需要使用Vue的全局 api $set()：

   this.$set(this.obj, 'b', 'obj.b')
   console.log(this.obj)
}

$set()方法相当于手动的去把obj.b处理成一个响应式的属性，此时视图也会跟着改变了。

2.总结：

1.给 data 中的对象属性添加一个新的属性时会发生：

虽然新添加的对象属性虽然添加成功了，但是视图并未更新。因为Vue实例创建时，没有申明新的对象属性的属性名，Vue实例就不会将该属性转换为响应式属性，因此不会触发视图更新。

2.解决方法：

可以使用Vue的全局api $set()方法，手动去把新添加的属性处理成一个响应式的属性，使其试图随之改变。