Vue2源码中实用的工具函数

县挫伪 · 2025-5-30 13:32:28

前言

在Vue2中，也有许多的工具函数，这里记录一些常用的工具函数。本文我们学习Vue2中shared/util.js中的工具函数。本文学习的是打包后的 dist/vue.js 14行到379行
工具函数

emptyObject

1/*! 2 * Vue.js v2.6.14 3 * (c) 2014-2021 Evan You 4 * Released under the MIT License. 5 */ 6 var emptyObject = Object.freeze({});

复制代码

freeze冻结一个对象，使其不可修改。这个函数在Vue2中经常用到，比如在Vue2中，data函数返回的对象就是被冻结的，防止用户修改data函数返回的对象。
isUndef是否未定义

1 function isUndef (v) { 2 return v === undefined || v === null 3 }

复制代码

判断一个变量是否未定义或者为null,在JavaScript中，假值有6个

undefined
null
false
0
NaN
''

为了判断准确，Vue2 源码中封装了isDef、 isTrue、isFalse函数来准确判断。
isDef是否已经定义

1 function isDef (v) { 2 return v !== undefined && v !== null 3 }

复制代码

isTrue是否为真值

1function isTrue (v) { 2 return v === true 3 }

复制代码

isFalse是否为假

1function isFalse (v) { 2 return v === false 3 }

复制代码

isPrimitive是否基本类型

