1. 程式人生 > >Vue.nextTick的理解

Vue.nextTick的理解

官方解釋:

Vue.nextTick( [callback, context] )

引數

  • {Function} [callback]
  • {Object} [context]

用法
在下次 DOM 更新迴圈結束之後執行延遲迴調。在修改資料之後立即使用這個方法,獲取更新後的 DOM。

// 修改資料
vm.msg = 'Hello'
// DOM 還沒有更新
Vue.nextTick(function () {
  // DOM 更新了
})

// 作為一個 Promise 使用 (2.1.0 起新增,詳見接下來的提示)
Vue.nextTick().then(function ()
{
// DOM 更新了 })

2.1.0 起新增:如果沒有提供回撥且在支援 Promise 的環境中,則返回一個 Promise。請注意 Vue 不自帶 Promise 的 polyfill,所以如果你的目標瀏覽器不原生支援 Promise (IE:你們都看我幹嘛),你得自己提供 polyfill。

個人理解:

從官方解釋來看:Vue.nextTick(callback)是用於資料更新後操作更新後的dom,dom操作在callback回撥函式中進行。

某些情況下我們確實需要操作dom,譬如頁面中需要實現一個幻燈片效果,獲取幻燈片資料(slideData)後,需要操作dom來實現互動。那麼獲取slideData後,何時完成dom更新呢,我們需要等待dom更新後再加互動。這裡就有了Vue.nextTick(callback)的用武之地。

使用Vue.nextTick(callback),我們無需關心dom何時更新,Vue.nextTick(callback)中回撥函式執行時,dom已經更新完,我們可以直接在callback回撥中操作dom。