记录下研读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 没用过,,,