vue3 工具类API分享

在实际项目中，我们通常会封装一些工具类，如判断数组、对象、函数等…… 然而在 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([]); // true
isObject({}); // true
isObject(null); // false
isPlainObject([]); // false
isPlainObject({}); // true
isPlainObject(null); // false

isOn 判断是否事件

import { isOn } from "@vue/shared";
isOn("onClick"); // true
isOn("onclick"); // false
isOn("onMove"); // true
isOn("onmove"); // false
isOn("aaaaaa"); // false

normalizeClass 正常化 class，可传入 字符串、对象、数组，最终返回字符串

import { normalizeClass } from "vue";
normalizeClass('container') // container
normalizeClass(['container', 'box', 'list']) // container box list
normalizeClass({ 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: 100px
normalizeStyle(['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>) // true
isVNode('哈哈哈') // 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>