vue nextTick得用法

官网介绍：

​​Vue.nextTick( [callback, context] )​​

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

（是不是不懂官网在说啥，写个例子看看）

<template>
  <div class="hello">
    <h1 ref='h1'>{{ msg }}</h1>
     <h2>{{msg1}}</h2>
    <h3>{{msg2}}</h3>
    <h4>{{msg3}}</h4>
    <div @click="changeMsg">点击修改</div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: '旧内容',
      msg1:'',
      msg2:'',
      msg3:''
    }
  },
  methods:{
    changeMsg(){
      this.msg='新内容';
      this.msg1=this.$refs.h1.innerHTML
      this.$nextTick(()=>{
        this.msg2=this.$refs.h1.innerHTML
      })
      // 获取dom元素得内容 在data更新之前发生 所以导致了获取到没修改得旧内容
      this.msg3=this.$refs.h1.innerHTML
    }
  }
}
</script>

View Code

结果

    = 》 

结果：msg1和msg3显示的内容是旧内容，而msg,msg2显示的内容是新内容。

由于 获取dom元素得内容 在data更新之前发生 所以导致了获取到没修改得旧内容

 Vue中DOM更新是异步的

nextTick使用场景：

1.vue生命周期：created()中，由于此处dom得挂载还没完成，渲染也没有完成，data观测完成，想要获取dom的内容 或者操作dom 需要用nextTick

2.在数据改变之后，需要执行某些dom的结构，内容上的操作的时候，用nextTick可以确保活取到数据改变以后的dom，数据

 Vue中DOM异步更新和nextTick的关系：

Vue异步执行DOM更新过程：数据变化，Vue将开启一个队列，将所有数据的变化都存储起来，到一定时间后，再统一更新。如果同一数据多次变化，呗watcher多次检测到，只会存储一次，最后那次的变化，在下一次更新渲染dom的事件循环“tick”中，执行操作。

异步执行操作：基于原生Promise.then和MessageChannel，若环境不支持（IE）则采用setTimeout来延迟执行。

参考博客地址 ​​https://www.jianshu.com/p/a7550c0e164f​​