在实际项目中，我们通常会封装一些工具类，如判断数组、对象、函数等……
然而在vue3已经内置了很多常用的工具函数，因此我们不必再重复造轮子
camelize转骆驼
import { camelize } from"vue"; camelize("foo-bar"); // fooBar
hyphenate大写字母用-连接
import { hyphenate } from"@vue/shared"; hyphenate("HelloWorld"); // hello-world
capitalize首字母大写
import { capitalize } from"vue"; capitalize("hello world"); // Hello world
remove删除数组指定的元素
import { remove } from"@vue/shared"; constarr= ['aaa', 'bbb', 'ccc', 'ddd', 'eee'] remove(arr, 'bbb') // ['aaa', 'ccc', 'ddd', 'eee']remove(arr, 'eee') // ['aaa', 'ccc', 'ddd']remove(arr, 'aaa') // ['ccc', 'ddd']
判断对象
import { isArray, isMap, isSet, isDate, isFunction, isString, isSymbol, isPromise, isObject, // 包括数组isPlainObject, // 不包括数组} from"@vue/shared"; isObject([]); // trueisObject({}); // trueisObject(null); // falseisPlainObject([]); // falseisPlainObject({}); // trueisPlainObject(null); // false
isOn判断是否事件
import { isOn } from"@vue/shared"; isOn("onClick"); // trueisOn("onclick"); // falseisOn("onMove"); // trueisOn("onmove"); // falseisOn("aaaaaa"); // false
normalizeClass正常化class，可传入字符串、对象、数组，最终返回字符串
import { normalizeClass } from"vue"; normalizeClass('container') // containernormalizeClass(['container', 'box', 'list']) // container box listnormalizeClass({ container: true, box: false, list: true }) // container list// "item btn empty box ul"normalizeClass([ 'item', null, ['btn', 'empty'], { box: true, ul: true, li: false } ])
normalizeStyle正常化style，可传入字符串、对象、数组，最终返回字符串或对象
import { normalizeStyle } from"vue"; normalizeStyle('width: 100px; height: 100px') // width: 100px; height: 100pxnormalizeStyle(['width: 100px', 'height: 100px']) // {width: '100px', height: '100px'}// {width: '60px', height: '60px', color: 'red', top: '10px'}normalizeStyle([ 'width: 100px; height: 100px; color: red', 'width: 60px; height: 60px; top: 10px', ])
mergeProps合并属性，合并规则:
class被合并为字符串，合并规则同normalizeClassstyle被合并为字符串或对象，合并规则同normalizeStyle事件被合并为数组普通属性会直接覆盖
import { mergeProps } from"vue"; constprops1= { class: 'aaa', style: 'width: 100px', onClick: () => {}, zzzzz: 'sss'} constprops2= { class: 'bbb', style: 'height: 100px', onClick: () => {}, zzzzz: 'xxx'} constprops3=mergeProps(props1, props2) console.log(props3)
isVNode判断是否虚拟节点
import { isVNode } from"vue"; isVNode(<div>哈哈哈</div>) //trueisVNode('哈哈哈') // false
cloneVNode克隆一个虚拟节点，相同的属性处理规则同mergeProps
import { cloneVNode } from"vue"; constvnode1=<divclass="aaa"style="width: 100px">哈哈哈</div>constvnode2=cloneVNode(vnode1, { class: 'bbb', style: 'height: 100px'}) vnode2; // <div class="aaa bbb" style="width: 100px; height: 100px;">哈哈哈</div>
useCssVars为组件的根节点添加css变量，仅在单文件组件中有效
<template><divclass="text">哈哈哈</div></template><scriptsetup>import { useCssVars, reactive } from'vue'constcssVariable=reactive({ color: 'red', fontSize: '32px', bg: '#3db6ff', radius: '100px' }) useCssVars(vm=>cssVariable) </script><style> .text { color: var(--color); font-size: var(--fontSize); width: var(--radius); height: var(--radius); border-radius: var(--radius); background-color: var(--bg); } </style>
