鍍金池/ 問答/HTML/ Vue2的響應(yīng)式問題

Vue2的響應(yīng)式問題

最近學(xué)習(xí)Vue2, 遇到2個問題:

1.data的屬性是對象, 通過賦值直接設(shè)置對象的屬性值, 原本不應(yīng)該視圖更新的, 但是如果設(shè)置data另一個屬性的值, 導(dǎo)致視圖更新, 同時會導(dǎo)致這個對象的視圖更新.

<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設(shè)置object的屬性的值");

// 通過賦值, 直接設(shè)置屬性值, 頁面視圖沒有更新
vm.object.name = "設(shè)置object的屬性的值";

// 取消注釋這句話, 會觸發(fā)上面這句話的視圖更新!
//vm.message = "設(shè)置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", "設(shè)置object的屬性的值");
vm.object.name = "不通過set, 設(shè)置object的屬性的值";

setTimeout(function(){
    // 頁面視圖沒有更新
    vm.$set(vm.object, "name", "通過set設(shè)置object的屬性的值");
    // vm.$forceUpdate();
}, 500);

不知描述的是否清晰, 請幫忙看看(沒百度到), 感激!

回答
編輯回答
雅痞
  1. 無法檢測屬性的添加,所以不響應(yīng),所以才需要 $set;同時 vue 更新單位是組件,所以每次更新時會更新整個組件,message 的更新導(dǎo)致組件更新,導(dǎo)致同步了 object。
  2. vm.object.name ='xxxx' 有關(guān),可能算是個bug,我去提個 issues。

好吧,發(fā)現(xiàn)這個 issues 的 PR 已經(jīng)有了,還沒合并,簡單的說就是 $set 對已經(jīng)存在的 屬性無效,你前面使用直接添加的方式添加了屬性。

2018年2月19日 03:44