文章首发于集体博客 小灰灰的空间。 新人刚开始写博客记录生存，请多指教
new Vue 过程
Vue 结构器的定义
function Vue (options) { if (process.env.NODE_ENV !== 'production' && !(this instanceof Vue) ) { // 确保只能应用 new 关键字来创立 vue 实例，而不能通过函数的一般调用形式 warn('Vue is a constructor and should be called with the `new` keyword') } // 进行初始化，_init 办法是 Vue 原型上的办法 this._init(options)}初始化办法 _init
Vue.prototype._init = function (options?: Object) { const vm: Component = this // a uid vm._uid = uid++ let startTag, endTag /* istanbul ignore if */ if (process.env.NODE_ENV !== 'production' && config.performance && mark) { startTag = `vue-perf-start:${vm._uid}` endTag = `vue-perf-end:${vm._uid}` mark(startTag) } // a flag to avoid this being observed vm._isVue = true // merge options if (options && options._isComponent) { // optimize internal component instantiation // since dynamic options merging is pretty slow, and none of the // internal component options needs special treatment. // 在初始化子组件时，合并子组件的 options initInternalComponent(vm, options) } else { // 内部调用 new Vue 时合并 options vm.$options = mergeOptions( resolveConstructorOptions(vm.constructor), options || {}, vm ) } /* istanbul ignore else */ if (process.env.NODE_ENV !== 'production') { initProxy(vm) } else { vm._renderProxy = vm } // expose real self vm._self = vm // 申明周期初始化 initLifecycle(vm) // 事件核心初始化 initEvents(vm) // 初始化渲染 initRender(vm) callHook(vm, 'beforeCreate') // 初始化 injections initInjections(vm) // resolve injections before data/props // 初始化 props methods data computed watch initState(vm) // 初始化 provide initProvide(vm) // resolve provide after data/props callHook(vm, 'created') /* istanbul ignore if */ if (process.env.NODE_ENV !== 'production' && config.performance && mark) { vm._name = formatComponentName(vm, false) mark(endTag) measure(`vue ${vm._name} init`, startTag, endTag) } // 如果存在 el 选项，则调用办法挂在元素 if (vm.$options.el) { vm.$mount(vm.$options.el) } }小结
在应用 new Vue 创立 Vue 实例是，调用了原型上的 _init 办法进行初始化。次要就做了一下几件事
- 合并配置
- 初始化生命周期
- 初始化工夫核心
- 初始化渲染
- 初始化 data props computed 等数据
- 最初挂载元素