Vue.js $nextTick

最近在學習vue.js。瞭解1.x的基礎上再學習2.x的vue。兩個版本的確是不會像angular這樣1.x和2.x相差甚遠。因此學習起來其實仍是有很大的關聯。可是，終歸來講。二者仍是有語法上的細微差異的。可是對於此處講的$nextTick()函數來講，二者並無什麼區別。前兩天瞟到了一眼這個 $nextTick這個玩意兒，可是至於它是幹什麼的，仍是不清楚。而後今天在練習項目中就用到了。本身也稍微的去了解了一下。以此作記錄。

     vue.js中更新數據是異步更新的。在這種狀況下，若是咱們想一打開加載、渲染頁面就實現某種和dom相關的效果。咱們知道這個時候須要把相關的代碼放到vue的生命週期的created鉤子函數中：執行。然而由於異步的緣由。這個時候頁面並未開始渲染。你就想對某個dom元素實現某種特殊的效果的話，結果就會是徒勞的。這一點形象點描述的話，能夠說此時dom元素還在堵車的路上尚未到頁面上呢，你就點着他的名字要他作事。那結果確定是事情也沒有作成。由於他人都還沒到呢。這個時候$nextTick就出場了，它實質上是一個回調函數，回調函數就意味着把dom元素的相關實現放在這裏面的話，它會等着dom來了，纔會開始讓他作事。那這就很好的解決了頁面的異步渲染問題。

   解釋了$nextTick的用法，那麼它的使用場景就是當頁面還未渲染的時候，好比created,或者mounted(未所有渲染完成)鉤子狀態的時候有與dom相關的操做的話。此時就須要使用到$nextTick.

  補充：

   在vue中仍是能夠獲取原生js的dom元素的。在1.x和2.x版本中的獲取方式稍有差別。

  1.x

     在template模板中以下

    <div  v-el:"my-dom"></div>

  在script中

      this.$els.myDom;//dom獲取到dom元素,  注意script中須要使用駝峯命名

 

2.x

   在template模板中以下

     <div  ref="mydom"></div>

 在script中

    this.$refs.mydom ;//2.x獲取dom元素,不用使用駝峯命名