Changing the value of an object through this.xxx.xxx in Vue does not take effect.

use the better-scroll plug-in in vue . Initialize the better-scroll object in the mounted function. The code is as follows:

mounted(){
    var _this = this;
    setTimeout(function(){
        _this.scroll = new BScroll(_this.$refs.wrapper,{
            click:true
        });
        // this.scroll
        // this.scroll.minScrollY = 0;
        // this.scroll.maxScrollY = 0;
        console.log(this.scroll);
        _this.scroll.minScrollY = 0;
        _this.scroll.maxScrollY = _this.scroll.maxScrollY - 15;
    },1) 
}

it is found that there is no problem after switching to setTimeout, and vue-devtools is also the actual modified value. Isn"t the $nextTick function equivalent to a setTimeout?

Why?

Jul.16,2021

$nextTick is an asynchronous operation.


you need to take a good look at the lifecycle hook of vue.
this.$nextTick instance method is executed after dom is determined to be mounted. As said upstairs, it is asynchronous. You need to use a delay timer in this.$nextTick and add the asynchronous stack in order to execute in the order you want. Then the this.$nextTick and setTimeout you said are known to be wrong , because the method is performed in mounted . At this point, dom has been loaded and there is no need for this.$nextTick package, so it is normal for you to remove setTimeout


.

emm, himself is stupid, so I refer to the article written by the author of from the official document of Vue, there is the following paragraph

clipboard.png



clipboard.png

emmmthis_thisVueComponent
vue-devtool

:


clipboard.png

this has changed, hasn't it?

Menu