【Vue2.x 源码学习】第三十四篇 - 组件部分 -Vue 组件与初始化流程简介
一,前言
上篇,进行了 diff 算法阶段性梳理,主要涉及以下几个点:
初渲染与视图更新流程;
diff 算法的外层更新;
diff 算法的比对优化;
diff 算法的乱序比对;
初渲染和更新渲染判断;
本篇,组件的初始化流程介绍;
二,组件使用介绍
1,组件的介绍
组件源于 WebComponent,即 Web 组件;原生支持自定义标签,但是兼容性不好;
所以,Vue 和 React 实现了一套组件 API;
2,组件的定义
在 vue 中,组件分为"全局组件"和"自定义组件"两种,定义方式如下:
2.1 全局组件
全局组件通过 Vue.component('xxx',{...})
定义,可在全局范围使用;
2.2 局部组件
局部组件,只能在声明作用域下被使用;
3,组件的优先级
同名的全局组件和局部组件同时存在,根据组件查找规则,优先使用局部组件;
相同名称的全局组件和局部组件定义并不会被覆盖,而是会像原型链一样,逐级向上进行查找;
三,组件初始化流程简介
1,Vue.component API
Vue.component 是全局 API;
Vue 初始化时的 initGlobalAPI 方法,会集中处理 Vue Global API
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 实现;
评论