前言
一般初学者学框架的时候都会选择vue框架,因为vue框架的上手速度比较快,而且vue的语法和小程序的语法很像,而且学习vue后学习uniapp的成本会小很多,当然或许也有可能因为尤雨溪是中国人,其实我当初学vue,就是尤雨溪是中国人,非常崇拜尤大,哈哈,Vue框架在面试的时候也会被经常问到,就像有人说的那样,学不好vue框架,都不好意思说自己是前端。然后只会基本api是不够的,究其原理,还是要去看源码。本篇主要讲述vue2.x源码的初始化流程。
测试代码
本篇的vue2.x的源码解析基于此demo
<!DOCTYPE html>
<html>
<head>
<title>Vue源码剖析</title>
<script src="../../dist/vue.js"></script>
</head>
<body>
<div id="demo">
<h1>初始化流程</h1>
<p>{{foo}}</p>
</div>
<script>
const app = new Vue({
el: '#demo',
data:{foo:'奥利给'}
})
console.log(app.$options.render);
</script>
</body>
</html
正文
打断点,进入代码;
执行构造函数,因为不是生产模式,直接执行this._init(options)
实现_init初始化方法,从这一步开始正式开始执行初始化
export function initMixin (Vue: Class<Component>) {
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.
initInternalComponent(vm, options)
} else {
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) // $parent/$root/...
initEvents(vm)
initRender(vm) // $slots/$createElement
callHook(vm, 'beforeCreate')
initInjections(vm) // resolve injections before data/props
initState(vm) // props/methods/data/computed/watch
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)
}
if (vm.$options.el) {
vm.$mount(vm.$options.el)
}
}
}
用原型链实现_init初始化方法
执行合并选型
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.
initInternalComponent(vm, options)
} else {
vm.$options = mergeOptions(
resolveConstructorOptions(vm.constructor),
options || {},
vm
)
}
进入初始化核心逻辑,这里面包括我们熟悉的自定义监听事件,生命周期,选项式里面的props、methods、data、computed、watch等,从这里面你可以看出是先执行render的
vm._self = vm
initLifecycle(vm) // $parent/$root/...
initEvents(vm)
initRender(vm) // $slots/$createElement
callHook(vm, 'beforeCreate')
initInjections(vm) // resolve injections before data/props
initState(vm) // props/methods/data/computed/watch
initProvide(vm) // resolve provide after data/props
callHook(vm, 'created')
因为我这里面设置了el,所以接下来调用mount
if (vm.$options.el) {
vm.$mount(vm.$options.el)
}
执行扩展$mount
获取选项,并且查找render选项
const options = this.$options
if (!options.render) {
let template = options.template
获取template选项,这里面没有template,所以不执行下面这段代码,看到这里,我想起当初面试千寻的时候面试官问我模板语法是如何解析的,当时候没看过源码,gg了,其实template解析之后对应的就是react里面的render,react的jsx的出现就是嫌虚拟dom太麻烦;
if (!options.render) {
// 获取template选项
let template = options.template
if (template) {
if (typeof template === 'string') {
if (template.charAt(0) === '#') {
template = idToTemplate(template)
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && !template) {
warn(
`Template element not found or is empty: ${options.template}`,
this
)
}
}
} else if (template.nodeType) {
template = template.innerHTML
} else {
if (process.env.NODE_ENV !== 'production') {
warn('invalid template option:' + template, this)
}
return this
}
}
接下来执行创建模板
获取到html模板字符串之后,执行编译过程,把template为render函数;
最后执行挂载, 就结束了,梳理一下,在$mount里面主要步骤是先找render,然后解析templat,最后挂载el。
return mount.call(this, el, hydrating);
结尾
这个也算是自己的处子作吧,后期还会写vue3.x的初始化过程,以及vue2.x和3.x的生命周期源码。才疏学浅,如果有不恰当的地方,还请多多指教。关注我,你在学习编程路上就多了一个朋友,哈哈哈。