最近在學習vue.js。瞭解1.x的基礎上再學習2.x的vue。兩個版本的確是不會像angular這樣1.x和2.x相差甚遠。所以學習起來其實還是有很大的關聯。但是，終歸來說。兩者還是有語法上的細微差別的。但是對於此處講的$nextTick()函數來說，兩者並沒有什麼區別。前兩天瞟到了一眼這個 $n ...
最近在學習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元素,不用使用駝峰命名
