nexttick使用场景_Vue -- nextTick

应用场景:

1.在vue的created生命周期中,进行的DOM操作,必须放置Vue.nextTick(()=>{})中

原因:因为created周期的完成后,实际上DOM元素还没有进行渲染.

2.需要在数据发生后执行的一项操作,同时该操作需要使用随数据变动而发生变化的DOM结构时,那这个操作也需要放置在Vue.nextTick(()=>{})中.

原因:vue执行DOM更新是异步的,当监听到数据发生变化时,vue会开启一个队列,缓存对将要发生变化的值,等待数据变化结束,最后统一一次替换DOM中的元素.

用个例子来看:

html:
<div id="app">
     <div ref="number">{{value}}</div>
</div>

js:

new Vue({
 el:"#app",
 data:{
    value:0
 },
 methods:{
   
 },
 mounted(){
  //改变数据
  this.value = 1
  //获取DOM元素
  console.log(this.refs["number"].innerHTML)  //得到的结果以为是1,而恰恰结果是0
  this.$nextTick(()=>{
    console.log(this.refs["number"].innerHTML)  //得到的结果才是改变之后的1
  })
 }

})

简单一句话:就是如果你想要在当前函数内改变数据,同时想要在当前函数内获取改变后的DOM元素对其进行操作时,你就需要使用这个方法