背景
Vue.js是现在国内比较火的前端框架,希望通过接下来的一系列文章,能够帮助大家更好的了解Vue.js的实现原理。本次分析的版本是Vue.js2.5.16。(持续更新中。。。)
目录
Vue的实例化
由上一章我们了解了Vue类的定义,本章主要分析用户实例化Vue类之后,Vue.js框架内部做了具体的工作。
举个例子
var demo = new Vue({
el: '#app',
created(){},
mounted(){},
data:{
a: 1,
},
computed:{
b(){
return this.a+1
}
},
methods:{
handleClick(){
++this.a ;
}
},
components:{
'todo-item':{
template: '<li>to do</li>',
mounted(){
}
}
}
})
以上是一个简单的vue实例化的例子,用户通过new的方式创建了一个Vue的实例demo。所以我们先看看Vue的构造函数里面定义了什么方法。
src/core/instance/index.js
这个文件声明了Vue类的构造函数,构造函数中直接调用了实例方法_init来初始化vue的实例,并传入options参数。
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'
// 声明Vue类
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)
}
// 将Vue类传入各种初始化方法
initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)
export default Vue
接下来我们看看这个_init方法具体做了什么事情。
src/core/instance/init.js
这个文件的initMixin方法定义了vue实例方法_init。
Vue.prototype._init = function (options?: Object) {
// this指向Vue的实例,所以这里是将Vue的实例缓存给vm变量
const vm: Component = this
// a uid
// 每一个vm有一个_uid,从0依次叠加
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
// 表示vue实例
vm._isVue = true
// merge options
// 处理传入的参数,并将构造方法上的属性跟传入的属性合并(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 */
// 添加vm的_renderProxy属性,非生产环境ES6的proxy代理,对非法属性获取进行提示
if (process.env.NODE_ENV !== 'production') {
initProxy(vm)
} else {
vm._renderProxy = vm
}
// expose real self
// 添加vm的_self属性
vm._self = vm
// 对vm进行各种初始化
// 将vm自身添加到该vm的父组件的的$children数组中
// 添加vm的$parent,$root,$children,$refs,_watcher,_inactive,_directInactive,_isMounted,_isDestroyed,_isBeingDestroyed属性
// 具体实现在 src/core/instance/lifecycle.js中,代码比较简单,不做展开
initLifecycle(vm)
// 添加vm._events,vm._hasHookEvent属性
initEvents(vm)
// 添加vm._vnode,vm._staticTrees,vm.$vnode,vm.$slots,vm.$scopedSlots,vm._c,vm.$createElement
// 将vm上的$attrs,$listeners 属性设置为响应式的
initRender(vm)
// 触发beforeCreate钩子,如果options中有beforeCreate的回调函数,则会被调用
callHook(vm, 'beforeCreate')
initInjections(vm) // resolve injections before data/props
// 初始化state,包括Props,methods,Data,Computed,watch;
// 这块内容比较核心,所以会在下一章详细讲解,这里先大概描述一下
// 对于prop以及data属性,将其设置为vm的响应式属性,即使用object.defineProperty绑定vm的prop和data属性并设置其getter&setter
// 对于methods,则将每个method都挂载在vm上,并将this指向vm
// 对于Computed,在将其设置为vm的响应式属性之外,还需要定义watcher,用于收集依赖
// watch属性,也是将其设置为watcher实例,收集依赖
initState(vm)
// 初始化provide属性
initProvide(vm) // resolve provide after data/props
// 至此,所有数据的初始化工作已经做完,所有触发created钩子,在这个钩子的回调中可以访问之前所定义的所有数据
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)
}
// 调用vm上的$mount方法
if (vm.$options.el) {
vm.$mount(vm.$options.el)
}
}
接下来分析一下vm上的$mount方法具体做了什么事情
platforms/web/entry-runtime-with-compiler.js
// 缓存Vue.prototype上的$mount方法到变量mount上
const mount = Vue.prototype.$mount
Vue.prototype.$mount = function (
el?: string | Element,
hydrating?: boolean
): Component {
// 获取dom上的元素
el = el && query(el)
/* istanbul ignore if */
if (el === document.body || el === document.documentElement) {
process.env.NODE_ENV !== 'production' && warn(
`Do not mount Vue to <html> or <body> - mount to normal elements instead.`
)
return this
}
const options = this.$options
// resolve template/el and convert to render function
if (!options.render) {
// 获取&生成模板
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
}
} else if (el) {
template = getOuterHTML(el)
}
if (template) {
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
mark('compile')
}
// 根据模板生成相关的render,staticRenderFns方法
// 这块内容涉及的内容比较多,会在后面的其他章节中有详细讲解
const { render, staticRenderFns } = compileToFunctions(template, {
shouldDecodeNewlines,
shouldDecodeNewlinesForHref,
delimiters: options.delimiters,
comments: options.comments
}, this)
// 将render,staticRenderFns方法添加到options上
options.render = render
options.staticRenderFns = staticRenderFns
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
mark('compile end')
measure(`vue ${this._name} compile`, 'compile', 'compile end')
}
}
}
// 调用前面缓存的mount方法
return mount.call(this, el, hydrating)
}
接下来看看缓存的$mount方法的实现
platforms/web/runtime/index.js
Vue.prototype.$mount = function (
el?: string | Element,
hydrating?: boolean
): Component {
// 获取相关的dom元素,执行mountComponent方法
el = el && inBrowser ? query(el) : undefined
return mountComponent(this, el, hydrating)
}
看看mountComponent方法的实现
export function mountComponent (
vm: Component,
el: ?Element,
hydrating?: boolean
): Component {
vm.$el = el
if (!vm.$options.render) {
vm.$options.render = createEmptyVNode
if (process.env.NODE_ENV !== 'production') {
/* istanbul ignore if */
if ((vm.$options.template && vm.$options.template.charAt(0) !== '#') ||
vm.$options.el || el) {
warn(
'You are using the runtime-only build of Vue where the template ' +
'compiler is not available. Either pre-compile the templates into ' +
'render functions, or use the compiler-included build.',
vm
)
} else {
warn(
'Failed to mount component: template or render function not defined.',
vm
)
}
}
}
// 调用beforeMount钩子
callHook(vm, 'beforeMount')
// 设置updateComponent方法
let updateComponent
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
updateComponent = () => {
const name = vm._name
const id = vm._uid
const startTag = `vue-perf-start:${id}`
const endTag = `vue-perf-end:${id}`
mark(startTag)
const vnode = vm._render()
mark(endTag)
measure(`vue ${name} render`, startTag, endTag)
mark(startTag)
vm._update(vnode, hydrating)
mark(endTag)
measure(`vue ${name} patch`, startTag, endTag)
}
} else {
updateComponent = () => {
vm._update(vm._render(), hydrating)
}
}
// we set this to vm._watcher inside the watcher's constructor
// since the watcher's initial patch may call $forceUpdate (e.g. inside child
// component's mounted hook), which relies on vm._watcher being already defined
// 创建watcher对象,具体watch的实现会在下一章详细分析
// 简单描述一下这个过程:初始化这个watcher对象,执行updateComponent方法,收集相关的依赖
// updateComponent的执行过程:
// 先执行vm._render方法,根据之前生成的render方法,生成相关的vnode,也就是virtual dom相关的内容,这个会在后续渲染的章节详细讲解
// 通过生成的vnode,调用vm._update,最终将vnode生成的dom插入到父节点中,完成组件的载入
new Watcher(vm, updateComponent, noop, null, true /* isRenderWatcher */)
hydrating = false
// manually mounted instance, call mounted on self
// mounted is called for render-created child components in its inserted hook
if (vm.$vnode == null) {
vm._isMounted = true
// 调用mounted钩子,在这个钩子的回调函数中可以访问到真是的dom节点,因为在上述过程中已经将真实的dom节点插入到父节点
callHook(vm, 'mounted')
}
return vm
}
OK,以上就是Vue整个实例化的过程,多谢观看&欢迎拍砖。