vue的狀態(tài)更新方式(異步更新解決)

更新時間：2022年04月19日 09:00:53 作者：李弈圣

這篇文章主要介紹了vue的狀態(tài)更新方式(異步更新解決)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

狀態(tài)更新(異步更新解決)

在vue中狀態(tài)更新是異步的，這一點和react中的setstate類似。

解決方案

非組件解決方案：

<div id="example">{{message}}</div>

var vm = new Vue({
? el: '#example',
? data: {
? ? message: '123'
? }
})
vm.message = 'new message' // 更改數(shù)據(jù)
vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {
? vm.$el.textContent === 'new message' // true
})

在組件內(nèi)使用 vm.$nextTick() 實例方法特別方便，因為它不需要全局 Vue ，并且回調(diào)函數(shù)中的 this 將自動綁定到當(dāng)前的 Vue 實例上：

Vue.component('example', {
? template: '<span>{{ message }}</span>',
? data: function () {
? ? return {
? ? ? message: '沒有更新'
? ? }
? },
? methods: {
? ? updateMessage: function () {
? ? ? this.message = '更新完成'
? ? ? console.log(this.$el.textContent) // => '沒有更新'
? ? ? this.$nextTick(function () {
? ? ? ? console.log(this.$el.textContent) // => '更新完成'
? ? ? })
? ? }
? }
})

因為 $nextTick() 返回一個 Promise 對象，所以你可以使用新的 ES2016 async/await 語法完成相同的事情：methods: {

? updateMessage: async function () {
? ? this.message = 'updated'
? ? console.log(this.$el.textContent) // => '未更新'
? ? await this.$nextTick()
? ? console.log(this.$el.textContent) // => '已更新'
? }
}

異步更新及nexttick

為什么需要異步更新

vue為了避免頻繁的操作DOM,采用異步的方式更新DOM。這些異步操作會通過nextTick函數(shù)將這些操作以cb的形式放到任務(wù)隊列中（以微任務(wù)優(yōu)先），當(dāng)每次tick結(jié)束之后就會去執(zhí)行這些cb，更新DOM。

異步更新內(nèi)部是最重要的就是nextTick方法，它負(fù)責(zé)將異步任務(wù)加入隊列和執(zhí)行異步任務(wù)。VUE 也將它暴露出來提供給用戶使用。在數(shù)據(jù)修改完成后，立即獲取相關(guān)DOM還沒那么快更新，使用nextTick便可以解決這一問題。

nextTick 原理

在下次DOM更新循環(huán)結(jié)束之后執(zhí)行的延遲回調(diào)。在修改數(shù)據(jù)之后立即使用該方法，獲取更新后的DOM。

/*存放異步執(zhí)行的回調(diào)*/
const callbacks = [] 
/*一個標(biāo)記位，如果已經(jīng)有timerFunc被推送到任務(wù)隊列中去則不需要重復(fù)推送*/
let pending = false
/*一個函數(shù)指針，指向函數(shù)將被推送到任務(wù)隊列中，等到主線程任務(wù)執(zhí)行完時，任務(wù)隊列中的timerFunc被調(diào)用*/
let timerFunc

/*
  推送到隊列中下一個tick時執(zhí)行
  cb 回調(diào)函數(shù)
  ctx 上下文
*/
export function nextTick (cb?: Function, ctx?: Object) {
  let _resolve
   // 第一步 傳入的cb會被push進(jìn)callbacks中存放起來
  callbacks.push(() => {
    if (cb) {      
        try {
            cb.call(ctx)
      } catch (e) {
        handleError(e, ctx, 'nextTick')
      }
    } else if (_resolve) {
      _resolve(ctx)
    }
  })  
  // 檢查上一個異步任務(wù)隊列（即名為callbacks的任務(wù)數(shù)組）是否派發(fā)和執(zhí)行完畢了。pending此處相當(dāng)于一個鎖
  if (!pending) {
  // 若上一個異步任務(wù)隊列已經(jīng)執(zhí)行完畢，則將pending設(shè)定為true（把鎖鎖上）
    pending = true
    // 調(diào)用判斷Promise，MutationObserver，setTimeout的優(yōu)先級
    timerFunc()
  }
  // 第三步執(zhí)行返回的狀態(tài)
  if (!cb && typeof Promise !== 'undefined') {   
    return new Promise(resolve => {
      _resolve = resolve
    })
  }
}

Vue 在更新 DOM 時是異步執(zhí)行的。只要偵聽到數(shù)據(jù)變化，Vue 將開啟一個隊列，并緩沖在同一事件循環(huán)中發(fā)生的所有數(shù)據(jù)變更。

如果同一個 watcher 被多次觸發(fā)，只會被推入到隊列中一次。這種在緩沖時去除重復(fù)數(shù)據(jù)對于避免不必要的計算和 DOM 操作是非常重要的。

然后，在下一個的事件循環(huán)“tick”中，Vue 刷新隊列并執(zhí)行實際 (已去重的) 工作。

Vue 在內(nèi)部對異步隊列嘗試使用原生的 Promise.then、MutationObserver 和 setImmediate，如果執(zhí)行環(huán)境不支持，則會采用 setTimeout(fn, 0) 代替。

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: