Vue2面試考點(diǎn)之$nextTick原理解析

更新時(shí)間：2023年05月30日 08:14:58 作者：前端技術(shù)棧

平時(shí)在獲取真實(shí)DOM的時(shí)候獲取不到最新的DOM元素，使用$nextTick就可以，那為什么$nextTick就可以獲取到最新的DOM元素呢，本文就來帶著這兩個(gè)問題來解析一下nextTick的原理

nextTick原理

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

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

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

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

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

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

Vue的視圖更新是異步執(zhí)行的，使用的就是nextTick,這也是能獲取到最新DOM的原因，在Vue內(nèi)部有一個(gè)nextTick函數(shù)，他也是使用隊(duì)列去處理回調(diào)函數(shù)，并不是調(diào)用后就馬上執(zhí)行，首先是推入到一個(gè)隊(duì)列中，當(dāng)所有的同步代碼執(zhí)行完的時(shí)候再通過循環(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瀏覽器支持得定時(shí)器
  timerFunc = () => {
    setImmediate(flush)
  }
}
export function nextTick(cb) {
  callback.push(cb)
  // Promise.then
  if (!pending) {
    console.log('執(zhí)行了')
    timerFunc() // 這個(gè)方法就是異步方法
    pending = true
  }
}

1.定義一個(gè)callback數(shù)組，每次調(diào)用nextTick就會(huì)把回調(diào)函數(shù)push到callback數(shù)組中，因?yàn)閏allback.push是同步代碼，timerFunc是異步代碼，所以執(zhí)行完所有push后才會(huì)調(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個(gè)數(shù)據(jù)，會(huì)觸發(fā)兩次視圖更新，這個(gè)時(shí)候就會(huì)把watcher推入到隊(duì)列中，下面調(diào)用了$nextTick獲取DOM，nextTick中的fn函數(shù)也會(huì)推入到隊(duì)列中，這個(gè)時(shí)候的數(shù)組是這樣的[watcher,fn]通過循環(huán)調(diào)用，先執(zhí)行視圖更新，后獲取DOM就可以獲取到最新DOM了

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

您可能感興趣的文章: