体验超现代的 Vue ？Vue Macros 使用探索-51CTO.COM

什么是 Vue Macros

Vue Macros 是一个 vue 的周边库，可以在 Vue 2.7 以上的项目中进行使用。并引入了一套高级功能（宏）和语法糖。

图片

这些宏是库的一部分，主要是实现了 Vue 目前尚未正式采用的提案。

如何使用？

要开始在项目中使用 Vue Macros，首先需要安装该库：

使用 npm：npm install -D unplugin-vue-macros
使用 yarn：yarn add -D unplugin-vue-macros
使用 pnpm：pnpm add -D unplugin-vue-macros

安装后，需要打包器进行不同的配置。

如果使用 Vite ，则需要在 vite.config.js 文件中：

import { defineConfig } from "vite";
import VueMacros from "unplugin-vue-macros/vite";
import Vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [
    VueMacros({
      plugins: {
        vue: Vue(),
      },
    }),
  ],
});

对于 TypeScript 项目，tsconfig.json需要进行额外配置：

{
  "compilerOptions": {
    "types": ["unplugin-vue-macros/macros-global"]
  }
}

核心 API

defineOptions（Vue 3.3 默认支持了该功能）

defineOptions允许直接在内部声明组件选项<script setup>，而不需要单独的<script>块，也就是说可以在一个宏函数中设置 name, props, emits, render。

对于喜欢组合 API 但仍想使用某些选项 API 功能的开发人员来说，这个宏非常有用。

<script setup lang='ts'>
defineOptions({
  name: "SearchComp",
});
</script>

defineSlots（Vue 3.3 默认支持了该功能）

使用 defineSlots 可以在 <script setup> 中声明 SFC 中插槽的类型

<script setup lang="ts">
defineSlots<{
  // 插槽名称
  title: {
    // 作用域插槽
    foo: 'bar' | boolean
  }
}>()
</script>

defineProps

使用 $defineProps 可以正确地解构 props 的类型

<script setup lang="ts">
//       ⬇️ ReactiveVariable<string[]>
const { foo } = $defineProps<{
  foo: string[]
}>()

//     ⬇️ Ref<string[]>
const fooRef = $$(foo)
</script>

definePropsRefs

从 defineProps 中将返回 refs 而不是 reactive 对象，可以在不丢失响应式的情况下解构 props。

<script setup lang="ts">
// ✅ 解构不丢失响应式
const { foo, bar } = definePropsRefs<{
  foo: string
  bar: number
}>()
//          ⬇️ Ref<string>
console.log(foo.value, bar.value)
</script>

defineRender

使用 defineRender 可以直接在 <script setup> 中定义渲染函数。

<script setup lang="tsx">
// 可以直接传递 JSX
defineRender(
  <div>
    <span>Hello</span>
  </div>,
)

// 或使用渲染函数
defineRender(() => {
  return (
    <div>
      <h1>Hello World</h1>
    </div>
  )
})
</script>

shortVmodel

v-model 的语法糖。直接通过特定符号（'::' | '$' | '*'）代替 v-model。默认使用 $ 符号

<template>
  <input $="msg" />
  <!-- => <input v-model="msg" /> -->
  <demo $msg="msg" />
  <!-- => <input v-model:msg="msg" /> -->
</template>

总结

除此之外，Vue Macros 还提供了很多其他的宏或语法糖可供大家使用。但是需要注意的是，目前有些实验性质的功能需要注意谨慎使用。