欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

一文了解Vue中的nextTick

 更新時間:2019年05月06日 11:09:41   作者:Android架構  
Vue中的 nextTick 涉及到Vue中DOM的異步更新,感覺很有意思,特意了解了一下。其中關于 nextTick 的源碼涉及到不少知識,很多不太理解,暫且根據自己的一些感悟介紹下 nextTick

Vue中的 nextTick 涉及到Vue中DOM的異步更新,感覺很有意思,特意了解了一下。其中關于 nextTick 的源碼涉及到不少知識,很多不太理解,暫且根據自己的一些感悟介紹下 nextTick 。

一、示例

先來一個示例了解下關于Vue中的DOM更新以及 nextTick 的作用。

模板

<div class="app">
 <div ref="msgDiv">{{msg}}</div>
 <div v-if="msg1">Message got outside $nextTick: {{msg1}}</div>
 <div v-if="msg2">Message got inside $nextTick: {{msg2}}</div>
 <div v-if="msg3">Message got outside $nextTick: {{msg3}}</div>
 <button @click="changeMsg">
  Change the Message
 </button>
</div>

Vue實例

new Vue({
 el: '.app',
 data: {
  msg: 'Hello Vue.',
  msg1: '',
  msg2: '',
  msg3: ''
 },
 methods: {
  changeMsg() {
   this.msg = "Hello world."
   this.msg1 = this.$refs.msgDiv.innerHTML
   this.$nextTick(() => {
    this.msg2 = this.$refs.msgDiv.innerHTML
   })
   this.msg3 = this.$refs.msgDiv.innerHTML
  }
 }
})

點擊前

點擊后


從圖中可以得知:msg1和msg3顯示的內容還是變換之前的,而msg2顯示的內容是變換之后的。其根本原因是因為Vue中DOM更新是異步的(詳細解釋在后面)。

二、應用場景

下面了解下 nextTick 的主要應用的場景及原因。

在Vue生命周期的 created() 鉤子函數進行的DOM操作一定要放在 Vue.nextTick() 的回調函數中
在 created() 鉤子函數執(zhí)行的時候DOM 其實并未進行任何渲染,而此時進行DOM操作無異于徒勞,所以此處一定要將DOM操作的js代碼放進 Vue.nextTick() 的回調函數中。與之對應的就是 mounted() 鉤子函數,因為該鉤子函數執(zhí)行時所有的DOM掛載和渲染都已完成,此時在該鉤子函數中進行任何DOM操作都不會有問題 。

在數據變化后要執(zhí)行的某個操作,而這個操作需要使用隨數據改變而改變的DOM結構的時候,這個操作都應該放進 Vue.nextTick() 的回調函數中。

具體原因在Vue的官方文檔中詳細解釋:

Vue 異步執(zhí)行 DOM 更新。只要觀察到數據變化,Vue 將開啟一個隊列,并緩沖在同一事件循環(huán)中發(fā)生的所有數據改變。如果同一個 watcher 被多次觸發(fā),只會被推入到隊列中一次。這種在緩沖時去除重復數據對于避免不必要的計算和 DOM 操作上非常重要。然后,在下一個的事件循環(huán)“tick”中,Vue 刷新隊列并執(zhí)行實際 (已去重的) 工作。Vue 在內部嘗試對異步隊列使用原生的 Promise.then 和 MessageChannel ,如果執(zhí)行環(huán)境不支持,會采用 setTimeout(fn, 0) 代替。

例如,當你設置 vm.someData = 'new value' ,該組件不會立即重新渲染。當刷新隊列時,組件會在事件循環(huán)隊列清空時的下一個“tick”更新。多數情況我們不需要關心這個過程,但是如果你想在 DOM 狀態(tài)更新后做點什么,這就可能會有些棘手。雖然 Vue.js 通常鼓勵開發(fā)人員沿著“數據驅動”的方式思考,避免直接接觸 DOM,但是有時我們確實要這么做。為了在數據變化之后等待 Vue 完成更新 DOM ,可以在數據變化之后立即使用 Vue.nextTick(callback) 。這樣回調函數在 DOM 更新完成后就會調用。

三、 nextTick 源碼淺析

作用

