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 相关文章推荐
JS代码判断IE6,IE7,IE8,IE9的函数代码
Aug 02 Javascript
asm.js使用示例代码
Nov 28 Javascript
jQuery实现简单的点赞效果
May 29 Javascript
jquery实现下拉框左右选择功能
Feb 21 Javascript
JavaScript寄生组合式继承实例详解
Jan 06 Javascript
socket io与vue-cli的结合使用的示例代码
Nov 01 Javascript
微信小程序中weui用法解析
Oct 21 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
Oct 23 Javascript
用Node写一条配置环境的指令
Nov 14 Javascript
深入浅析vue全局环境变量和模式
Apr 28 Javascript
微信小程序实现canvas分享朋友圈海报
Jun 21 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
Dec 16 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 采集获取指定网址的内容
2010/01/05 PHP
php页码形式分页函数支持静态化地址及ajax分页
2014/03/28 PHP
PHP中常见的缓存技术实例分析
2015/09/23 PHP
[企业公众号]升级到[企业微信]之后发送消息失败的解决方法
2017/06/30 PHP
PHP判断函数是否被定义的方法
2019/06/21 PHP
javascript 控制 html元素 显示/隐藏实现代码
2009/09/01 Javascript
js操作select控件的几种方法
2010/06/02 Javascript
jquery常用技巧及常用方法列表集合
2011/04/06 Javascript
js的匿名函数使用介绍
2013/12/11 Javascript
JavaScript利用append添加元素报错的解决方法
2014/07/01 Javascript
javascript实现的一个随机点名功能
2014/08/26 Javascript
Javascript 构造函数详解
2014/10/22 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
2015/11/17 Javascript
关于jquery layui弹出层的使用方法
2018/04/21 jQuery
vue实现多条件和模糊搜索功能
2019/05/28 Javascript
Layui事件监听的实现(表单和数据表格)
2019/10/17 Javascript
简单的python后台管理程序
2017/04/13 Python
利用matplotlib+numpy绘制多种绘图的方法实例
2017/05/03 Python
详解用TensorFlow实现逻辑回归算法
2018/05/02 Python
python交易记录链的实现过程详解
2019/07/03 Python
简单了解django索引的相关知识
2019/07/17 Python
python图形开发GUI库wxpython使用方法详解
2020/02/14 Python
Python基于正则表达式实现计算器功能
2020/07/13 Python
python实现定时发送邮件
2020/12/23 Python
python opencv实现直线检测并测出倾斜角度(附源码+注释)
2020/12/31 Python
爱游人:Travelliker
2017/09/05 全球购物
Ooni英国官网:披萨烤箱
2020/05/31 全球购物
2014年五四青年节演讲稿范文
2014/04/22 职场文书
学雷锋活动总结范文
2014/04/25 职场文书
师德师风自我评价范文
2014/09/11 职场文书
财务科长个人对照检查材料
2014/09/18 职场文书
2014年度个人工作总结
2014/11/07 职场文书
葬礼主持词
2015/07/02 职场文书
Python中使用Lambda函数的5种用法
2021/04/01 Python
详解Spring Security中的HttpBasic登录验证模式
2022/03/17 Java/Android
解决MySQL报“too many connections“错误
2022/04/19 MySQL