vue原始碼解讀-建構函式

wolfzwz發表於2018-11-20
Vue原始碼函式

src/core/instance/index.js
此檔案主要實現了Vue初始化

// 引入模組
import { initMixin } from `./init`
import { stateMixin } from `./state`
import { renderMixin } from `./render`
import { eventsMixin } from `./events`
import { lifecycleMixin } from `./lifecycle`
import { warn } from `../util/index`
// 什麼時候需要把程式碼放到util包呢，個人感覺如果程式碼能夠複用而且脫離專案能夠應用到另一個專案可以考慮放到util
/*
    建構函式 大家在這裡可能會覺得，既然選擇打包工具，那為啥不選擇class呢，應該是和後邊需要定義Vue靜態方法和屬性有關，
    es6語法暫不支援對靜態屬性的定義
*/
function Vue (options) {
  // this instanceof Vue 可以判斷函式是不是 new關鍵字呼叫
  if (process.env.NODE_ENV !== `production` &&
    !(this instanceof Vue)
  ) {
    // 封裝好的警告方法 console.warn();
    warn(`Vue is a constructor and should be called with the `new` keyword`)
  }
  // 呼叫初始化方法
  this._init(options)
}

/* 
  Mixin 混入的意思在這裡大家可以理解成擴充套件
  以下方法在vue prototype 中擴充套件方法
  這裡通過不同的函式來給vue prototye新增不同的功能,
  這種程式碼拆分思想很值得借鑑，尤其是在寫複雜邏輯，
  將複雜邏輯拆分成不同的功能，這樣程式碼清晰方便維護
*/
// Vue 初始化 簡言之就是 合併配置，初始化生命週期，初始化事件中心，初始化渲染，初始化 data、props、computed、watcher 
initMixin(Vue)
// 在這裡state可以理解為 在vue原型vue.prototype擴充套件了vue例項中$date,$props,$set,$delete,$watch
stateMixin(Vue)
// 對事件的擴充套件 包括$on,$once,$emit,$off 應用的設計模式為觀察者模式
eventsMixin(Vue)
/* 
擴充套件生命週期方法
Vue.prototype._update 
Vue.prototype.$forceUpdate 強制更新
Vue.prototype.$destroy  銷燬
*/
lifecycleMixin(Vue)
/* 
Vue.prototype.$nextTick = function (fn: Function) {}
Vue.prototype._render = function (): VNode {}
*/
renderMixin(Vue)

export default Vue

相關文章