mount函数C语言代码,vue源码分析（十三）核心函数之$mount

接着上一篇 vue源码分析(五)new Vue()之后发生了什么(第一篇),我们来看vm.$mount(vm.$options.el)里面做了哪些操作，“$mount”函数里面主要是调用了“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

)

}

}

}

callHook(vm, 'beforeMount') // 触发了“beforeMount'”生命周期

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

new Watcher(vm, updateComponent, noop, {

before () {

if (vm._isMounted && !vm._isDestroyed) {

callHook(vm, 'beforeUpdate')

}

}

}, 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

callHook(vm, 'mounted')

}

return vm

}

我们一步一步来分析首先判断了一下有没有render属性，if (!vm.$options.render)如果没有的话会调用createEmptyVNode函数创建一个空节点，紧接着触发了“beforeMount'”生命周期，“callHook(vm, 'beforeMount')”。

接下又实例化了一个 Watcher对象。

new Watcher(vm, updateComponent, noop, {

before () {

if (vm._isMounted && !vm._isDestroyed) {

callHook(vm, 'beforeUpdate')

}

}

}, true /* isRenderWatcher */)

具体的可以看 vue源码分析(十五)核心函数之Watcher ，最后 vm.$vnode == null 就是所有组件(包括子组件)都加载完了，就触发“mounted'”生命周期。