The responsive problem of Vue2

recently I encountered two problems in learning Vue2,:

The property of

1.data is an object. Setting the property value of the object directly through assignment should not update the view, but if you set the value of another property of data, it will cause the view update and the view update of this object at the same time.

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

    <div>
        {{object.name}}
    </div>
</div>
var vm = new Vue({
    el: "-sharpapp",
    data(){
        return {
            message: "message",
            object: {}
        }
    }
});

// vm.$set(vm.object, "name", "setobject");

// , , 
vm.object.name = "object";

// , !
//vm.message = "message";

// vm.$forceUpdate();

2.setTimeout, even though there is no view update via Vue.set

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

    <div>
        {{object.name}}
    </div>
</div>
var vm = new Vue({
    el: "-sharpapp",
    data(){
        return {
            message: "message",
            object: {}
        }
    }
});

// , setTimeout
// vm.$set(vm.object, "name", "object");
vm.object.name = "set, object";

setTimeout(function(){
    // 
    vm.$set(vm.object, "name", "setobject");
    // vm.$forceUpdate();
}, 500);

I do not know whether the description is clear, please take a look at it (no Baidu), thank you!

Mar.10,2021

  1. cannot detect the addition of attributes, so it does not respond, so it requires $set; and the vue update unit is the component, so each update will update the entire component, and the update of message will cause the component to be updated, resulting in Synchronize object.
  2. has something to do with vm.object.name = 'xxxx' . It may be a bug,. I'll mention an issues.
< hr >

well, it is found that this issues's PR has not been merged yet. To put it simply, $set is not valid for existing attributes. You added attributes by adding them directly.

Menu