關於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是宏任務，微任務的優先級要高於宏任務，因此會先執行微任務裏面的內容，等到微任務執行完了以後在執行宏任務內容