Vue.nextTick总结一

Vue.nextTick总结一

1.开发环境 vue+echarts
2.电脑系统 windows10专业版
3.在使用vue+echarts开发的过程中,echarts初始化的时候,宽度和高度设置为100%,但是没有生效!
4.template中代码为:

5.效果图为:

//这个效果和我们想要的效果完全不一样,查阅了很多资料之后,发现需要使用 Vue.nextTick,下面是我对Vue.nextTick的总结,理解不对的地方请指教。

6.在mounted 中添加如下代码:

this.$nextTick(()=> {   
   this.tt(max, min, mai, mi);
});

6-1.效果如下:

使用vue.nextTick之后就完全ok啦,是不是很nice。

7.关于vue.nextTick总结:

1.作用:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之
后立即使用这个方法,获取更新后的 DOM。
2.异步说明:
Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的
策略进行 DOM 的更新。在 Vue 的[文档]中,说明 Vue是异步执行
DOM 更新的。简单来说,Vue 在修改数据后,视图不会立刻更新,而是等
同一事件循环中的所有数据变化完成之后,再统一进行视图更新。
3.怎么获取最新的dom:
    此时通过 Vue.nextTick 获取到改变后的 DOM 。
    通过setTimeout(fn, 0) 也可以同样获取到。
4.用途:
应用场景:需要在视图更新之后,基于新的视图进行操作。
### created、mounted
需要注意的是,在 created 和 mounted 阶段,如果需要操作渲染后的试
图，也要使用 nextTick 方法。

官方文档说明：
注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到
整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted

mounted: function () {
  this.$nextTick(function () {
    // 你要执行的操作
  })
}

8.以上的内容,就是我对vue.nextTick的初步总结。
9.本期的教程到了这里就结束啦,是不是很nice,希望对你有所帮助,让我们一起努力走向巅峰!