Vue.nextTick 用于延遲執(zhí)行一段代碼,它接受2個參數(回調函數和執(zhí)行回調函數的上下文環(huán)境),如果沒有提供回調函數,那么將返回 promise 對象。

源碼

/**
 * Defer a task to execute it asynchronously.
 */
export const nextTick = (function () {
 const callbacks = []
 let pending = false
 let timerFunc

 function nextTickHandler () {
  pending = false
  const copies = callbacks.slice(0)
  callbacks.length = 0
  for (let i = 0; i < copies.length; i++) {
   copies[i]()
  }
 }

 // the nextTick behavior leverages the microtask queue, which can be accessed
 // via either native Promise.then or MutationObserver.
 // MutationObserver has wider support, however it is seriously bugged in
 // UIWebView in iOS >= 9.3.3 when triggered in touch event handlers. It
 // completely stops working after triggering a few times... so, if native
 // Promise is available, we will use it:
 /* istanbul ignore if */
 if (typeof Promise !== 'undefined' && isNative(Promise)) {
  var p = Promise.resolve()
  var logError = err => { console.error(err) }
  timerFunc = () => {
   p.then(nextTickHandler).catch(logError)
   // in problematic UIWebViews, Promise.then doesn't completely break, but
   // it can get stuck in a weird state where callbacks are pushed into the
   // microtask queue but the queue isn't being flushed, until the browser
   // needs to do some other work, e.g. handle a timer. Therefore we can
   // "force" the microtask queue to be flushed by adding an empty timer.
   if (isIOS) setTimeout(noop)
  }
 } else if (!isIE && typeof MutationObserver !== 'undefined' && (
  isNative(MutationObserver) ||
  // PhantomJS and iOS 7.x
  MutationObserver.toString() === '[object MutationObserverConstructor]'
 )) {
  // use MutationObserver where native Promise is not available,
  // e.g. PhantomJS, iOS7, Android 4.4
  var counter = 1
  var observer = new MutationObserver(nextTickHandler)
  var textNode = document.createTextNode(String(counter))
  observer.observe(textNode, {
   characterData: true
  })
  timerFunc = () => {
   counter = (counter + 1) % 2
   textNode.data = String(counter)
  }
 } else {
  // fallback to setTimeout
  /* istanbul ignore next */
  timerFunc = () => {
   setTimeout(nextTickHandler, 0)
  }
 }

 return function queueNextTick (cb?: Function, ctx?: Object) {
  let _resolve
  callbacks.push(() => {
   if (cb) {
    try {
     cb.call(ctx)
    } catch (e) {
     handleError(e, ctx, 'nextTick')
    }
   } else if (_resolve) {
    _resolve(ctx)
   }
  })
  if (!pending) {
   pending = true
   timerFunc()
  }
  if (!cb && typeof Promise !== 'undefined') {
   return new Promise((resolve, reject) => {
    _resolve = resolve
   })
  }
 }
})()

首先,先了解 nextTick 中定義的三個重要變量。

callbacks

用來存儲所有需要執(zhí)行的回調函數

pending

用來標志是否正在執(zhí)行回調函數

timerFunc

用來觸發(fā)執(zhí)行回調函數

接下來,了解 nextTickHandler() 函數。

function nextTickHandler () {
  pending = false
  const copies = callbacks.slice(0)
  callbacks.length = 0
  for (let i = 0; i < copies.length; i++) {
   copies[i]()
  }
 }

這個函數用來執(zhí)行 callbacks 里存儲的所有回調函數。

接下來是將觸發(fā)方式賦值給 timerFunc 。

  • 先判斷是否原生支持promise,如果支持,則利用promise來觸發(fā)執(zhí)行回調函數;
  • 否則,如果支持MutationObserver,則實例化一個觀察者對象,觀察文本節(jié)點發(fā)生變化時,觸發(fā)執(zhí)行所有回調函數。
  • 如果都不支持,則利用setTimeout設置延時為0。

最后是 queueNextTick 函數。因為 nextTick 是一個即時函數,所以 queueNextTick 函數是返回的函數,接受用戶傳入的參數,用來往callbacks里存入回調函數。

上圖是整個執(zhí)行流程,關鍵在于 timeFunc() ,該函數起到延遲執(zhí)行的作用。

從上面的介紹,可以得知 timeFunc() 一共有三種實現方式。

  1. Promise
  2. MutationObserver
  3. setTimeout

