Vue源码解读之Component组件注册的实现


Posted in Javascript onAugust 24, 2018

什么是组件?

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。

所有的 Vue 组件同时也都是 Vue 的实例,所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。

Vue可以有全局注册和局部注册两种方式来注册组件。

全局注册

注册方式

全局注册有以下两种注册方式:

通过Vue.component 直接注册。

Vue.component('button-counter', {
    //data选项必须是一个函数
    data: function () {
      return {
        count: 0
      }
    },
    template:'#clickBtn'
  })

通过Vue.extend来注册。

var buttonComponent = Vue.extend({
    name:'button-counter',
    data: function () {
      return {
        count: 0
      }
    },
    template:'#clickBtn'
  });
 Vue.component('button-counter', buttonComponent);

具体过程

Vue初始化时,initGlobalAPI通过调用initAssetRegisters()进行组件注册。

function initAssetRegisters (Vue) {
 // 创建组件注册的方法
 // ASSET_TYPES在Vue内部定义,var ASSET_TYPES = ['component','directive','filter'];
 ASSET_TYPES.forEach(function (type) {
  Vue[type] = function (
   id,
   definition
  ) {
   //这里的definition指的是定义(Function或Object),是函数或者对象
   //如果definition不存在,直接返回options内type和id对应的
   //这里的options是指全局的组件,指令和过滤器,见图一
   if (!definition) {
    return this.options[type + 's'][id]
   } else {
    /* istanbul ignore if */
    if ("development" !== 'production' && type === 'component') {
     validateComponentName(id);
    }
    // 如果是component(组件)方法,并且definition是对象
    if (type === 'component' && isPlainObject(definition)) {
     definition.name = definition.name || id;
     //通过this.options._base.extend方法(也就是Vue.extend方法)将定义对象转化为构造器。
     //Vue.options._base = Vue;
     definition = this.options._base.extend(definition);
    }
    if (type === 'directive' && typeof definition === 'function') {
     definition = { bind: definition, update: definition };
    }
    // 将构造器赋值给 this.options[‘component'+ 's'][id]
    //全局的组件,指令和过滤器,统一挂在vue.options上。在init的时候利用mergeOptions合并策略侵入实例,供实例使用。
    this.options[type + 's'][id] = definition;
    return definition
   }
  };
 });
}

图一:

Vue源码解读之Component组件注册的实现

initAssetRegisters里面通过this.options._base.extend方法将定义对象转化为构造器,而options._base.extend其实就是Vue.extend。接下来我们就看一下Vue.extend做了什么。

Vue.extend = function (extendOptions) {
  extendOptions = extendOptions || {};
  var Super = this;
  var SuperId = Super.cid;
  //组件缓存
  var cachedCtors = extendOptions._Ctor || (extendOptions._Ctor = {});
  //如果组件已经被缓存在extendOptions上则直接取出
  if (cachedCtors[SuperId]) {
   return cachedCtors[SuperId]
  }

  //如果有name属性,检验name拼写是否合法
  var name = extendOptions.name || Super.options.name;
  if ("development" !== 'production' && name) {
   validateComponentName(name);
  }

  var Sub = function VueComponent (options) {
   this._init(options);
  };
  //将vue上原型的方法挂在Sub.prototype中,Sub的实例同时也继承了vue.prototype上的所有属性和方法。
  //关于 prototype的学习:http://www.cnblogs.com/dolphinX/p/3286177.html
  Sub.prototype = Object.create(Super.prototype);
  //Sub构造函数修正,学习于https://www.cnblogs.com/SheilaSun/p/4397918.html
  Sub.prototype.constructor = Sub;
  Sub.cid = cid++;
  //通过vue的合并策略合并添加项到新的构造器上
  Sub.options = mergeOptions(
   Super.options,
   extendOptions
  );
  //缓存父构造器
  Sub['super'] = Super;

  // 处理props和computed响应式配置项
  if (Sub.options.props) {
   initProps$1(Sub);
  }
  if (Sub.options.computed) {
   initComputed$1(Sub);
  }

  // allow further extension/mixin/plugin usage
  Sub.extend = Super.extend;
  Sub.mixin = Super.mixin;
  Sub.use = Super.use;

  //在新的构造器上挂上vue的工具方法
  ASSET_TYPES.forEach(function (type) {
   Sub[type] = Super[type];
  });
  // enable recursive self-lookup
  if (name) {
   Sub.options.components[name] = Sub;
  }

  // keep a reference to the super options at extension time.
  // later at instantiation we can check if Super's options have
  // been updated.
  Sub.superOptions = Super.options;
  Sub.extendOptions = extendOptions;
  Sub.sealedOptions = extend({}, Sub.options);

  //缓存组件构造器在extendOptions上
  cachedCtors[SuperId] = Sub;
  return Sub
 };

vue.extend返回了一个带有附加Option的vue构造器。这个构造器被命名为Sub,等待render时候初始化。

initAssetRegisters完成之后,options下挂载了全局组件button-counter,如图:

Vue源码解读之Component组件注册的实现

接下来调用new Vue()渲染vue整体的生命周期

局部注册

如果不需要全局注册,或者是让组件使用在其它组件内,可以用选项对象的components属性实现局部注册。

注册方式

new Vue({
    el: '#components-demo',
    components:{
      'button-counter':{
        template:'#clickBtn',
        data: function () {
          return {
            count: 0
          }
        }
      }
    }
  })

具体过程

Vue局部组件注册也是通过initAssetRegisters()方法调用Vue.extend,不同的是在createComponent()时,initMixin()里面有判断

