对于大部分的前端开发人员来讲,熟练使用vue做项目是第一步,但当进阶后遇到一些特殊场景,解决棘手问题时,了解vue框架的设计思想和实现思路便是基础需要。本专题将深入vue框架源码,一步步挖掘框架设计理念和思想,并尽可能利用语言将实现思路讲清楚。希望您是在熟练使用vue的前提下阅读此系列文章,也希望您阅读后留下宝贵建议,以便后续文章改进。
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
var vm = new Vue({
el: '#app',
data: {
message: '选项合并'
},
components: {
'components': {}
}
})
复制代码
从最简单的使用入手,new一个Vue实例对象是使用vue的第一步,在这一步中,我们需要传递一些基础的选项配置,Vue系统需要进行初始化数据,合并选项的过程。本篇文章我们研究的核心在于各种数据选项在vue的系统中是如何进行合并的(忽略过程中的响应式系统构建)。
// Vue 构造函数
function Vue (options) {
if (!(this instanceof Vue)
) {
// 规定vue只能通过new实例化创建,否则抛出异常
warn('Vue is a constructor and should be called with the `new` keyword');
}
this._init(options);
}
// 在引进Vue时,会执行initMixin方法,该方法会在Vue的原型上定义数据初始化init方法,方法只在实例化Vue时执行。
initMixin(Vue);
// 暂时忽略其他初始化过程。。。
···
复制代码
接下来,我们将围绕vue数据的初始化展开解析。
1.1 Vue构造器的默认选项
var ASSET_TYPES = [
'component',
'directive',
'filter'
];
Vue.options = Object.create(null); // 原型上创建了一个指向为空对象的options属性
ASSET_TYPES.forEach(function (type) {
Vue.options[type + 's'] = Object.create(null);
});
Vue.options._base = Vue;
复制代码
Vue构造函数自身有四个默认配置选项,分别是component,directive, filter以及返回自身构造器的_base(这里先不展开对每个属性内容的介绍)。这四个属性挂载在构造函数的options属性上。
我们抓取_init方法合并选项的核心部分代码如下:
function initMixin (Vue) {
Vue.prototype._init = function (options) {
var vm = this;
// a uid
// 记录实例化多少个vue对象
vm._uid = uid$3++;
// 选项合并,将合并后的选项赋值给实例的$options属性
vm.$options = mergeOptions(
resolveConstructorOptions(vm.constructor), // 返回Vue构造函数自身的配置项
options || {},
vm
);
};
}
复制代码
从代码中可以看到,选项合并的重点是将用户自身传递的options选项和Vue构造函数自身的选项配置合并,并将合并结果挂载到实例对象的$options属性上。
1.2 选项校验
选项合并过程我们更多的不可控在于不知道用户传了哪些配置选项,这些配置是否符合规范,所以每个选项的规范需要严格定义好,不允许用户按照规范外的标准来传递选项。因此在合并选项之前,很大的一部分工作是对选项的校验。其中components,prop,inject,directive等都是检验的重点。下面只会列举components和props的校验讲解,其他的如inject, directive校验类似,请自行对着源码解析。
function mergeOptions ( parent, child, vm ) {
{
checkComponents(child); // 合并前对选项components进行规范检测
}
if (typeof child === 'function') {
child = child.options;
}
normalizeProps(child, vm); // 校验props选项
normalizeInject(child, vm); // 校验inject选项
normalizeDirectives(child); // 校验directive选项
if (!child._base) {
if (child.extends) {
parent = mergeOptions(parent, child.extends, vm);
}
if (child.mixins) {
for (var i = 0, l = child.mixins.length; i < l; i++) {
parent = mergeOptions(parent, child.mixins[i], vm);
}
}
}
// 真正选项合并的代码
var options = {};
var key;
for (key in parent) {
mergeField(key);
}
for (key in child) {
if (!hasOwn(parent, key)) {
mergeField(key);
}
}
function mergeField (key) {
var strat = strats[key] || defaultStrat;
options[key] = strat(parent[key], child[key], vm, key);
}
return options
}
复制代码
1.2.1 components规范检验
我们可以在vue实例化时传入组件选项以此来注册组件。因此,组件命名需要遵守很多规范,比如组件名不能用html保留的标签(如:img,p),只能以字母开头等。因此在选项合并之前,需要对规范进行检查。
// components规范检查函数
function checkComponents (options) {
for (var key in options.components) {
validateComponentName(key);
}
}
function validateComponentName (name) {
if (!new RegExp(("^[a-zA-Z][\\-\\.0-9_" + (unicodeRegExp.source) + "]*$")).test(name)) {
// 正则判断检测是否为非法的标签
warn(
'Invalid component name: "' + name + '". Component names ' +
'should conform to valid custom element name in html5 specification.'
);
}
// 不能使用Vue自身自定义的组件名,如slot, component,不能使用html的保留标签,如 h1, svg等
if (isBuiltInTag(name) || config.isReservedTag(name)) {
warn(
'Do not use built-in or reserved HTML elements as component ' +
'id: ' + name
);
}
}
复制代码
1.2.2 props规范检验
从vue的使用文档看,props选项的形式有两种,一种是['a', 'b', 'c']的数组形式,一种是{ a: { type: 'String', default: 'hahah' }}带有校验规则的形式。从源码上看,两种形式最终都会转换成对象的形式。
// props规范校验
function normalizeProps (options, vm) {
var props = options.props;
if (!props) { return }
var res = {};
var i, val, name;
// props选项数据有两种形式,一种是['a', 'b', 'c'],一种是{ a: { type: 'String', default: 'hahah' }}
if (Array.isArray(props)) {
i = props.length;
while (i--) {
val = props[i];
if (typeof val === 'string') {
name = camelize(val);
res[name] = { type: null }; // 默认将数组形式的props转换为对象形式。
} else {
// 保证是字符串
warn('props must be strings when using array syntax.');
}
}
} else if (isPlainObject(props)) {
for (var key in props) {
val = props[key];
name = camelize(key);
res[name] = isPlainObject(val)
? val
: { type: val };
}
} else {
// 非数组,非对象则判定props选项传递非法
warn(
"Invalid value for option \"props\": expected an Array or an Object, " +
"but got " + (toRawType(props)) + ".",
vm
);
}
options.props = res;
}
复制代码
1.2.3 函数缓存
在读到props规范检验时,我发现了一段函数优化的代码,他将每次执行函数后的值缓存起来,下次重复执行的时候调用缓存的数据,以此提高前端性能,这是典型的偏函数应用,可以参考我另一篇文章打造属于自己的underscore系列(五)- 偏函数和函数柯里化
function cached (fn) {
var cache = Object.create(null); // 创建空对象作为缓存对象
return (function cachedFn (str) {
var hit = cache[str];
return hit || (cache[str] = fn(str)) // 每次执行时缓存对象有值则不需要执行函数方法,没有则执行并缓存起来
})
}
var camelize = cached(function (str) {
// 将诸如 'a-b'的写法统一处理成驼峰写法'aB'
return str.replace(camelizeRE, function (_, c) { return c ? c.toUpperCase() : ''; })
});
复制代码
1.3 子类构造器
选项校验介绍完后,在正式进入合并策略之前,还需要先了解一个东西,子类构造器。在vue的应用实例中,我们通过Vue.extend({ template: '<div></div>', data: function() {} })
创建一个子类,这个子类和Vue实例创建的父类一样,可以通过创建实例并挂载到具体的一个元素上。具体用法详见Vue官方文档,而具体实现如下所示(只简单抽取部分代码):
Vue.extend = function (extendOptions) {
extendOptions = extendOptions || {};
var Super = this;
var name = extendOptions.name || Super.options.name;
if (name) {
validateComponentName(name); // 校验子类的名称是否符合规范
}
var Sub = function VueComponent (options) { // 子类构造器
this._init(options);
};
Sub.prototype = Object.create(Super.prototype); // 子类继承于父类
Sub.prototype.constructor = Sub;
Sub.cid = cid++;
// 子类和父类构造器的配置选项进行合并
Sub.options = mergeOptions(
Super.options,
extendOptions
);
return Sub // 返回子类构造函数
};
复制代码
为什么要先介绍子类构造器的概念呢,原因是在选项合并的代码中,除了需要合并Vue实例和Vue构造器自身的配置,还需要合并子类构造器和父类构造器选项的场景。
1.4 合并策略
合并策略之所以是难点,其中一个是合并选项类型繁多,大体可以分为以下三类:Vue自定义策略, 父类自身配置, 子类自身策略(用户配置)。如何理解?
- Vue自定义策略,vue在选项合并的时候对一些特殊的选项有自身定义好的合并策略,例如data的合并,el的合并,而每一个的合并规则都不一样,因此需要对每一个规定选项进行特殊的合并处理
- 父类自身配置,首先创建一个vue实例时,Vue构造函数自身的options属于父类自身配置,我们需要将实例传递的配置和Vue.options进行合并。再者前面提到的
var P = Vue.extends(); var C = P.extends()
,P作为C的父类,在合并选项时同样需要考虑进去。 - 子类自身策略(用户配置),用户自身选项也就是通过new 实例传递的options选项
在Vue源码中,如何处理好这三个选项的合并,思路是这样的:
- 首选默认自定义策略,根据不同选项的策略合并子和父的配置项
- 不存在自定义策略时,有子类配置选项则默认使用子类配置选项,没有则选择父类配置选项。
function mergeOptions ( parent, child, vm ) {
···
var options = {};
var key;
for (key in parent) {
mergeField(key);
}
for (key in child) {
if (!hasOwn(parent, key)) {
mergeField(key);
}
}
function mergeField (key) {
var strat = strats[key] || defaultStrat; // 如果有自定义选项策略,则使用自定义选项策略,否则选择子类配置选项
options[key] = strat(parent[key], child[key], vm, key);
}
return options
}
复制代码