其中 Promise 和 setTimeout 很好理解,是一個異步任務,會在同步任務以及更新DOM的異步任務之后回調具體函數。

下面著重介紹一下 MutationObserver 。

MutationObserver 是HTML5中的新API,是個用來監(jiān)視DOM變動的接口。他能監(jiān)聽一個DOM對象上發(fā)生的子節(jié)點刪除、屬性修改、文本內容修改等等。

調用過程很簡單,但是有點不太尋常:你需要先給他綁回調:

var mo = new MutationObserver(callback)

通過給 MutationObserver 的構造函數傳入一個回調,能得到一個 MutationObserver 實例,這個回調就會在 MutationObserver 實例監(jiān)聽到變動時觸發(fā)。

這個時候你只是給 MutationObserver 實例綁定好了回調,他具體監(jiān)聽哪個DOM、監(jiān)聽節(jié)點刪除還是監(jiān)聽屬性修改,還沒有設置。而調用他的 observer 方法就可以完成這一步:

var domTarget = 你想要監(jiān)聽的dom節(jié)點
mo.observe(domTarget, {
   characterData: true //說明監(jiān)聽文本內容的修改。
})

 

在 nextTick 中 MutationObserver 的作用就如上圖所示。在監(jiān)聽到DOM更新后,調用回調函數。

其實使用 MutationObserver 的原因就是 nextTick 想要一個異步API,用來在當前的同步代碼執(zhí)行完畢后,執(zhí)行我想執(zhí)行的異步回調,包括 Promise 和 setTimeout 都是基于這個原因。其中深入還涉及到 microtask 等內容,暫時不理解,就不深入介紹了。

總結

以上所述是小編給大家介紹的Vue中的nextTick,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!
如果你覺得本文對你有幫助,歡迎轉載,煩請注明出處,謝謝!

相關文章

  • Vue.js 使用AntV X6的示例步驟

    Vue.js 使用AntV X6的示例步驟

    X6 是 AntV 旗下的圖編輯引擎,提供了一系列開箱即用的交互組件和簡單易用的節(jié)點定制能力,方便我們快速搭建流程圖、DAG 圖、ER 圖等圖應用。接下來就看看vue如何使用它
    2021-05-05
  • Vue中mixins的使用方法詳解

    Vue中mixins的使用方法詳解

    mixins是一種分發(fā) Vue 組件中可復用功能的使用方式,它是一個 js 對象,包含我們組件script中的任意功能選項,下面就跟隨小編一起來看看它的具體使用吧
    2024-03-03
  • vue-cli腳手架config目錄下index.js配置文件的方法

    vue-cli腳手架config目錄下index.js配置文件的方法

    下面小編就為大家分享一篇vue-cli腳手架config目錄下index.js配置文件的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-03-03
  • Vue全局分頁組件的實現代碼

    Vue全局分頁組件的實現代碼

    分頁是很多頁面都需要實現的一個功能,這篇文章主要介紹了Vue全局分頁組件的實現代碼,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-08-08
  • 寫給vue新手們的vue渲染頁面教程

    寫給vue新手們的vue渲染頁面教程

    這篇文章主要給大家分享了一個寫給vue新手看的vue渲染頁面教程,文中通過圖文介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,感興趣的朋友們下面隨著小編來一起學習學習吧。
    2017-09-09
  • 微信jssdk邏輯在vue中的運用詳解

    微信jssdk邏輯在vue中的運用詳解

    這篇文章主要介紹了微信jssdk邏輯在vue中的運用詳解,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-11-11
  • vue 使用高德地圖vue-amap組件過程解析

    vue 使用高德地圖vue-amap組件過程解析

    這篇文章主要介紹了vue 使用高德地圖vue-amap組件過程解析,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2019-09-09
  • vue代理和跨域問題的解決

    vue代理和跨域問題的解決

    這篇文章主要介紹了vue代理和跨域問題的解決,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-07-07
  • Element?table?上下移需求的實現

    Element?table?上下移需求的實現

    本文主要介紹了Element?table?上下移需求的實現,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2022-07-07
  • vue使用websocket及封裝過程

    vue使用websocket及封裝過程

    這篇文章主要介紹了vue使用websocket及封裝過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10

最新評論