Vue DevTools 调试与状态追踪
Vue DevTools 的核心功能:Components 面板、Timeline、Pinia/Vuex 状态追踪。如何查看组件的 computed 依赖?时间旅行(Time Travel)调试如何实现?Vue 3 相较 Vue 2 的 DevTools 有何变化?
回答
Yahuda
Components: 组件树、Composition API 变量/ref/computed/reactive、props/slots/emit。Timeline: 事件、组件挂载/卸载、性能快照。Pinia/Vuex: store state/getter/action 调用记录;mutation 时间线;时间旅行回溯状态。Computed: 属性旁闪电图标,hover 查看依赖链。Vue 3: 全新 UI、Composition API 支持、Vite 集成 vite-plugin-vue-devtools。技巧: app.config.performance=true 开启性能追踪。注意: DevTools 影响性能。