深刻理解Vue源碼系列-1.從new Vue()開始提及

簡介

這是一個分析vue源碼的系列專欄,爭取用最簡單的文字,解析Vue背後的思想以及設計模式,有不懂的歡迎在下面提問。前置知識包括es6,寫過一些vue的項目或者demo,會搭建vue的開發環境，具體遇到什麼問題,再去解決。

開始

咱們用vue-cli搭建完以後,去入口main.js裏面會看到這樣代碼

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')
複製代碼

這裏的new Vue()就是咱們的起點。咱們知道new Vue()這樣寫，Vue就是個構造函數了，那這個構造函數在哪裏呢? 咱們去node_modules/vue/src/core/instance/index.js裏面能夠找到，找不到的看截圖

打開index.js，我就直接貼源碼了,這裏就聲明瞭一個Vue的函數，再執行了一些mixin函數。

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'

function Vue (options) {
  if (process.env.NODE_ENV !== 'production' &&
    !(this instanceof Vue)
  ) {
    warn('Vue is a constructor and should be called with the `new` keyword')
  }
  this._init(options)
}

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

export default Vue
複製代碼

咱們能夠看到,這裏就聲明瞭一個Vue的構造函數,裏面執行了一個this._init(options)方法,options就是咱們前面new Vue()傳的參數。接着執行一些mixin方法。最後把Vue導出來,很簡單的一部分。你可能疑惑的是this._init()裏面的_init方法是哪裏定義的。這就涉及到們下章講的mixin了。

總結

這裏就聲明一個Vue函數,執行一些mixin.最後導出。