【手写 Vue2.x 源码】第三十四篇 - 组件部分-Vue组件与初始化流程简介
| 阿里云国内75折 回扣 微信号：monov8 |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
一前言
上篇进行了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>
同名的全局组件和局部组件同时存在根据组件查找规则优先使用局部组件；
相同名称的全局组件和局部组件定义并不会被覆盖而是会像原型链一样逐级向上进行查找；
三组件初始化流程简介
1Vue.component API
Vue.component 是全局 API；
Vue 初始化时的 initGlobalAPI 方法会集中处理 Vue Global API
// 方法定义
Vue.component = function (id, definition) {}
2Vue.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：
- 修改部分文字和单词拼写错误；