问题来源：时常在思考，vue每个组件实例大体一致，但是组件都是导出的一个组件构造对象，并没有看到组件new Vue成一个实例的一个操作，在Vue中每个组件都是一个vue实例，那么多个vue组件是不是会new Vue多次呢？伴随这个问题我百度了很多，有的说一个vue文件/组件就会new一次，有多少个就new多少次，还有的说vue作为个单页面应用，只new一次...。啊这我到底该听哪个？随着这个答案不确定，还是自己去解答吧！
1、我们可以看到唯一的一次new Vue是在main.js中，在new Vue以后调用的是this._init方法。
//vue初始化
Vue.prototype._init = function (options?: Object) {
//vue实例: 在new Vue函数后的this._init，所以this就是Vue实例
const vm: Component = this
// a uid
//每个vue实例都有一个uid，并且是依次递增的，类似于key避免重复
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
// 处理组件配置项
if (options && options._isComponent) {
/**
* 每个子组件初始化走这里，只做一些性能优化
* 将组件配置项对象的一些深层次属性放到 vue.$options 选项中，以提高代码的执行效率
*/
initInternalComponent(vm, options)
} else {
/**
* 初始化根组件走这里，合并 vue 的全局配置到根组件的局部配置，比如Vue.component 注册的全局组件会合并到 根实例的 components 选项
* 至于每个子组件的选项合并则发生在两个地方：
* 1、Vue.component 方法注册的全局组件在注册时做了选择合并
* 2、{ components: { xx } } 方式注册的局部组件在执行编译器生产的 render 函数进行了选项合并，包括根组件中的 components 配置
* @type {Object}
*/
vm.$options = mergeOptions(
resolveConstructorOptions(vm.constructor), //vm的构造器：Vue函数对象，也就是全局配置对象
options || {}, //vm上的属性
vm
)
}
/* istanbul ignore else */
if (process.env.NODE_ENV !== 'production') {
// 设置代理，将 vm 实例上的属性代理到 vm._renderProxy
initProxy(vm)
} else {
vm._renderProxy = vm
}
// expose real self
vm._self = vm
// 初始化组件实例关系属性，比如 $parent、$children、$root、$refs 等
// 也可以理解为找出组件实例的生命周期所在位置
initLifecycle(vm)
/**
* 初始化自定义事件，这里需要注意一点，所以我们在 <comp @click="handleClick" /> 上注册的事件，监听者不是父组件，
* 而是子组件本身，也就是说事件的派发和监听者都是子组件本身，和父组件无关
*/
initEvents(vm)
// 解析组件的插槽信息，得到 vm.$slot，处理渲染函数，得到 vm.$createElement 方法，即 h 函数
initRender(vm)
// 调用 beforeCreate 钩子函数
callHook(vm, 'beforeCreate')
// 初始化组件的 inject 配置项，得到 result[key] = val 形式的配置对象，然后对结果数据进行响应式处理，并代理每个 key 到 vm 实例
initInjections(vm) // resolve injections before data/props
// 数据响应式的重点，处理 props、methods、data、computed、watch
initState(vm)
// 解析组件配置项上的 provide 对象，将其挂载到 vm._provided 属性上
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)
}
//如果发现配置项有el属性，则自动调用$mount方法，也就是有了el属性就不需要手动调用$mount，反之没有el则必须手动调用$mount
if (vm.$options.el) {
//调用$mount方法，进入挂载阶段
vm.$mount(vm.$options.el)
}
}
组件的属性合并、数据响应式等都是在这个函数里面完成的，那么组件每次导出的都是export default { ...属性 }，那组件是在哪初始化的？
2、为了理解这个问题我试着去找在哪一步有处理子组件的。当分析组件嵌套的生命周期时，我们可以看到子组件开始创建是在父组件beforeMount之后
3、那么推断与render函数有关，于是找到_init函数内的initRender(vm)函数，我们可以看到函数内部得到了$createElement，即h渲染函数。在父组件开始渲染的时候会触发这个$createElement，也就是执行createElement
export function initRender (vm: Component) {
//省略
vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)
//省略
}
4、createElement函数返回一个_createElement，这里就直接贴_createElement的代码了。
export function _createElement (
context: Component,
tag?: string | Class<Component> | Function | Object,
data?: VNodeData,
children?: any,
normalizationType?: number
): VNode | Array<VNode> {
//...省略
let vnode, ns
if (typeof tag === 'string') {
let Ctor
ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)
if (config.isReservedTag(tag)) {
//...省略
} else if ((!data || !data.pre) && isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {
// 仔细看这一步，当判断当前实例有components时，就执行createComponent
vnode = createComponent(Ctor, data, context, children, tag)
} else {
//...省略
}
} else {
// direct component options / constructor
vnode = createComponent(tag, data, context, children)
}
//...省略
}
5、接着往下走，createComponent做了什么操作，主要是以下代码，先拿到baseCtor也就是Vue这个构造函数，然后判断这个子组件export的是不是一个对象，是的话执行Vue.extend把这个子组件的构造对象传入进去
const baseCtor = context.$options._base
// plain options object: turn it into a constructor
if (isObject(Ctor)) {
Ctor = baseCtor.extend(Ctor)
}
6、那么Vue身上的extend是从哪里来的，又做了什么。看以下代码可以看到extedn方法导出了一个Sub构造函数，并且继承自Vue构造函数的，然后最后执行baseCtor.extend等于调用了Sub方法也就是this._init做子组件的初始化创建。
Vue.extend = function (extendOptions: Object): Function {
//...省略
// 定义 Sub 构造函数，和 Vue 构造函数一样
const Sub = function VueComponent (options) {
// 初始化
this._init(options)
}
//...省略
return Sub
}
总结：Vue作为个单页面实际只new了一次，后续组件都是通过this._init创建的实例。所以关于父子组件的生命周期也大体明白，这也是为什么父组件的beforeMount后，就到了子组件的创建环节。
