解决Vue中$set数据改变而视图不改变

解决Vue中$set数据改变而视图不改变

vue视图中数据的渲染和更新些情况下双向绑定是失效的，此时我们会使用set去使视图得到更新，但是有时set会失。

在vue文档中有这样一句话：
如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。

例如：

<template>
    <div>
        <div>姓名： {{ objData.name }}</div>
        <div>年龄： {{ objData.age }}</div>
        <div>性别： {{ objData.sex }}</div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            objData: {
                name: '花生', age: '100',
            },
        }
    },
    mounted() {
        setTimeout(() => {
            this.$set(this.objData, this.objData.sex, "男");
        }, 3000);
    },
    methods: {
    },
}
</script>

上面的代码姓名和年龄都可以正常渲染， 但是性别无法更新到视图上。

解决方法，正确写法如下：

mounted() {
        setTimeout(() => {
            this.objData = {...this.objData, ...{set: ""}}
            this.$set(this.objData, 'sex', "男");
        }, 3000);
    },