Vue中给data添加一个新的属性出现的问题和解决办法

<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>

<style lang="scss" scoped></style>

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

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