文章首发于个人博客 小灰灰的空间。 新人刚开始写博客记录生活,请多指教
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 等数据
- 最后挂载元素
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。