体验超现代的 Vue ？Vue Macros 使用探索

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

什么是 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还提供了很多其他的宏或 语法糖 可供大家使用。但是需要注意的是，目前有些实验性质的功能需要注意谨慎使用。