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

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

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

背景

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

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

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

例子

<template>
  <div>
    <!-- 預期輸出：hello,world -->
    <!-- 實際輸出：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ào)用棧

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

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

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

正確的做法

進入到 node_modules\vue\dist\vue.runtime.esm.js，在 defineReactive 函數(shù)的 set 方法里添加斷點，這里的 key 就是要監(jiān)聽的變量的名字。

在這里，就能夠看到 msg 發(fā)生變化的完整過程，快速定位到是 f2 導致的問題。

總結(jié)

通過查看調(diào)用棧的方式，不需要對項目有多熟悉，就能夠快速定位到數(shù)據(jù)發(fā)生錯誤的地方。相比于用 console.log 或者花很多時間去理清代碼邏輯，數(shù)據(jù)流的方式，可以減少很多的工作量。

以上就是Vue 如何追蹤數(shù)據(jù)變化的詳細內(nèi)容，更多關(guān)于Vue 追蹤數(shù)據(jù)變化的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

vue cli3.0結(jié)合echarts3.0與地圖的使用方法示例
這篇文章主要給大家介紹了關(guān)于vue cli3.0結(jié)合echarts3.0與地圖的使用方法，文中通過示例代碼介紹的非常詳細，對大家學習或者使用vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧
2019-03-03
手把手教你搭建vue3.0項目架構(gòu)
這篇文章手把手教你搭建vue3.0項目架構(gòu)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2021-11-11
vue.js學習筆記之綁定style樣式和class列表
數(shù)據(jù)綁定一個常見需求是操作元素的 class 列表和它的內(nèi)聯(lián)樣式。這篇文章主要介紹了vue.js綁定style和class的相關(guān)資料,需要的朋友可以參考下
2016-10-10
Vue?FileManagerPlugin?報錯問題及解決
這篇文章主要介紹了Vue?FileManagerPlugin?報錯問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
vue?proxytable代理根路徑的同時增加其他代理方式
這篇文章主要介紹了vue?proxytable代理根路徑的同時增加其他代理方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
Vue中的項目打包及部署全流程
這篇文章主要介紹了Vue中的項目打包及部署全流程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
el-table表頭根據(jù)內(nèi)容自適應(yīng)完美解決表頭錯位和固定列錯位
這篇文章主要介紹了el-table表頭根據(jù)內(nèi)容自適應(yīng)完美解決表頭錯位和固定列錯位,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-01-01
Vue動態(tài)添加class可能帶來的問題解讀(被覆蓋)
文章討論了在使用Vue.js時,通過動態(tài)class修改元素樣式時可能會遇到的問題,當通過JavaScript動態(tài)添加類時,Vue的動態(tài)class會覆蓋掉通過JavaScript添加的類,導致樣式丟失,這個問題在實際開發(fā)中可能會遇到,尤其是在使用第三方框架
2024-12-12
three.js實現(xiàn)vr全景圖功能實例(vue)
去年全景圖在微博上很是火爆了一陣,正好我也做過一點全景相關(guān)的項目,下面這篇文章主要給大家介紹了關(guān)于three.js實現(xiàn)vr全景圖功能的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2024-05-05
vue3+Ts使用pinia方式(vue-lic搭建項目)
文章介紹了如何在Vue 3項目中使用Pinia進行狀態(tài)管理,主要內(nèi)容包括安裝Pinia、初始化、在main.ts中注冊和使用,以及在.vue的setup中使用state,文章還提到getters和actions的使用可以參考官方文檔,總結(jié)部分表達了作者希望得到大家支持的意愿
2025-01-01