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

类别：vue / 日期：2022-08-25 / 浏览：421 / 评论：0

<template>
 <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()：

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

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