Par rapport aux fonctions outils de Vue2, les fonctions outils de Vue3 ont beaucoup changé Personnellement, j'ai l'impression que cela se reflète principalement dans la syntaxe. avoir pleinement adopté es6 ; [Recommandations associées : Tutoriel vidéo vuejs, développement web front-end]Vue3的工具函数对比于Vue2的工具函数变化还是很大的，个人感觉主要还是体现在语法上，已经全面拥抱es6了；【相关推荐：vuejs视频教程、web前端开发】
对比于工具类的功能变化并没有多少，大多数基本上都是一样的，只是语法上和实现上有略微的区别；
源码地址：
之前介绍了很多阅读方式，这次就直接跳过了，直接开始阅读源码；
makeMap: 生成一个类似于Set的对象，用于判断是否存在某个值EMPTY_OBJ: 空对象EMPTY_ARR: 空数组NOOP: 空函数NO: 返回false的函数isOn: 判断是否是on开头的事件isModelListener: 判断onUpdate开头的字符串extend: 合并对象remove: 移除数组中的某个值hasOwn: 判断对象是否有某个属性isArray: 判断是否是数组isMap: 判断是否是Map
isSet: 判断是否是Set
isDate: 判断是否是Date
isRegExp: 判断是否是RegExp
isFunction: 判断是否是函数isString: 判断是否是字符串isSymbol: 判断是否是Symbol
isObject: 判断是否是对象isPromise: 判断是否是Promise
objectToString: Object.prototype.toString
toTypeString: Object.prototype.toString的简写toRawType: 获取对象的类型isPlainObject: 判断是否是普通对象isIntegerKey: 判断是否是整数key
isReservedProp: 判断是否是保留属性isBuiltInDirective: 判断是否是内置指令camelize: 将字符串转换为驼峰hyphenate: 将字符串转换为连字符capitalize: 将字符串首字母大写toHandlerKey: 将字符串转换为事件处理的key
hasChanged: 判断两个值是否相等invokeArrayFns: 调用数组中的函数def: 定义对象的属性looseToNumber: 将字符串转换为数字toNumber: 将字符串转换为数字getGlobalThis: 获取全局对象genPropsAccessExp: 生成props的访问表达式这其中有大部分和Vue2的工具函数是一样的，还有数据类型的判断，使用的是同一种方式，因为有了之前Vue2的阅读经验，所以这次快速阅读；
如果想要详细的可以看我之前写的文章：【源码共读】Vue2源码 shared 模块中的36个实用工具函数分析;
而且这次是直接源码，ts版本的，不再处理成js，所以直接阅读ts源码；
export function makeMap(
str: string,
expectsLowerCase?: boolean
): (key: string) => boolean {
const map: Record<string, boolean> = Object.create(null)
const list: Array<string> = str.split(',')
for (let i = 0; i < list.length; i++) {
map[list[i]] = true
}
return expectsLowerCase ? val => !!map[val.toLowerCase()] : val => !!map[val]
}makeMap的源码在同级目录下的makeMap.ts文件中，引入进来之后直接使用export关键字导出，实现方式和Vue2
makeMap : Génère un objet similaire à Set pour déterminer si une certaine valeur existeEMPTY_OBJ : Objet videEMPTY_ARR : Tableau videNOOP : Fonction videNO : Fonction qui renvoie falseisOn</code > : Détermine s'il s'agit de <code> Événements commençant par onisModelListener : Détermine la chaîne commençant par onUpdateextend</li> code> : Fusionner des objets</li><li><code>remove : Supprimer une certaine valeur dans le tableauhasOwn : Détermine si l'objet a certains attributs de valeurisArray : Détermine s'il s'agit d'un tableauisMap</code > : Détermine s'il s'agit d'un <code>Map< /li>isSet : Détermine s'il s'agit d'un SetisDate : Détermine s'il s'agit de Date< /code></li><li><code>isRegExp : Détermine s'il s'agit de RegExp< /li>isFunction : Détermine s'il s'agit d'une fonction isString : Détermine s'il s'agit d'une chaîne isSymbol : Déterminez s'il s'agit d'un SymbolisObject : Déterminez s'il s'agit d'un objetisPromise : Déterminez s'il s'agit d'une PromesseobjectToString : Object.prototype.toString toTypeString : Object.prototype.toString</code >Abréviation</li><li><code>toRawType : Obtient le type d'objet isPlainObject : Détermine s'il s'agit d'un objet normalisIntegerKey : Détermine s'il s'agit d'un key< entier /code></li><li><code>isReservedProp : Détermine s'il s'agit d'une propriété réservéeisBuiltInDirective : Détermine s'il s'agit d'une propriété intégrée instructioncamelize : Convertir la chaîne en casse chameauhyphenate</code > : Convertir la chaîne en traits d'union</li><li ><code>capitaliser : Mettre en majuscule la première lettre de la chaînetoHandlerKey : Convertir la chaîne en Converti en clé< de traitement d'événements /li>hasChanged : Déterminer si deux valeurssont égalesinvokeArrayFns : Appeler la fonction dans le tableaudef : Définir les propriétés de l'objetlooseToNumber : Convertir une chaîne en nombretoNumber : Convertir une chaîne en nombregetGlobalThis : Récupérer l'objet globalgenPropsAccessExp < /code> : Générer des expressions d'accès pour les <code>propsVue2, et il y a les mêmes est utilisée pour déterminer le type de données. En raison de l'expérience de lecture précédente de Vue2, je l'ai lu rapidement cette fois-ci 🎜🎜Si vous voulez plus de détails, vous pouvez lire l'article que j'ai écrit avant : < a href="https://www.php.cn/link/af4d96ada35c008ae94d257c86efb215" target="_blank" title="https://www.php.cn/link/af4d96ada35c008ae94d257c86efb215">[Lecture partagée du code source] Code source de Vue2 analyse des fonctions utilitaires du module partagé 36;🎜🎜Et cette fois c'est le code source direct, version ts, qui n'est plus traité en js, alors lisez directement< code>tsCode source ; 🎜export const EMPTY_OBJ: { readonly [key: string]: any } = __DEV__
? Object.freeze({})
: {}
export const EMPTY_ARR = __DEV__ ? Object.freeze([]) : []makeMap se trouve dans le fichier makeMap.ts dans le même répertoire. Après l'avoir importé, utilisez directement export< /code>Export de mots clés, la méthode d'implémentation est la même que celle de <code>Vue2 🎜 ;export const EMPTY_OBJ: { readonly [key: string]: any } = __DEV__
? Object.freeze({})
: {}
export const EMPTY_ARR = __DEV__ ? Object.freeze([]) : []EMPTY_OBJ和EMPTY_ARR的实现方式和Vue2的emptyObject相同，都是使用Object.freeze冻结对象，防止对象被修改；
export const NOOP = () => {}和Vue2的noop实现方式相同，都是一个空函数，移除了入参；
/** * Always return false. */ export const NO = () => false
和Vue2的no实现方式相同，都是一个返回false的函数，移除了入参；
const onRE = /^on[^a-z]/ export const isOn = (key: string) => onRE.test(key)
判断是否是on开头的事件，并且on后面的第一个字符不是小写字母；
export const isModelListener = (key: string) => key.startsWith('onUpdate:')
判断是否是onUpdate:开头的字符串；
参考：startWith
export const extend = Object.assign
直接拥抱es6的Object.assign，Vue2的实现方式是使用for in循环；
export const remove = <T>(arr: T[], el: T) => {
const i = arr.indexOf(el)
if (i > -1) {
arr.splice(i, 1)
}
}对比于Vue2删除了一些代码，之前的快速删除最后一个元素的判断不见了；
猜测可能是因为有bug，因为大家都知道Vue2的数组响应式必须使用Array的api，那样操作可能会导致数组响应式失效；
const hasOwnProperty = Object.prototype.hasOwnProperty export const hasOwn = ( val: object, key: string | symbol ): key is keyof typeof val => hasOwnProperty.call(val, key)
使用的是Object.prototype.hasOwnProperty，和Vue2相同；
export const isArray = Array.isArray
使用的是Array.isArray，和Vue2相同；
export const isMap = (val: unknown): val is Map<any, any> => toTypeString(val) === '[object Map]' export const isSet = (val: unknown): val is Set<any> => toTypeString(val) === '[object Set]' export const isDate = (val: unknown): val is Date => toTypeString(val) === '[object Date]' export const isRegExp = (val: unknown): val is RegExp => toTypeString(val) === '[object RegExp]'
都是使用Object.toString来判断类型，对比于Vue2新增了isMap和isSet和isDate，实现方式没变；
export const isFunction = (val: unknown): val is Function => typeof val === 'function' export const isString = (val: unknown): val is string => typeof val === 'string' export const isSymbol = (val: unknown): val is symbol => typeof val === 'symbol' export const isObject = (val: unknown): val is Record<any, any> => val !== null && typeof val === 'object'
和Vue2的实现方式相同，都是使用typeof来判断类型，新增了isSymbol；
export const isPromise = <T = any>(val: unknown): val is Promise<T> => {
return isObject(val) && isFunction(val.then) && isFunction(val.catch)
}和Vue2对比修改了实现方式，但是判断逻辑没变；
export const objectToString = Object.prototype.toString
直接是Object.prototype.toString；
export const toTypeString = (value: unknown): string => objectToString.call(value)
对入参执行Object.prototype.toString；
export const toRawType = (value: unknown): string => {
// extract "RawType" from strings like "[object RawType]"
return toTypeString(value).slice(8, -1)
}和Vue2的实现方式相同；
export const isPlainObject = (val: unknown): val is object => toTypeString(val) === '[object Object]'
和Vue2的实现方式相同；
export const isIntegerKey = (key: unknown) => isString(key) && key !== 'NaN' && key[0] !== '-' && '' + parseInt(key, 10) === key
判断一个字符串是不是由一个整数组成的；
export const isReservedProp = /*#__PURE__*/ makeMap(
// the leading comma is intentional so empty string "" is also included
',key,ref,ref_for,ref_key,' +
'onVnodeBeforeMount,onVnodeMounted,' +
'onVnodeBeforeUpdate,onVnodeUpdated,' +
'onVnodeBeforeUnmount,onVnodeUnmounted'
)使用makeMap生成一个对象，用于判断入参是否是内部保留的属性；
export const isBuiltInDirective = /*#__PURE__*/ makeMap( 'bind,cloak,else-if,else,for,html,if,model,on,once,pre,show,slot,text,memo' )
使用makeMap生成一个对象，用于判断入参是否是内置的指令；
const cacheStringFunction = <T extends (str: string) => string>(fn: T): T => {
const cache: Record<string, string> = Object.create(null)
return ((str: string) => {
const hit = cache[str]
return hit || (cache[str] = fn(str))
}) as T
}同Vue2的cached相同，用于缓存字符串；
const camelizeRE = /-(\w)/g
/**
* @private
*/
export const camelize = cacheStringFunction((str: string): string => {
return str.replace(camelizeRE, (_, c) => (c ? c.toUpperCase() : ''))
})将-连接的字符串转换为驼峰式，同Vue2的camelize相同；
const hyphenateRE = /\B([A-Z])/g /** * @private */ export const hyphenate = cacheStringFunction((str: string) => str.replace(hyphenateRE, '-$1').toLowerCase() )
将驼峰式字符串转换为-连接的字符串，同Vue2的hyphenate相同；
/** * @private */ export const capitalize = cacheStringFunction( (str: string) => str.charAt(0).toUpperCase() + str.slice(1) )
将字符串首字母大写，同Vue2的capitalize相同；
/**
* @private
*/
export const toHandlerKey = cacheStringFunction((str: string) =>
str ? `on${capitalize(str)}` : ``
)将字符串首字母大写并在前面加上on；
// compare whether a value has changed, accounting for NaN. export const hasChanged = (value: any, oldValue: any): boolean => !Object.is(value, oldValue)
和Vue2相比，移除了polyfill，直接使用Object.is；
export const invokeArrayFns = (fns: Function[], arg?: any) => {
for (let i = 0; i < fns.length; i++) {
fns[i](arg)
}
}批量调用传递过来的函数列表，如果有参数，会将参数传递给每个函数；
export const def = (obj: object, key: string | symbol, value: any) => {
Object.defineProperty(obj, key, {
configurable: true,
enumerable: false,
value
})
}使用Object.defineProperty定义一个属性，并使这个属性不可枚举；
/**
* "123-foo" will be parsed to 123
* This is used for the .number modifier in v-model
*/
export const looseToNumber = (val: any): any => {
const n = parseFloat(val)
return isNaN(n) ? val : n
}将字符串转换为数字，如果转换失败，返回原字符串；
通过注释知道主要用于v-model的.number修饰符；
/**
* Only conerces number-like strings
* "123-foo" will be returned as-is
*/
export const toNumber = (val: any): any => {
const n = isString(val) ? Number(val) : NaN
return isNaN(n) ? val : n
}将字符串转换为数字，如果转换失败，返回原数据；
let _globalThis: any
export const getGlobalThis = (): any => {
return (
_globalThis ||
(_globalThis =
typeof globalThis !== 'undefined'
? globalThis
: typeof self !== 'undefined'
? self
: typeof window !== 'undefined'
? window
: typeof global !== 'undefined'
? global
: {})
)
}获取全局对象，根据环境不同返回的对象也不同；
const identRE = /^[_$a-zA-Z\xA0-\uFFFF][_$a-zA-Z0-9\xA0-\uFFFF]*$/
export function genPropsAccessExp(name: string) {
return identRE.test(name)
? `__props.${name}`
: `__props[${JSON.stringify(name)}]`
}生成props的访问表达式，如果name是合法的标识符，直接返回__props.name，否则返回通过JSON.stringify转换后的__props[name]；
通过这次的源码阅读，我们巩固了一些基础知识，通过对比Vue2的工具函数，我们也了解了Vue3的一些变化；
这些变化个人感觉主要集中在拥抱es6，可以看到放弃ie是多么自由而奔放；
话外题，不知道大家有没有发现MDN上面的浏览器兼容性表格，已经没有了ie的相关信息。
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Le composant parent Vue appelle la méthode du composant enfant
vue v-si
La différence entre vue2.0 et 3.0
Comment transmettre une valeur au composant vue
La différence entre vue3.0 et 2.0
vue instructions communes
Quelles sont les instructions couramment utilisées dans vue ?
La différence entre mpvue et vue
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
