Vue如何实现组件的源码解析
作者:娜姐聊前端 发布时间:2024-05-09 15:21:19
标签:Vue,组件
官网上关于组件继承分为两大类,全局组件和局部组件。无论哪种方式,最核心的是创建组件,然后根据场景不同注册组件。
有一点要牢记,“Vue.js 组件其实都是被扩展的 Vue 实例”!
1. 全局组件
// 方式一
var MyComponent = Vue.extend({
name: 'my-component',
template: '<div>A custom component!</div>'
});
Vue.component('my-component', MyComponent);
// 方式二
Vue.component('my-component', {
name: 'my-component',
template: '<div>A custom component!</div>'
});
// 使用组件
<div id="example">
<my-component></my-component>
</div>
主要涉及到两个静态方法:
Vue.extend
:通过扩展Vue实例的方法创建组件Vue.component
:注册组件
先来看看Vue.extend
源码,解释参考中文注释:
Vue.extend = function (extendOptions) {
extendOptions = extendOptions || {};
var Super = this;
var isFirstExtend = Super.cid === 0;
if (isFirstExtend && extendOptions._Ctor) {
return extendOptions._Ctor;
}
var name = extendOptions.name || Super.options.name;
// 如果有name属性,即组件名称,检测name拼写是否合法
if ('development' !== 'production') {
if (!/^[a-zA-Z][\w-]*$/.test(name)) {
warn('Invalid component name: "' + name + '". Component names ' + 'can only contain alphanumeric characaters and the hyphen.');
name = null;
}
}
// 创建一个VueComponent 构造函数,函数名为‘VueComponent'或者name
var Sub = createClass(name || 'VueComponent');
// 构造函数原型继承Vue.prototype
Sub.prototype = Object.create(Super.prototype);
Sub.prototype.constructor = Sub;
Sub.cid = cid++;
// 合并Vue.options和extendOptions,作为新构造函数的静态属性options
Sub.options = mergeOptions(Super.options, extendOptions);
//'super'静态属性指向Vue函数
Sub['super'] = Super;
// start-----------------拷贝Vue静态方法
// allow further extension
Sub.extend = Super.extend;
// create asset registers, so extended classes
// can have their private assets too.
config._assetTypes.forEach(function (type) {
Sub[type] = Super[type];
});
// end-----------------拷贝Vue静态方法
// enable recursive self-lookup
if (name) {
Sub.options.components[name] = Sub;
}
// cache constructor:缓存该构造函数
if (isFirstExtend) {
extendOptions._Ctor = Sub;
}
return Sub;
};
可以看到,Vue.extend
的关键点在于:创建一个构造函数function VueComponent(options) { this._init(options) },
通过原型链继承Vue原型上的属性和方法,再讲Vue的静态函数赋值给该构造函数。
再看看Vue.component
源码,解释参考中文注释:
// _assetTypes: ['component', 'directive', 'elementDirective', 'filter', 'transition', 'partial']
config._assetTypes.forEach(function (type) {
// 静态方法Vue.component
Vue[type] = function (id, definition) {
if (!definition) {
return this.options[type + 's'][id];
} else {
/* istanbul ignore if */
if ('development' !== 'production') {
if (type === 'component' && (commonTagRE.test(id) || reservedTagRE.test(id))) {
warn('Do not use built-in or reserved HTML elements as component ' + 'id: ' + id);
}
}
// 如果第二个参数是简单对象,则需要通过Vue.extend创建组件构造函数
if (type === 'component' && isPlainObject(definition)) {
if (!definition.name) {
definition.name = id;
}
definition = Vue.extend(definition);
}
// 将组件函数加入Vue静态属性options.components中,也就是,全局注入该组件
this.options[type + 's'][id] = definition;
return definition;
}
};
});
方法Vue.component
的关键点是,将组件函数注入到Vue静态属性中,这样可以根据组件名称找到对应的构造函数,从而创建组件实例。
2. 局部组件
var MyComponent = Vue.extend({
template: '<div>A custom component!</div>'
});
new Vue({
el: '#example',
components: {
'my-component': MyComponent,
'other-component': {
template: '<div>A custom component!</div>'
}
}
});
注册局部组件的特点就是在创建Vue实例的时候,定义components
属性,该属性是一个简单对象,key值为组件名称,value可以是具体的组件函数,或者创建组件必须的options对象。
来看看Vue如何解析components
属性,解释参考中文注释:
Vue.prototype._init = function (options) {
options = options || {};
....
// merge options.
options = this.$options = mergeOptions(this.constructor.options, options, this);
...
};
function mergeOptions(parent, child, vm) {
//解析components属性
guardComponents(child);
guardProps(child);
...
}
function guardComponents(options) {
if (options.components) {
// 将对象转为数组
var components = options.components = guardArrayAssets(options.components);
//ids数组包含组件名
var ids = Object.keys(components);
var def;
if ('development' !== 'production') {
var map = options._componentNameMap = {};
}
// 遍历组件数组
for (var i = 0, l = ids.length; i < l; i++) {
var key = ids[i];
if (commonTagRE.test(key) || reservedTagRE.test(key)) {
'development' !== 'production' && warn('Do not use built-in or reserved HTML elements as component ' + 'id: ' + key);
continue;
}
// record a all lowercase <-> kebab-case mapping for
// possible custom element case error warning
if ('development' !== 'production') {
map[key.replace(/-/g, '').toLowerCase()] = hyphenate(key);
}
def = components[key];
// 如果是组件定义是简单对象-对象字面量,那么需要根据该对象创建组件函数
if (isPlainObject(def)) {
components[key] = Vue.extend(def);
}
}
}
}
在创建Vue实例过程中,经过guardComponents()函数处理之后,能够保证该Vue实例中的components属性,都是由{组件名:组件函数}
构成的,这样在后续使用时,可以直接利用实例内部的组件构建函数创建组件实例。
来源:http://www.jianshu.com/p/d667d27c10df#


