Vue2的响应式问题

Question

最近学习Vue2, 遇到2个问题:

1.data的属性是对象, 通过赋值直接设置对象的属性值, 原本不应该视图更新的, 但是如果设置data另一个属性的值, 导致视图更新, 同时会导致这个对象的视图更新.

<div id="app">
    <div>
        {{message}}
    </div>

    <div>
        {{object.name}}
    </div>
</div>

var vm = new Vue({
    el: "#app",
    data(){
        return {
            message: "message初始值",
            object: {}
        }
    }
});

// vm.$set(vm.object, "name", "通过set设置object的属性的值");

// 通过赋值, 直接设置属性值, 页面视图没有更新
vm.object.name = "设置object的属性的值";

// 取消注释这句话, 会触发上面这句话的视图更新!
//vm.message = "设置message的值";

// vm.$forceUpdate();

2.setTimeout里面, 即使通过Vue.set没有视图更新

<div id="app">
    <div>
        {{message}}
    </div>

    <div>
        {{object.name}}
    </div>
</div>

var vm = new Vue({
    el: "#app",
    data(){
        return {
            message: "message初始值",
            object: {}
        }
    }
});

// 如果取消注释这个, 那setTimeout里面的视图会更新
// vm.$set(vm.object, "name", "设置object的属性的值");
vm.object.name = "不通过set, 设置object的属性的值";

setTimeout(function(){
    // 页面视图没有更新
    vm.$set(vm.object, "name", "通过set设置object的属性的值");
    // vm.$forceUpdate();
}, 500);

不知描述的是否清晰, 请帮忙看看(没百度到), 感激!

Answer 1

1. 无法检测属性的添加，所以不响应，所以才需要 $set；同时 vue 更新单位是组件，所以每次更新时会更新整个组件，message 的更新导致组件更新，导致同步了 object。
2. 跟 vm.object.name ='xxxx' 有关，可能算是个bug，我去提个 issues。

---

好吧，发现这个 issues 的 PR 已经有了，还没合并，简单的说就是 $set 对已经存在的 属性无效，你前面使用直接添加的方式添加了属性。