写点什么

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

用户头像
Brave
关注
发布于: 3 小时前
【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 实现;

用户头像

Brave

关注

还未添加个人签名 2018.12.13 加入

还未添加个人简介

评论

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