关于nextTick的理解

首先先看一下官方的解释：

this.$nextTick()将回调延迟到下次 DOM 更新循环以后执行。在修改数据以后当即使用它，而后等待 DOM 更新。它跟全局方法 Vue.nextTick 同样，不一样的是回调的 this 自动绑定到调用它的实例上。

个人理解：在this.$nextTick外面，获取的数据有可能已经改变了可是获取的时候仍是以前的值，可是在this.$nextTick里面只要获取的数据发生改变，获取的时候就是改变了以后的数据

具体看代码吧

<template>
  <section>
    <div ref="hello">
<!--      绑定了data里面的值并渲染到页面-->
      <h1 v-model="msg">{{msg}}</h1>
    </div>
  </section>
</template>

<script>
  export default {
    data(){
      return {
        msg:'123123'
      }
    },
    mounted() {
      this.msg='456456'
      console.log(333);
      console.log(this.$refs.hello.innerText);
      this.$nextTick(() => {
        console.log(444);
        console.log(this.$refs.hello.innerText);
      });
    },

 

 

运行结果能够知道：

在333以前改变了msg的值，可是获取表单数据的时候仍是以前的123123

可是在nextTick里面获取的时候就发生了改变

且表单渲染的结果也是更新以后的

具体缘由是因为，将msg改变值以后们虽然数据层发生了变化，可是dom层未更新，可是nexttick里面会在dom更新以后立马使用，因此获得的数据就是比较新的数据。

下面说一下JS的宏任务和微任务

宏任务macro task： setTimeout、MessageChannel、postMessage、setImmediate
微任务micro task： MutationObsever 和 Promise.then

 

 在vue2.5以后哦的版本，nextTick就属于宏任务了

测试代码：

created() {
      //ref 须要在dom渲染完成后才会有，在使用的时候确保dom已经渲染完成。
      // 好比在生命周期 mounted(){} 钩子中调用，或者在 this.$nextTick(()=>{}) 中调用
      console.log(111);
      console.log(this.$refs.hello);
      this.$nextTick(() => {
        console.log(222);
        console.log(this.$refs.hello);
      });
       var promise=  new Promise(function (resolve,reject) {
          console.log(888)
        })
      console.log(promise)
    },

测试结果：

 

 出现这样的结果是由于：

先执行主线程的任务，当主线程的任务执行完了以后，因为promise是微任务，nextTick是宏任务，微任务的优先级要高于宏任务，因此会先执行微任务里面的内容，等到微任务执行完了以后在执行宏任务内容