快捷導(dǎo)航

Vue 如何追蹤數(shù)據(jù)變化

更新時(shí)間：2021年04月09日 10:22:26 作者：用戶3111253633426

這篇文章主要介紹了Vue 如何追蹤數(shù)據(jù)變化，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下

背景

工作中時(shí)不時(shí)就會遇到這種情況：頁面上顯示的數(shù)據(jù)不對，需要前端同事進(jìn)行定位。

在一個(gè)使用 Vue 搭建的 SPA 應(yīng)用上，頁面最終展示的數(shù)據(jù)，從初始化，到最后的展示，過程可能很簡單，也可能很復(fù)雜。遇到復(fù)雜的數(shù)據(jù)流，沒有合適的方法，排查起來會很頭疼。

如果能夠看到數(shù)據(jù)發(fā)生變化時(shí)的調(diào)用棧，就可以知道在錯(cuò)誤的數(shù)據(jù)生成前，發(fā)生了什么，是哪一步的錯(cuò)誤，導(dǎo)致了最終的錯(cuò)誤。順著調(diào)用棧給出的線索找下去，就能夠快速定位到問題。

例子

<template>
  <div>
    <!-- 預(yù)期輸出：hello,world -->
    <!-- 實(shí)際輸出：hello,woold -->
    {{ msg }}
    <button @click="f1">change msg</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'hello,',
    }
  },
  methods: {
    f1() {
      this.msg += 'w'
      this.f2();
    },
    f2() {
      this.msg += 'oo';
      this.f3();
    },
    f3() {
      this.msg += 'ld'
    }
  }
};
</script>

誤區(qū) - 在 Watch 里打斷點(diǎn)查看調(diào)用棧

我們可以在頁面右邊的 Call Stack 看到 f1 和 msg 的回調(diào)，但是看不到 f2 和 f3。也就是說 f2, f3 丟失了，但實(shí)際上正是 f2 導(dǎo)致數(shù)據(jù)發(fā)生了錯(cuò)誤。

為什么 f2，f3 的調(diào)用信息會丟失？

因?yàn)?f1, f2, f3 都修改了 msg，在同一個(gè)微任務(wù)里觸發(fā)了 msg 的 Watcher，因?yàn)?f1 最先觸發(fā)，所以f2，f3 的觸發(fā)無效。最終 Watcher 回調(diào)運(yùn)行的時(shí)候，只記得是 f1 觸發(fā)它的，所以此時(shí)的 Call Stack 只能看到 f1 的信息。