體驗(yàn)超現(xiàn)代的 Vue ？Vue Macros 使用探索
什么是 Vue Macros
Vue Macros 是一個(gè) vue 的周邊庫(kù)，可以在 Vue 2.7 以上的項(xiàng)目中進(jìn)行使用。并引入了一套高級(jí)功能（宏）和語法糖。
圖片
這些宏是庫(kù)的一部分，主要是實(shí)現(xiàn)了 Vue 目前尚未正式采用的提案。
如何使用？
要開始在項(xiàng)目中使用 Vue Macros，首先需要安裝該庫(kù)：
使用 npm：npm install -D unplugin-vue-macros
使用 yarn：yarn add -D unplugin-vue-macros
使用 pnpm：pnpm add -D unplugin-vue-macros安裝后，需要打包器進(jìn)行不同的配置。
如果使用 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(),
},
}),
],
});對(duì)于 TypeScript 項(xiàng)目，tsconfig.json需要進(jìn)行額外配置：
{
"compilerOptions": {
"types": ["unplugin-vue-macros/macros-global"]
}
}核心 API
defineOptions（Vue 3.3 默認(rèn)支持了該功能）
defineOptions允許直接在內(nèi)部聲明組件選項(xiàng)<script setup>，而不需要單獨(dú)的<script>塊，也就是說可以在一個(gè)宏函數(shù)中設(shè)置 name, props, emits, render。
對(duì)于喜歡組合 API 但仍想使用某些選項(xiàng) API 功能的開發(fā)人員來說，這個(gè)宏非常有用。
<script setup lang='ts'>
defineOptions({
name: "SearchComp",
});
</script>defineSlots（Vue 3.3 默認(rèn)支持了該功能）
使用 defineSlots 可以在 <script setup> 中聲明 SFC 中插槽的類型
<script setup lang="ts">
defineSlots<{
// 插槽名稱
title: {
// 作用域插槽
foo: 'bar' | boolean
}
}>()
</script>defineProps
使用 $defineProps 可以正確地解構(gòu) props 的類型
<script setup lang="ts">
// ?? ReactiveVariable<string[]>
const { foo } = $defineProps<{
foo: string[]
}>()
// ?? Ref<string[]>
const fooRef = $$(foo)
</script>definePropsRefs
從 defineProps 中將返回 refs 而不是 reactive 對(duì)象，可以在不丟失響應(yīng)式的情況下解構(gòu) props。
<script setup lang="ts">
// ? 解構(gòu)不丟失響應(yīng)式
const { foo, bar } = definePropsRefs<{
foo: string
bar: number
}>()
// ?? Ref<string>
console.log(foo.value, bar.value)
</script>defineRender
使用 defineRender 可以直接在 <script setup> 中定義渲染函數(shù)。
<script setup lang="tsx">
// 可以直接傳遞 JSX
defineRender(
<div>
<span>Hello</span>
</div>,
)
// 或使用渲染函數(shù)
defineRender(() => {
return (
<div>
<h1>Hello World</h1>
</div>
)
})
</script>shortVmodel
v-model 的語法糖。直接通過特定符號(hào)（'::' | '$' | '*'）代替 v-model。默認(rèn)使用 $ 符號(hào)
<template>
<input $="msg" />
<!-- => <input v-model="msg" /> -->
<demo $msg="msg" />
<!-- => <input v-model:msg="msg" /> -->
</template>總結(jié)
除此之外，Vue Macros 還提供了很多其他的宏或 語法糖 可供大家使用。但是需要注意的是，目前有些 實(shí)驗(yàn)性質(zhì) 的功能需要注意謹(jǐn)慎使用。