猜你喜欢
- 距上篇关于淘宝抢购源码的文章已经过去五个月了,五个月来我通过不停的学习,掌握了更深层的抢购技术及原理,而上篇文章中我仅分享了关于加入购物车的
- 这里列出了javascript 中的document.execCommand() 的各种参数说明:2D-Position 允许通过
- PDO::errorInfoPDO::errorCode — 返回最后一次操作数据库的错误信息(PHP 5 >= 5.1.0, PEC
- 偶然在网上发现itchat这个框架,itchat是一个开源的微信个人号接口,它使python调用微信变得非常简单。看到网上有人发自己微信好友
- '************************************* '检测是否只包含英文和数
- 写在前面的话关于《交互设计实用指南》,我们最近收到很多朋友的反馈,有支持的也有批评的,在此一并感谢了,有你们的关注,我们才能走得更远。《交互
- 问题描述尝试用Python写一个Wordcloud的时候,出现了编码问题。照着网上某些博客的说法添添改改后,结果是变成了“UnicodeDe
- 1、引言通过参考相关博客对hdf5格式简要介绍。hdf5在存储的是支持压缩,使用的方式是blosc,这个是速度最快的也是pandas默认支持
- 本文实例讲述了Python使用scrapy采集数据时为每个请求随机分配user-agent的方法。分享给大家供大家参考。具体分析如下:通过这
- AJAX 客户端页面代码: index.html <html> <body> <h1>Ajax file
- 介绍观察者模式:是一种行为型设计模式。主要关注的是对象的责任,允许你定义一种订阅机制,可在对象事件发生时通知多个"观察"
- 使用pandas读xlsx文件读取前n行数据读取指定数据(指定行指定列)获取文件行号和列标题将数据转换为字典形式import pandas
- 我们目前生活在Python 3.8的稳定时代,上周发布了Python的最新稳定版本3.8.4。 Python 3.9已经处于其开发的beta
- 分享人:月漓作为交互设计师,你是否在一个项目中花费大量的时间来沟通、修改、明确需求?其实这些前期工作(设计原型前)是我们和PD、运营、开发之
- 题目描述1046. 最后一块石头的重量 - 力扣(LeetCode)有一堆石头,每块石头的重量都是正整数。每一回合,从中选出两块 最重的 石
- 前言之前我们在路由匹配的时候,一个url对应一个函数,其实我们还可以一个url对应一个类,这个就是CBV,下面我们来简单的介绍一下CBV一、
- 文中用到了BeautifulSoup这个库, 目的是处理html文档分析的, 因为我只是提取了title的关键字,所以可以用正则表达式代替,
- 本文实例分析了php字符串截取函数用法。分享给大家供大家参考。具体分析如下:php自带的截取字符串的函数只能处理英文,数字的不能截取中文混排
- 说明:复制表(只复制结构,源表名:a 新表名:b) select * into b from a where 1<>1说明:拷贝
- 给定损失函数的输入y,pred,shape均为bxc。若设定loss_fn = torch.nn.MSELoss(reduction=