Vue中通过this.xxx.xxx改变对象值无法生效

Question

在vue中使用better-scroll插件。在mounted函数中初始化better-scroll对象。代码如下：

mounted(){
    var _this = this;
    this.$nextTick(()=>{
        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;
        // 修改完后打印this.scroll，发现是修改成功的。但是通过vue-devtools查看该对象的这个两个属性值并没有修改成功，这是为什么？
        // this.scroll.minScrollY = 0;
        // this.scroll.maxScrollY = -15;
    })
}

修改完后打印this.scroll，发现是修改成功的。但是通过vue-devtools查看该对象的这个两个属性值并没有修改成功，这是为什么？

然后我将nextTick函数换成setTimeout

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) 
}

发现换成setTimeout之后就没有刚才的问题了，vue-devtools也是现实修改后的值。$nextTick函数不是相当于一个setTimeout吗？

为什么呢？

Answer 1

$nextTick是个异步操作。

Answer 2

需要好好观察vue的生命周期钩子哦~
this.$nextTick实例方法是在dom都确定挂载之后执行的方法，正如楼上说的是异步的，需要在this.$nextTick中使用延时器，加入异步堆栈，才能按照你想要的执行顺序，然后你你说的this.$nextTick和setTimeout已知是错误的，因为在mounted中进行方法执行，这时候dom已经加载完成此时不需要this.$nextTick包裹也行，所以你将setTimeout去除也是正常的

Answer 3

emm，自己愚钝，就参考了这个控件的作者写的文章手写了一下代码
结果发现，好像并不是那么一回事？
从Vue的官方文档上看有如下一段

而从楼主的写法上看并没有发现什么问题。

以下是我实现的结果
代码如下

<template>
    <div class="home">
        <div class="wrapper" ref="wrapper">
            <ul class="content">
                <li v-bind:key="item" v-for="item in data">{{item}}</li>
            </ul>
        </div>
    </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import BScroll from 'better-scroll'

export default {
  name: 'home',
  components: {
    HelloWorld
  },
  data () {
    return {
      data: [2, 3, 4, 5, 89, 0]
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.scroll = new BScroll(this.$refs.wrapper, {
        click: true
      })
      console.log(this)
      console.log(this.scroll)
      console.log('minScrollY: ' + this.scroll.minScrollY + '  MaxScroll_y: ' + this.scroll.maxScrollY)
      this.scroll.minScrollY = 0
      this.scroll.maxScrollY = this.scroll.maxScrollY - 15
      console.log(this.scroll)
      console.log('minScrollY: ' + this.scroll.minScrollY + '  MaxScroll_y: ' + this.scroll.maxScrollY)
    })

    // 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)
    //   console.log(_this.scroll)
    //   console.log('minScrollY: ' + _this.scroll.minScrollY + '  MaxScroll_y: ' + _this.scroll.maxScrollY)
    //   _this.scroll.minScrollY = 0
    //   _this.scroll.maxScrollY = _this.scroll.maxScrollY - 15
    //   console.log(_this.scroll)
    //   console.log('minScrollY: ' + _this.scroll.minScrollY + '  MaxScroll_y: ' + _this.scroll.maxScrollY)
    // }, 1)
  }
}
</script>

输出如下所示

emmm，这不是对的吗？？？值也发生改变了啊，this和_this也是指向同一个VueComponent对象的。
所以楼主还请把问题再描述得详细一些吧，vue-devtool上面又是如何显示的呢？

后续：按照楼主给的意见，继续修改了代码，如下

  data () {
    return {
      data: [2, 3, 4, 5, 89, 0],
      scroll: null
    }
  },
  mounted () {
    this.$nextTick(() => {
      console.log(this.data);
      this.scroll = new BScroll(this.$refs.wrapper, {
        click: true
      });
      let scroll = this.scroll;
      console.log(this);
      console.log(scroll);
      console.log('minScrollY: ' + scroll.minScrollY + '  MaxScroll_y: ' + scroll.maxScrollY);
      scroll.minScrollY = 0;
      scroll.maxScrollY = scroll.maxScrollY - 15;
      console.log(scroll);
      console.log('minScrollY: ' + scroll.minScrollY + '  MaxScroll_y: ' + scroll.maxScrollY)
    })
  }

结果如下

这是已经改变了吧？