vuejs之Vue Devtools

Vue Devtools大法好

这是一篇小白friendly教程

Vue Devtools是一款谷歌浏览器插件，专门为调试vue而设计。假设你做了一个vue应用，当你在调试的过程中，打开的控制台是这样的：

满眼都是

data-v

的这种标签，你的组件在什么位置，可能要一个一个标签点开之后找，你的应用的数据是什么状态，可能要靠

console

打印出来，给我们的调试带来了很大的不便。。那有没有什么好办法呢？灯灯灯灯！就是这款Vue Devtools。

安装

打开这个Vue Devtools，然后安装。安装完成后，按F12，然后就发现下面这个多出来的标签：

没错，就是它了，假如在一个vue项目下打开，就会看到：

看到的是组件树,而不是DOM树，旁边还有选中组件的

data

数据,

computed

等，以及组件所在文件夹的路径，一下子就看透了这个组件，是不是觉得豁然开朗😄。

vuex选项卡和time travel

右边除了components组件选项卡，还有vuex选项卡，vuex是vue的核心插件之一，用来管理应用状态。点进去一看，app的状态一目了然有没有：

值得一谈的还有强大的time travel功能，可以看到在调试过程中发生的状态变化，比如在上面这张图中，vuex中有一个

save_diary

的操作，是一个向vuex的store对象的commitMutation,用来保存输入的md字符串。将应用从初始状态到后来的状态都记录了下来。

events

events是用来监视组件的自定义事件的。以我的

todolist

小项目为例，如下图所示：

当我点击buttonA时，comepoent组件的视图由todolist组件变成write组件(官方教程：动态组件)。组件树如下：

由于buttonA属于newitem组件下的，所以通过newitem组件来切换另一个组件的视图。需要自定义一个事件，这里称为

toggleview

事件，代码如下：

template(app.vue文件中监听toggleview事件)

<newitem @toggleview='toggleview'></newitem>

script:(newitem组件触发toggle view事件)

toggle: function() {
this.iswrite = !this.iswrite;
this.$emit('toggleview');
}
//toggle函数由buttonA触发

点击buttonA,看到vue devtools中的events选项发生变化（将newitem组件选中）：

事件面板中标出了事件的来源，事件名，类型等信息。

警察叔叔，事情就是这样的。