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

複製代碼