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

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

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

<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>誤區 - 在 Watch 里打斷點查看調用棧

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

為什么 f2，f3 的調用信息會丟失？

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

進入到 node_modulesvuedistvue.runtime.esm.js，在 defineReactive 函數的 set 方法里添加斷點，這里的 key 就是要監聽的變量的名字。

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

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

以上就是Vue 如何追蹤數據變化的詳細內容，更多關于Vue 追蹤數據變化的資料請關注好吧啦網其它相關文章！