體驗超現代的 Vue ？Vue Macros 使用探索

作者：程序員Sunday 2024-05-23 12:45:13

開發前端

除此之外，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>

總結