vue中data的bug

data

当vue中的数据发生变化的时候，会通知UI进行相应的渲染，但是当data中的值不存在的时候，而也页面上引用了data中变量的时候，vue会有一个提示错误：

具体的代码如下：

<template>
<div id="app">
    {{ n }}
</div>
</template>

<script>
export default {
    name: "App",
    data() {
        return {};
    },
};

</script>

然而页面绑定的是data中的一个对象的属性，按照常理来说也应该会报错，但是vue并没有报错,也就是说vue中只对数据判断第一层

<template>
<div id="app">
    {{ obj.n }}
</div>
</template>

<script>
export default {
    name: "App",
    data() {
        return {
            obj: {}
        };
    },
};

</script>

如何处理这个bug呢?vue提供了Vue.set函数来更新obj中的值，主要作用如下：

1. 新增key
2. 并不会自动创建代理和监听
3. 触发UI更新 具体代码如下：

<template>
<div id="app">
    {{ obj.n }}
<button @click="add">setN</button>
</div>
</template>

<script>
import Vue from "vue";
export default {
    name: "App",
    data() {
    return {
        obj: {},
    };
},
methods: {
    add() {
        console.log(Vue.set === this.$set);  //true
        this.$set(this.obj, "n", 100);
    },
  },
};

</script>