1 function isPrimitive (value) { 2 return ( 3 typeof value === 'string' || 4 typeof value === 'number' || 5 // $flow-disable-line 6 typeof value === 'symbol' || 7 typeof value === 'boolean' 8 ) 9 }

复制代码

isObject是否对象

因为 typeof null是 'object'。数组等用这个函数判断也是 true

1 /** 2 * Quick object check - this is primarily used to tell 3 * Objects from primitive values when we know the value 4 * is a JSON-compliant type. 5 */ 6 function isObject (obj) { 7 return obj !== null && typeof obj === 'object' 8 }

复制代码

toRawType 转换成原始类型

Object.prototype.toString;返回一个表示该对象的字符串

1 function toRawType (value) { 2 return _toString.call(value).slice(8, -1) 3 }

复制代码

isPlainObject是否是纯对象

1 function isPlainObject (obj) { 2 return _toString.call(obj) === '[object Object]' 3 }

复制代码

isRegExp是否是正则表达式

1function isRegExp (v) { 2 return _toString.call(v) === '[object RegExp]'

复制代码

isValidArrayIndex 是否是可用的数组索引值

数组可用的索引值是 0 ('0')、1 ('1') 、2 ('2') …

1function isValidArrayIndex (val) { 2 var n = parseFloat(String(val)); 3 return n >= 0 && Math.floor(n) === n && isFinite(val) 4 }

复制代码

该全局 isFinite()函数用来判断被传入的参数值是否为一个有限数值（finite number）。在必要情况下，参数会首先转为一个数值。

1isFinite(Infinity); // false 2isFinite(NaN); // false 3isFinite(-Infinity); // false 4isFinite(0); // true 5isFinite(2e64); // true，在更强壮的 Number.isFinite(null) 中将会得到 false 6isFinite("0"); // true，在更强壮的 Number.isFinite('0') 中将会得到 false

复制代码

isPromise判断是否是promise对象

1 function isPromise (val) { 2 return ( 3 isDef(val) && 4 typeof val.then === 'function' && 5 typeof val.catch === 'function' 6 )

复制代码

toString 转换成字符串

转换成字符串。是数组或者对象并且对象的 toString 方法是 Object.prototype.toString，用 JSON.stringify 转换。

1 /** 2 * Convert a value to a string that is actually rendered. 3 */ 4function toString (val) { 5 return val == null 6 ? '' 7 : Array.isArray(val) || (isPlainObject(val) && val.toString === _toString) 8 ? JSON.stringify(val, null, 2) 9 : String(val) 10}

复制代码

toNumber转数字

转换成数字，如果转换失败，返回原值

1 function toNumber (val) { 2 var n = parseFloat(val); 3 return isNaN(n) ? val : n 4 }

复制代码

makeMap生成一个map(对象)

传入一个以逗号分隔的字符串，生成一个map键值对，并且返回一个函数检测key值在不在这个map中。第二个参数是小写选项。

1 function makeMap ( 2 str, 3 expectsLowerCase 4 ) { 5 var map = Object.create(null); 6 var list = str.split(','); 7 for (var i = 0; i < list.length; i++) { 8 map[list[i]] = true; 9 } 10 return expectsLowerCase 11 ? function (val) { return map[val.toLowerCase()]; } 12 : function (val) { return map[val]; } 13 }

复制代码

注意:通过splice方法移除数组，是个耗性能的操作，因为数组的索引会重新计算。

在axios InterceptorManager源码中，拦截器用数组存储的。但实际移除拦截器时，只是把拦截器置为 null 。而不是用`splice移除。最后执行时为 null 的不执行，同样效果，但性能更好。

1/** 2 * Check if a tag is a built-in tag. 3 */ 4var isBuiltInTag = makeMap('slot,component', true); 5 6// 返回的函数，第二个参数不区分大小写 7isBuiltInTag('slot') // true 8isBuiltInTag('component') // true 9isBuiltInTag('Slot') // true 10isBuiltInTag('Component') // true

复制代码

hasOwn 检测是否是自己的属性

1/** 2 * Check if an attribute is a reserved attribute. 3 */ 4var isReservedAttribute = makeMap('key,ref,slot,slot-scope,is'); 5 6isReservedAttribute('key') // true 7isReservedAttribute('ref') // true 8isReservedAttribute('slot') // true 9isReservedAttribute('slot-scope') // true 10isReservedAttribute('is') // true 11isReservedAttribute('IS') // undefined

复制代码

cached缓存

利用闭包特性，缓存数据

1 /** 2 * Remove an item from an array. 3 */ 4 function remove (arr, item) { 5 if (arr.length) { 6 var index = arr.indexOf(item); 7 if (index > -1) { 8 return arr.splice(index, 1) 9 } 10 } 11 }

复制代码

camelizeRE连字符转小驼峰

连字符 - 转驼峰 on-click => onClick

1'use strict'; 2 3var utils = require('./../utils'); 4 5function InterceptorManager() { 6 this.handlers = []; 7} 8 9/** 10 * Add a new interceptor to the stack 11 * 12 * @param {Function} fulfilled The function to handle `then` for a `Promise` 13 * @param {Function} rejected The function to handle `reject` for a `Promise` 14 * 15 * @return {Number} An ID used to remove interceptor later 16 */ 17InterceptorManager.prototype.use = function use(fulfilled, rejected, options) { 18 this.handlers.push({ 19 fulfilled: fulfilled, 20 rejected: rejected, 21 synchronous: options ? options.synchronous : false, 22 runWhen: options ? options.runWhen : null 23 }); 24 return this.handlers.length - 1; 25}; 26 27/** 28 * Remove an interceptor from the stack 29 * 30 * @param {Number} id The ID that was returned by `use` 31 */ 32InterceptorManager.prototype.eject = function eject(id) { 33 if (this.handlers[id]) { 34 this.handlers[id] = null; 35 } 36}; 37 38/** 39 * Clear all interceptors from the stack 40 */ 41InterceptorManager.prototype.clear = function clear() { 42 if (this.handlers) { 43 this.handlers = []; 44 } 45}; 46 47/** 48 * Iterate over all the registered interceptors 49 * 50 * This method is particularly useful for skipping over any 51 * interceptors that may have become `null` calling `eject`. 52 * 53 * @param {Function} fn The function to call for each interceptor 54 */ 55InterceptorManager.prototype.forEach = function forEach(fn) { 56 utils.forEach(this.handlers, function forEachHandler(h) { 57 if (h !== null) { 58 fn(h); 59 } 60 }); 61}; 62 63module.exports = InterceptorManager;

复制代码

capitalize首字母转大写

1/** 2 * Check whether an object has the property. 3 */ 4var hasOwnProperty = Object.prototype.hasOwnProperty; 5function hasOwn (obj, key) { 6 return hasOwnProperty.call(obj, key) 7} 8 9// 例子： 10 11// 特别提醒：__proto__ 是浏览器实现的原型写法，后面还会用到 12// 现在已经有提供好几个原型相关的API 13// Object.getPrototypeOf 14// Object.setPrototypeOf 15// Object.isPrototypeOf 16 17// .call 则是函数里 this 显示指定以为第一个参数，并执行函数。 18 19hasOwn({__proto__: { a: 1 }}, 'a') // false 20hasOwn({ a: undefined }, 'a') // true 21hasOwn({}, 'a') // false 22hasOwn({}, 'hasOwnProperty') // false 23hasOwn({}, 'toString') // false 24// 是自己的本身拥有的属性，不是通过原型链向上查找的。

复制代码

hyphenateRE小驼峰转连字符

1/** 2 * Create a cached version of a pure function. 3 */ 4 function cached (fn) { 5 var cache = Object.create(null); 6 return (function cachedFn (str) { 7 var hit = cache[str]; 8 return hit || (cache[str] = fn(str)) 9 }) 10 }

复制代码

polyfillBind bind 的垫片

1 /** 2 * Camelize a hyphen-delimited string. 3 */ 4 var camelizeRE = /-(\w)/g; 5 var camelize = cached(function (str) { 6 return str.replace(camelizeRE, function (_, c) { return c ? c.toUpperCase() : ''; }) 7 });

复制代码

兼容了老版本浏览器不支持原生的 bind 函数。同时兼容写法，对参数的多少做出了判断，使用call和apply实现，据说参数多适合用 apply，少用 call性能更好。
toArray把类数组转换成真正的数组

把类数组转换成数组，支持从哪个位置开始，默认从 0 开始。

1 /** 2 * Capitalize a string. 3 */ 4 var capitalize = cached(function (str) { 5 return str.charAt(0).toUpperCase() + str.slice(1) 6 });

复制代码

extend合并

1/** 2 * Hyphenate a camelCase string. 3 */ 4 var hyphenateRE = /\B([A-Z])/g; 5 var hyphenate = cached(function (str) { 6 return str.replace(hyphenateRE, '-$1').toLowerCase() 7 });

复制代码

toObject 转对象

[code] 1/**
2 * Merge an Array of Objects into a single Object.
3 */
4function toObject (arr) {
5 var res = {};
6 for (var i = 0; i

账号		自动登录	找回密码
密码			立即注册