简介
这是一个分析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里面可以找到,找不到的看截图
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.最后导出。