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

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

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

<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)用棧

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

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

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

進(jìn)入到 node_modulesvuedistvue.runtime.esm.js，在 defineReactive 函數(shù)的 set 方法里添加斷點(diǎn)，這里的 key 就是要監(jiān)聽(tīng)的變量的名字。

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

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

以上就是Vue 如何追蹤數(shù)據(jù)變化的詳細(xì)內(nèi)容，更多關(guān)于Vue 追蹤數(shù)據(jù)變化的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！