vue-devtools开发工具源码浅析

记录下研读vue-devtools源码的成果

开发者工具是如何从浏览器获取vue组件的相关状态

代码在packages\app-backend-core\src\legacy\scan.ts
简单点说从document开始往下遍历子元素，如果子元素有__vue__,那么就是vue组件绑定的dom元素，__vue__就是vue的组件实例。

这个就很有用了，对于只有线上出现的问题，不能用vue-devtools看vue实例的情况，可以通过document.querySelector('#app').vue
看到vue实例信息了。或者直接用开发者工具看。

组件之间的关系怎么关联起来的

代码在packages\app-backend-vue2\src\components\tree.ts
简单点说上一步获得了最外层的app实例，然后通过vue实例的$children属性递归获取子组件

组件的所有信息怎么获取

代码在packages\app-backend-vue2\src\components\data.ts
核心方法是getInstanceState
简单点说data取的_data，
props取的$options.props，
$refs取的$refs，
computed取的$options.computed，
inject取的$options.inject，
route取的$route，
vuex的getters取的$options.vuex.getters，
Firebase取的$firebaseRefs 没用过，，，
vue-rx取的$observables 没用过，，，