【手写 Vue2.x 源码】第三十四篇 - 组件部分-Vue组件与初始化流程简介

一，前言

上篇，进行了diff算法阶段性梳理，主要涉及以下几个点：

初渲染与视图更新流程；
diff 算法的外层更新；
diff 算法的比对优化；
diff 算法的乱序比对；
初渲染和更新渲染判断；

本篇，组件的初始化流程介绍；

二，组件使用介绍

1，组件的介绍

组件源于 WebComponent，即 Web 组件；原生支持自定义标签，但是兼容性不好；

所以，Vue 和 React 实现了一套组件 API；

2，组件的定义

在 vue 中，组件分为"全局组件"和"自定义组件"两种，定义方式如下：

2.1 全局组件

<body><div id="app1"><!-- 可以使用my-button组件 --><my-button></my-button></div><div id="app2"><!-- 可以使用my-button组件 --><my-button></my-button></div><script>Vue.component('my-button',{template:'<button>Hello Vue</button>'})new Vue({el: "#app"});</script>
</body>

全局组件通过 Vue.component('xxx',{...})定义，可在全局范围使用；

2.2 局部组件

<body><div id="app1"><!-- 可以使用 --><my-button></my-button></div><div id="app2"><!-- 不可以使用 --><my-button></my-button></div><script>new Vue({el: "#app1",// 声明局部组件-只能在声明作用域 app1 下使用components:{'my-button':{template:'<button>Hello Vue 局部组件</button>'}}});</script>
</body>

局部组件，只能在声明作用域下被使用；

3，组件的优先级

<body><div id="app"><my-button></my-button></div><script>// 全局组件Vue.component('my-button',{template:'<button>Hello Vue 全局组件</button>'})new Vue({el: "#app",// 局部组件components:{'my-button':{template:'<button>Hello Vue 局部组件</button>'}}});</script>
</body>

同名的全局组件和局部组件同时存在，根据组件查找规则，优先使用局部组件；

相同名称的全局组件和局部组件定义并不会被覆盖，而是会像原型链一样，逐级向上进行查找；

三，组件初始化流程简介

1，Vue.component API

Vue.component 是全局 API；

Vue 初始化时的 initGlobalAPI 方法，会集中处理 Vue Global API

// 方法定义
Vue.component = function (id, definition) {}

2，Vue.extend

在 Vue.component 中，当第二个参数 definition 为对象时，会默认调用 Vue.extend 进行处理；

Vue.extend：使用基础 Vue 构造器，创造一个子类；即组件的构造函数；

3，保存组件构造函数

将组件名与构造函数的映射关系，保存到全局对象 Vue.options.components 中；

备注：全局组件中需要使用全局属性，同时便于后续的组件合并；

4，组件合并

在 Vue 初始化时，_init 方法会进行 mergeOptions 合并选项；

内部通过组件合并策略，完成“全局组件”和“局部组件”的合并；

备注：此时的vm.constructor.options中包含了Vue.options.components

组件的查找规则：优先找自己，找不到通过链上去找父亲；

5，组件合并的策略

模板编译流程：
html 模板 -> AST 语法树 -> render 函数；

在 render 函数中，会通过 _c 即 createElm 处理标签和组件；

createComponent 方法：创造组件虚拟节点 componentVnode

6，组件的初渲染和更新

根据组件的虚拟节点，创建出组件的真实节点；并将组件插入到父元素中；

组件初始化时，会为每个组件创建一个 watcher；

依赖收集:属性收集对应组件渲染的 watcher 记录到 dep 中；

当组件更新时，遍历通知 dep 数组中对应的 watcher 进行组件更新；

四，结尾

本篇，介绍了 Vue 组件与初始化流程，涉及以下几部分：

组件使用介绍：组件定义和优先级；
组件初始化流程介绍：Vue.component、Vue.extend、保存组件构造函数、组件合并、初渲染和更新；

下一篇，Vue.component 实现；

维护日志

20210808：

更新文章标题为“组件部分-Vue组件与初始化流程简介”；
调整“组件初始化流程简介”部分内容：体现组件初始化流程中各主要环节及对应的文章更新计划；

20210813：

修改部分文字和单词拼写错误；