【VUE源碼調試記錄】Vue的Instance分析

原創

2019-05-01 12:55

不知道以什麼爲突破口，咱也只是個前端小白，那就從Vue的定義開始吧，我要揭開Vue的真面目。首先ctrl + shift + F搜索關鍵詞function Vue( 。找到文件E:\測試項目\vue-dev\src\core\instance\index.js

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'

//定義Vue的實例
function Vue (options) {
  //確認爲生產環境，並且確保Vue是被new出來的
  if (process.env.NODE_ENV !== 'production' &&
    !(this instanceof Vue)
  ) {
    warn('Vue is a constructor and should be called with the `new` keyword')
  }
  //根據option去初始化Vue，此時_init是沒有定義的，是用了下面的initMixin函數去在原型上面添加的
  this._init(options)
}

initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)

export default Vue

上面的代碼簡單的定義了Vue的構造函數，然後就是使用其他函數在Vue的原型上添加一些方法。下面來看看這些函數分別做了哪些事情吧！Ctrl+鼠標左鍵可以直接定位到函數的定義。

一、initMixin

在這個函數中，爲Vue的原型添加一個_init方法。_init方法接收一個options參數，並在函數內部進行了一下幾個操作（我看不懂的直接忽略了喔，我看不懂的操作，那還叫操作嗎？）

1.1 合併Options

if (options && options._isComponent) {
  initInternalComponent(vm, options)
} else {
  vm.$options = mergeOptions(
  resolveConstructorOptions(vm.constructor),options || {},vm)
}

1.2 初始化聲明週期，事件等

initLifecycle(vm)
initEvents(vm)
initRender(vm)
callHook(vm, 'beforeCreate')
initInjections(vm) // resolve injections before data/props
initState(vm)
initProvide(vm) // resolve provide after data/props
callHook(vm, 'created')

1.3 我發現這裏面的細節咱看不懂，也不敢寫。只敢看看每個過程有哪些變量。後面就寫變量，畢竟只認得幾個字母。嗚嗚嗚..