vue3 中隐藏的实用API

import { camelize } from"vue";
camelize("foo-bar"); // fooBar

import { hyphenate } from"@vue/shared";
hyphenate("HelloWorld"); // hello-world

import { capitalize } from"vue";
capitalize("hello world"); // Hello world

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

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

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    }
])

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',
])

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)

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

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>

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