一，前言
上篇，组件部分-生成组件的真实节点；
本篇，组件部分-组件挂载流程分析；
二，组件挂载流程分析
1，示例
- 全局组件：my-button，name：‘全局组件’；
- 局部组件：my-button；name：‘局部组件’；
<body>
<div id="app">
<my-button></my-button>
</div>
<script src="./vue.js"></script>
<script>
// 全局组件
Vue.component('my-button',{
name:'my-button',
template:'<button>Hello Vue {
{name}}</button>',
data(){
return {
name: '全局组件'}
}
})
new Vue({
el: "#app",
components:{
// 局部组件
'my-button':{
template:'<button>Hello Vue {
{name}}</button>',
data(){
return {
name: '局部组件'}
}
}
}
});
</script>
2，组件的挂载流程
// src/init.js
export function initMixin(Vue) {
// 初始化
Vue.prototype._init = function (options) {
const vm = this;
vm.$options = mergeOptions(vm.constructor.options, options);
initState(vm);
if (vm.$options.el) {
vm.$mount(vm.$options.el)
}
}
Vue.prototype.$mount = function (el) {
const vm = this;
const opts = vm.$options;
el = document.querySelector(el);
vm.$el = el;
if (!opts.render) {
let template = opts.template;
if (!template) {
template = el.outerHTML;
}
let render = compileToFunction(template);
opts.render = render;
}
mountComponent(vm);
}
Vue.prototype.$nextTick = nextTick;
}
第一次进入，为根节点初始化，el 为 #app；
第二次进入，组件的初始化，el 为 undefined；
-
继续，进行组件的挂载操作 mountComponent：
-
组件的挂载：核心是创造出一个组件的虚拟节点，并调用他的更新方法 _update：
-
render.call 创造组件的虚拟节点 vnode，即 button 的虚拟节点：
-
vm.render 执行完成后，继续执行 _update 方法：
-
这时，不能获取到上一次的虚拟节点：
-
当组件挂载时，$patch 方法中的 el 为 null；
-
此时，patch 内部判断了，如果 oldVnode 为 null，就使用组件的虚拟节点，创建出组件的真实节点：
-
此时，返回的 vm.$el 就是 button 内部包含着内容：
此时，子组件就挂载完毕了！
-
vnode.componentInstance存在，说明是组件，createComponent 方法返回 true：
-
createElm 方法中，返回组件的 $el，即组件对应的真实节点 button：
-
createElm 递归处理，将生成的组件真实节点，放到对应的父节点上；
-
再将完整的 div 挂在到页面上
三，完成流程
1，实现了 Vue.component，它的核心功能是注册成全局组件；
内部会自动调用 Vue.extend 方法，返回组件的构造函数；
2，在组件初始化时，会做组件的合并；
mergeOptions 先找自己的局部组件，然后再通过链继续向上找全局组件；
3，合并完成之后，内部会对模板进行编译操作，最终会走到_c（‘组件名’）
做标签筛查，创建组件虚拟节点；若 Ctor 为对象，需要使用 Vue.extend 处理为组件的构造函数；
所以，所有的组件都是通过 Vue.extend 方法来实现的；
4，创建组件的真实节点
- 通过 new Ctor 得到组件实例；
- 组件实例调用 $mount 方法：生成组件的真实节点 $el，对应组件模板渲染后的结果
- 通过 vnode.componentInstance = new Ctor() 使后面可以拿到组件渲染后的结果： vnode.componentInstance.$el
5，将组件的 vnode.componentInstance.$el 插入到父标签中
6， 在 new Ctor() 组件实例化时，会执行组件初始化流程，为组件添加独立的渲染过程；
- 每个组件实例都拥有独立的渲染 watcher；
- 当组件渲染时，组件对应的属性会收集自己的渲染 watcher；
- 当组件更新时，只需更新组件对应的渲染 watcher 即可；
- 所以，组件是局部更新的，性能也会比较好
四，结尾
本篇，组件部分-组件挂载流程简述；
下篇，组件部分-组件相关流程总结；
备注：还需要添加很多图，后续迭代。。。
转载：https://blog.csdn.net/ABAP_Brave/article/details/128757972