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([]); // 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 被合并为字符串，合并规则同 normalizeClass
style 被合并为字符串或对象，合并规则同 normalizeStyle
事件被合并为数组
普通属性会直接覆盖

import { mergeProps } from "vue";

const props1 = {

style: 'width: 100px',

onClick: () => {},

zzzzz: 'sss'

}

const props2 = {

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, {

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>

https://mp.weixin.qq.com/s?__biz=Mzg3NDgyNDMwNA==&mid=2247483847&idx=1&sn=86dc4d48b5c5aa706b72ed7ca87a595e&chksm=cecb96d8f9bc1fce44abb91004af60d7fe85bd2b5afb8cc584c02b915bd0412a63890acff5c6&token=1425188115&lang=zh_CN#rd