关于vue3: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>