Vue原始碼解析

jimwmg發表於2018-03-05
Vue原始碼

系列文章連結
主要記錄自己開始學習Vue的一些原始碼閱讀：基於2.5.8版本

Vue-SourceCode 介紹了

  • Vue建構函式如何來的，以及其上的屬性/方法/原型方法/靜態方法
  • new Vue(options)的過程發生了什麼
  • vnode物件如何生成
  • vnode物件如何掛載到真實的DOM節點
  • …..

VueRouter-SourceCode介紹了

  • VueRouter的插入，VueRouter的使用，VueRouter例項的生成
  • VueRouter例項物件上的matcher和history物件的建立
  • VueRouter中的Vue元件RouterLink和RouterView的原始碼實現

Vuex-SourceCode介紹了

  • Vuex的插入，Vuex的使用，Vuex.Store的例項生成
  • Vuex例項生成：ModuleCollection installModule resetStoreVM等核心建立store例項的時候實現
  • Vuex物件中的輔助函式 mapGetters. mapActions等的原始碼實現
  • Vuex.Store生成的例項物件commit(同步)和dispatch(非同步)的原始碼實現與區別

對比VueRouter和Vuex

  • new VueRouter(options). new Vuex.Store(options) 中的options都支援route巢狀和module巢狀
  • route的巢狀，無論主路由還是子路由，都對映到了matcher物件上
  • module的巢狀，無論主模組還是子模組，actions getters mutations都對映到了store物件上，所以後面在任何子元件中都可以通過輔助函式得到modules中的getters actions mutations等
  • router-view元件根據matcher匹配到的元件進行渲染對應的元件
  • 輔助函式可以在各個元件中獲取到store例項物件上的actions. getters. mutations等；

相關文章