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

Brave

关注

发布于: 3 小时前

一，前言

上篇，进行了 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 实现；

发布于: 3 小时前阅读数: 6

Brave

关注

还未添加个人签名 2018.12.13 加入

还未添加个人简介

发布

暂无评论

创作场景

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

一，前言

二，组件使用介绍

1，组件的介绍

2，组件的定义

2.1 全局组件

2.2 局部组件

3，组件的优先级

三，组件初始化流程简介

1，Vue.component API

2，Vue.extend

3，保存组件构造函数

4，组件合并

5，组件合并的策略

6，组件的初渲染和更新

四，结尾

Brave

评论