vue的異步數據更新機制與$nextTick用法解讀

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

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

vue異步數據更新機制與$nextTick

vue異步更新dom

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

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

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

$nextTick執(zhí)行機制

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

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

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

vue異步數據更新問題

記錄一下出現的問題, 數據翻倍

這是復現問題的代碼

 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('此時的this.allresult',this.allresult);
        });
    }
  },
  watch: {
    space() {
      console.log("watch");
      this.getmessage();
    }
  },
  mounted() {
    this.space = "123";
    console.log("mounted");
    this.getmessage();
  }

結果

在這里插入圖片描述