vue实例挂载过程-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue实例挂载过程。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

以下仅为个人见解。

1.大致流程：

new Vue()时会调用initMixin(Vue)将_init挂载到vue原型上；
在_init()中调用$mount()方法($mount()方法也是挂载到vue原型上的)编译template模版，并生成render()函数；
挂载到vm上后，会再次调用$mount()并返回调用mountComponet()方法，mountComponet中的updateComponent()方法调用vue原型上的render()和update()方法，最后进行页面渲染

2. Vue.prototype._init

主要初始化proxy拦截器，初始化组件事件监听，初始化渲染方法，初始化依赖注入，初始化数据（props/data/method/computed/watch），初始化provide注入，调用$mount()

    // 初始化proxy拦截器
    initProxy(vm)
    // 初始化组件生命周期标志位
    initLifecycle(vm)
    // 初始化组件事件侦听
    initEvents(vm)
    // 初始化渲染方法
    initRender(vm)
    callHook(vm, 'beforeCreate')
    // 初始化依赖注入内容，在初始化data、props之前
    initInjections(vm) // resolve injections before data/props
    // 初始化props/data/method/computed/watch
    initState(vm)
    initProvide(vm) // resolve provide after data/props
    callHook(vm, 'created')

....
 vm.$mount(vm.$options.el)

3. Vue.prototype.$mount()首次调用进行模版编译

1.可以在对象中定义template/render或者直接使用template、el表示元素选择器
2.将template解析ast tree
3.将ast tree转换成render语法字符串
4.生成render方法

template获取过程：

vue实例挂载过程,Vue,前端,vue.js,前端,javascript

4.生成render()函数后，会挂载到vm上，然后再次调用vue原型上的$mount()方法

此次调用会返回mountComponent()

// public mount method
Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  el = el && inBrowser ? query(el) : undefined
  // 渲染组件
  return mountComponent(this, el, hydrating)
}

updateComponent(): mountComponent()中调用updateComponent()执行初始化时原型上的_render和_update()方法

// 定义更新函数
    updateComponent = () => {
      // 实际调⽤是在lifeCycleMixin中定义的_update和renderMixin中定义的_render
      vm._update(vm._render(), hydrating)
    }