快捷導(dǎo)航

vue的異步數(shù)據(jù)更新機(jī)制與$nextTick用法解讀

更新時(shí)間：2023年03月28日 08:37:33 作者：liguoyuan819

這篇文章主要介紹了vue的異步數(shù)據(jù)更新機(jī)制與$nextTick用法解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue異步數(shù)據(jù)更新機(jī)制與$nextTick

vue異步更新dom

vue的響應(yīng)式更新dom是異步執(zhí)行的，不是數(shù)據(jù)發(fā)生變化之后dom立即發(fā)生變化，而是按照一定的邏輯更新dom。

具體是vue在檢測(cè)到數(shù)據(jù)變化時(shí)，vue將開啟一個(gè)隊(duì)列，，并緩沖在同一事件循環(huán)中發(fā)生的所有數(shù)據(jù)變更。如果同一個(gè) watcher 被多次觸發(fā)，只會(huì)被推入到隊(duì)列中一次。這在緩沖中去除重復(fù)數(shù)據(jù)造成的額外的dom操作和計(jì)算是非常必要的。在下一個(gè)nextTick中，vue執(zhí)行的是已經(jīng)去重的實(shí)際工作。

理解：vue執(zhí)行dom更新時(shí)異步的，這個(gè)異步任務(wù)可以當(dāng)成是一個(gè)promise的微任務(wù)，對(duì)同一個(gè)屬性值進(jìn)行多次賦值時(shí)，只有最后一次賦值會(huì)作為一個(gè)promise微任務(wù)放到更新隊(duì)列里面。

$nextTick執(zhí)行機(jī)制

Vue會(huì)異步更新DOM，會(huì)在當(dāng)前執(zhí)行棧的最后更新DOM，這個(gè)與JavaScript的原生操作dom有很大區(qū)別。vue中的$nextTick再JavaScript中相當(dāng)于微任務(wù)，會(huì)在當(dāng)前所有同步任務(wù)執(zhí)行完之后再執(zhí)行，$nextTick會(huì)得到dom更新后的結(jié)果。最后頁面渲染是在始終是在微任務(wù)執(zhí)行之后在執(zhí)行的，所以$nextTick回調(diào)執(zhí)行時(shí)還沒有渲染，頁面上看不到更新后的結(jié)果。

vue執(zhí)行異步更新的目的

vue更新dom的流程：觸發(fā)setter --> 監(jiān)聽watcher --> 重新渲染 render --> 生成虛擬dom (vdom)--> 更新dom 。如果每一次都執(zhí)行該流程會(huì)非常消耗性能，所以使用異步更新DOM的機(jī)制，先對(duì)數(shù)據(jù)修改進(jìn)行整合去重，再使用最終的結(jié)果一次性對(duì)DOM進(jìn)行更新。

vue異步數(shù)據(jù)更新問題

記錄一下出現(xiàn)的問題, 數(shù)據(jù)翻倍

這是復(fù)現(xiàn)問題的代碼

 data() {
    return {
      space: "",
      allresult: []
    };
  },
  methods: {
    getmessage() {
      this.allresult = [];
      axios
        .get(
          "https://gist.githubusercontent.com/xiaolannuoyi/9b0defe4959e71fa97e6096cc4f82ba4/raw/4be939123d488cee7ecefc055fb5ecb2ed8d5c8d/test"
        )
        .then(data => {
          console.log(data);
          let result = data.data;
          for (let i = 0; i < result.length; i++) {
            //原因在于這里的this.Allresult
            this.allresult.push({
              id: result[i].id,
              name: result[i].name,
              age: result[i].age
            });
            
          }
            console.log('此時(shí)的this.allresult',this.allresult);
        });
    }
  },
  watch: {
    space() {
      console.log("watch");
      this.getmessage();
    }
  },
  mounted() {
    this.space = "123";
    console.log("mounted");
    this.getmessage();
  }

結(jié)果

在這里插入圖片描述