if (options && options._isComponent) {
   //因为Vue动态合并策略非常慢,并且内部组件的选项都不需要特殊处理。
   //调用initInternalComponent快捷方法,内部组件实例化。
   initInternalComponent(vm, options);
 }
 else {
   vm.$options = mergeOptions(
    resolveConstructorOptions(vm.constructor),
    options || {},
    vm
   );
  }
function initInternalComponent (vm, options) {
 var opts = vm.$options = Object.create(vm.constructor.options);
 // 这样做是因为它比动态枚举更快。
 var parentVnode = options._parentVnode;
 opts.parent = options.parent;
 opts._parentVnode = parentVnode;

 var vnodeComponentOptions = parentVnode.componentOptions;
 opts.propsData = vnodeComponentOptions.propsData;
 opts._parentListeners = vnodeComponentOptions.listeners;
 opts._renderChildren = vnodeComponentOptions.children;
 opts._componentTag = vnodeComponentOptions.tag;

 if (options.render) {
  opts.render = options.render;
  opts.staticRenderFns = options.staticRenderFns;
 }
}

opts的结构如图所示:

Vue源码解读之Component组件注册的实现

局部注册和全局注册不同的是,只有该类型的组件才可以访问局部注册的子组件,而全局注册是扩展到 Vue.options 下。在所有组件创建的过程中,都会从全局的 Vue.options.components 扩展到当前组件的 vm.$options.components 下,这就是全局注册的组件能被任意使用的原因。

组件名定义

定义组件名的方式有两种:

使用短横线形式

Vue.component('button-counter', {})

引用这个自定义元素时,必须用 <button-counter></button-counter>

使用驼峰的形式

Vue.component('buttonCounter', { })

此时在引用这个自定义元素时,两种命名方法都可以使用。也就是说,<buttonCounter><button-counter> 都是可行的。

注意,直接在 DOM (即非字符串的模板) 中使用时只有短横线是有效的。如下:

<div id="components-demo">
    <button-counter></button-counter>
</div>

可参考:https://3water.com/article/144050.htm

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery1.4.2的仿flash超炫焦点图播放效果
Apr 20 Javascript
javascript 延迟加载技术(lazyload)简单实现
Jan 17 Javascript
扩展JS Date对象时间格式化功能的小例子
Dec 02 Javascript
angularjs的一些优化小技巧
Dec 06 Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
May 20 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
Dec 25 Javascript
如何写好你的JavaScript【推荐】
Mar 02 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
Apr 21 Javascript
HTML5开发Kinect体感游戏的实例应用
Sep 18 Javascript
Vue Element使用icon图标教程详解(第三方)
Feb 07 Javascript
详解Vue、element-ui、axios实现省市区三级联动
May 07 Javascript
layer.alert回调函数执行关闭弹窗的实例
Sep 11 Javascript
element-ui 关于获取select 的label值方法
Aug 24 #Javascript
微信小程序用户信息encryptedData详解
Aug 24 #Javascript
element-ui 中的table的列隐藏问题解决
Aug 24 #Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
Aug 24 #Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
Aug 24 #Javascript
element-ui 表格数据时间格式化的方法
Aug 24 #Javascript
vue select选择框数据变化监听方法
Aug 24 #Javascript
You might like
配置php网页显示各种语法错误
2013/09/23 PHP
PHP采用自定义函数实现遍历目录下所有文件的方法
2014/08/19 PHP
php实现将字符串按照指定距离进行分割的方法
2015/03/14 PHP
详解WordPress开发中过滤属性以及Sql语句的函数使用
2015/12/25 PHP
PHP实现查询手机归属地的方法详解
2017/04/28 PHP
PHP中危险的file_put_contents函数详解
2017/11/04 PHP
网页禁用右键实现代码(JavaScript代码)
2009/10/29 Javascript
js获取判断上传文件后缀名的示例代码
2014/02/19 Javascript
js 判断浏览器使用的语言示例代码
2014/03/22 Javascript
js实现汉字排序的方法
2015/07/23 Javascript
创建一个类Person的简单实例
2016/05/17 Javascript
简单掌握JavaScript中const声明常量与变量的用法
2016/05/21 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
2016/06/16 Javascript
JS获取及验证开始结束日期的方法
2016/08/20 Javascript
微信小程序  自定义创建详细介绍
2016/10/27 Javascript
很棒的一组js图片轮播特效
2017/01/12 Javascript
jquery实现手机端单店铺购物车结算删除功能
2017/02/22 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
2017/05/17 Javascript
Angular实现的简单查询天气预报功能示例
2017/12/27 Javascript
js数组去重的N种方法(小结)
2018/06/07 Javascript
vue之延时刷新实例
2019/11/14 Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
2020/12/14 Vue.js
Linux中安装Python的交互式解释器IPython的教程
2016/06/13 Python
Python中死锁的形成示例及死锁情况的防止
2016/06/14 Python
Python编写简单的HTML页面合并脚本
2016/07/11 Python
Python实现PS图像调整黑白效果示例
2018/01/25 Python
浅谈python常用程序算法
2019/03/22 Python
django迁移数据库错误问题解决
2019/07/29 Python
浅谈CSS3动画的回调处理
2016/07/21 HTML / CSS
我们没有写servlet的构造方法,那么容器是怎么创建servlet的实例呢
2013/04/24 面试题
俄罗斯商务邀请函
2014/01/26 职场文书
协议书与合同的区别
2014/04/18 职场文书
党旗在我心中演讲稿
2014/09/15 职场文书
幼儿园教师考核评语
2014/12/31 职场文书
2019垃圾分类宣传口号汇总
2019/08/16 职场文书
MySQL非空约束(not null)案例讲解
2021/08/23 MySQL