在理论我的项目中，咱们通常会封装一些工具类，如判断数组、对象、函数等……

然而在 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";const arr = ['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 合并属性，合并规定:

  1. class 被合并为字符串，合并规定同 normalizeClass
  2. style 被合并为字符串或对象，合并规定同 normalizeStyle
  3. 事件 被合并为数组
  4. 一般属性 会间接笼罩
import { mergeProps } from "vue";const props1 = {    class: 'aaa',    style: 'width: 100px',    onClick: () => {},    zzzzz: 'sss'}const props2 = {    class: 'bbb',    style: 'height: 100px',    onClick: () => {},    zzzzz: 'xxx'}const props3 = mergeProps(props1, props2)console.log(props3)


isVNode 判断是否虚构节点

import { isVNode } from "vue";isVNode(<div>哈哈哈</div>) // trueisVNode('哈哈哈') // false


cloneVNode 克隆一个虚构节点，雷同的属性 解决规定同 mergeProps

import { cloneVNode } from "vue";const vnode1 = <div class="aaa" style="width: 100px">哈哈哈</div>const vnode2 = cloneVNode(vnode1, {    class: 'bbb',    style: 'height: 100px'})vnode2; // <div class="aaa bbb" style="width: 100px; height: 100px;">哈哈哈</div>


useCssVars 为组件的根节点增加 css 变量，仅在 单文件组件 中无效

<template>    <div class="text">哈哈哈</div></template><script setup>    import { useCssVars, reactive } from 'vue'    const cssVariable = 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>