vue3 中隐藏的实用API

用户8087287

发布于 2023-03-06 14:43:16

7750

发布于 2023-03-06 14:43:16

文章被收录于专栏：程序员XR

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

然而在 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 合并属性，合并规则:

class 被合并为字符串，合并规则同 normalizeClass
style 被合并为字符串或对象，合并规则同 normalizeStyle
事件 被合并为数组
普通属性 会直接覆盖

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>