Vue 2与Vue 3Chrome DevTools调试插件
Vue 项目的调试利器，非Vue DevTools莫属。Vue 2 和 Vue 3 各有一套调试工具，专门适配它们各自的特性。你装上插件之后，打开 Chrome 开发者工具，就能看到一个新的“Vue”标签页，组件结构、状态变化、Vuex 数据，全都一目了然。
Vue 2 DevTools的调试体验已经挺成熟的了，组件树清晰，props 和 data 一览无遗，还能实时修改数据直接看效果。用Vuex管理状态的项目，也有专门的面板查看状态变更，调起来顺手。
Vue 3 DevTools就更有意思了，是对Composition API支持得到位，setup()里的响应式变量都能追踪，逻辑再复杂也不怕。你还能看组件渲染耗时，性能瓶颈，定位 bug 简直不要太方便。
有意思的是，现在的 Vue 3 版本其实也支持 Vue 2 项目，插件会自动识别版本，所以你不用来回换插件，省事多了。调试 Vue 实例、跟踪生命周期、手动改 data 试效果，甚至还能看到watch和computed是怎么响应的。
你可以从 vue-devtools(chrome vue 调试插件) 找到安装入口，也推荐你看看这个Vue Devtools 组件调试扩展，里面讲得比较细。
如果你刚开始接触 Vue 调试，不妨先从组件树和状态入手，熟悉之后再慢慢玩转响应式追踪和性能。调试工具用得顺手，开发效率能提不少。
文件大小：4.34MB
评论区