記錄下研讀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 沒用過，，，