Vue实例挂载

Fri, 04 Oct 2024 00:00:00 +0800

一、思考

我们都听过知其然知其所以然这句话

那么不知道大家是否思考过new Vue()这个过程中究竟做了些什么？

过程中是如何完成数据的绑定，又是如何将数据渲染到视图的等等

一、分析

首先找到vue的构造函数

源码位置：src\core\instance\index.js

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

options是用户传递过来的配置项，如data、methods等常用的方法

vue构建函数调用_init方法，但我们发现本文件中并没有此方法，但仔细可以看到文件下方定定义了很多初始化方法

initMixin(Vue); // 定义 _init
stateMixin(Vue); // 定义 $set $get $delete $watch 等
eventsMixin(Vue); // 定义事件 $on $once $off $emit
lifecycleMixin(Vue);// 定义 _update $forceUpdate $destroy
renderMixin(Vue); // 定义 _render 返回虚拟dom

首先可以看initMixin方法，发现该方法在Vue原型上定义了_init方法

源码位置：src\core\instance\init.js

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
 // 合并属性，判断初始化的是否是组件，这里合并主要是 mixins 或 extends 的方法
 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 { // 合并vue属性
 vm.$options = mergeOptions(
 resolveConstructorOptions(vm.constructor),
 options || {},
 vm
 )
 }
 /* istanbul ignore else */
 if (process.env.NODE_ENV !== 'production') {
 // 初始化proxy拦截器
 initProxy(vm)
 } else {
 vm._renderProxy = vm
 }
 // expose real self
 vm._self = vm
 // 初始化组件生命周期标志位
 initLifecycle(vm)
 // 初始化组件事件侦听
 initEvents(vm)
 // 初始化渲染方法
 initRender(vm)
 callHook(vm, 'beforeCreate')
 // 初始化依赖注入内容，在初始化data、props之前
 initInjections(vm) // resolve injections before data/props
 // 初始化props/data/method/watch/methods
 initState(vm)
 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)
 }
 }

仔细阅读上面的代码，我们得到以下结论：

Vue实例挂载 on Last Stand

Vue实例挂载

一、思考

一、分析