nextTick原理

平時在獲取真實DOM的時候獲取不到最新的DOM元素，使用$nextTick就可以

為什么$nextTick就可以獲取到最新的DOM元素?

帶著以上問題，來解析nextTick的原理

為什么獲取不到最新的DOM元素

因為Vue修改視圖是異步執(zhí)行的，這也是為了優(yōu)化性能，在我們修改data中的數(shù)據(jù)時，Vue內(nèi)部監(jiān)聽到依賴數(shù)據(jù)發(fā)生了改變，通過dep通知組件的watcher執(zhí)行視圖更新，每一次視圖更新都需要重新生成vnode再進行新舊vnode比對，生成DOM元素掛載到頁面上，這一輪操作是非常消耗性能的,所以Vue內(nèi)部會把頁面更新watcher推入到一個隊列中，并加入了節(jié)流方法，當(dāng)同步代碼執(zhí)行完了之后才會把隊列中的watcher拿出來遍歷更新視圖，我們在使用this.$refs獲取DOM的時候是同步代碼，其實DOM還沒有更新，所以是獲取不到的

為什么使用$nextTick就可以獲取到最新DOM

Vue的視圖更新是異步執(zhí)行的，使用的就是nextTick,這也是能獲取到最新DOM的原因，在Vue內(nèi)部有一個nextTick函數(shù)，他也是使用隊列去處理回調(diào)函數(shù)，并不是調(diào)用后就馬上執(zhí)行，首先是推入到一個隊列中，當(dāng)所有的同步代碼執(zhí)行完的時候再通過循環(huán)取出調(diào)用，接下來可以通過代碼了解

let callback = []
let pending = false
let timerFunc
function flush() {
  callback.forEach((cb) => cb())
  pending = false
  callback = []
}
// 處理兼容問題
if (Promise) {
  timerFunc = () => {
    Promise.resolve().then(flush)
  }
} else if (MutationObserver) {
  let observe = new MutationObserver(flush)
  let textNode = document.createTextNode(1)
  observe.observe(textNode, {
    characterData: true,
  })
  timerFunc = () => {
    textNode.textContent = 2
  }
} else if (setImmediate) {
  // ie瀏覽器支持得定時器
  timerFunc = () => {
    setImmediate(flush)
  }
}
export function nextTick(cb) {
  callback.push(cb)
  // Promise.then
  if (!pending) {
    console.log('執(zhí)行了')
    timerFunc() // 這個方法就是異步方法
    pending = true
  }
}
 

1.定義一個callback數(shù)組，每次調(diào)用nextTick就會把回調(diào)函數(shù)push到callback數(shù)組中，因為callback.push是同步代碼，timerFunc是異步代碼，所以執(zhí)行完所有push后才會調(diào)用timerFunc

2.那么視圖更新和獲取DOM的流程是怎么樣的呢

通過偽代碼來解釋

data(){
    return {
        name: 'zs',
        list: [1,2,3]
    }
}
this.name = 'ls'
this.list.push(4)
const fn = () => {
  this.$el.innerHTML // 獲取最新DOM
}
this.$nextTick(fn)

this.name和this.list修改了2個數(shù)據(jù)，會觸發(fā)兩次視圖更新，這個時候就會把watcher推入到隊列中，下面調(diào)用了$nextTick獲取DOM，nextTick中的fn函數(shù)也會推入到隊列中，這個時候的數(shù)組是這樣的[watcher,fn]通過循環(huán)調(diào)用，先執(zhí)行視圖更新，后獲取DOM就可以獲取到最新DOM了

到此這篇關(guān)于Vue2面試考點之$nextTick原理解析的文章就介紹到這了,更多相關(guān)Vue2 $nextTick內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論