深入理解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.最后导出。

转载于:https://juejin.im/post/5c75391af265da2deb6ab4c9