体验超现代的 Vue ？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允许直接在内部声明组件选项

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

使用 defineSlots 可以在 

defineProps

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

definePropsRefs

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

defineRender

使用 defineRender 可以直接在 

shortVmodel

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

总结

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