什么是 Vue Macros

Vue Macros 是一個 vue 的周邊庫，可以在 Vue 2.7 以上的項目中進行使用。并引入了一套高級功能（宏）和語法糖。J1628資訊網——每日最新資訊28at.com

圖片J1628資訊網——每日最新資訊28at.com

這些宏是庫的一部分，主要是實現了 Vue 目前尚未正式采用的提案。J1628資訊網——每日最新資訊28at.com

如何使用？

要開始在項目中使用 Vue Macros，首先需要安裝該庫：J1628資訊網——每日最新資訊28at.com

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

安裝后，需要打包器進行不同的配置。J1628資訊網——每日最新資訊28at.com

如果使用 Vite ，則需要在 vite.config.js 文件中：J1628資訊網——每日最新資訊28at.com

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需要進行額外配置：J1628資訊網——每日最新資訊28at.com

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

核心 API

defineOptions（Vue 3.3 默認支持了該功能）

defineOptions允許直接在內部聲明組件選項<script setup>，而不需要單獨的<script>塊，也就是說可以在一個宏函數中設置 name, props, emits, render。J1628資訊網——每日最新資訊28at.com

對于喜歡組合 API 但仍想使用某些選項 API 功能的開發人員來說，這個宏非常有用。J1628資訊網——每日最新資訊28at.com

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

defineSlots（Vue 3.3 默認支持了該功能）

使用 defineSlots 可以在 <script setup> 中聲明 SFC 中插槽的類型J1628資訊網——每日最新資訊28at.com

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

defineProps

使用 $defineProps 可以正確地解構 props 的類型J1628資訊網——每日最新資訊28at.com

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

definePropsRefs

從 defineProps 中將返回 refs 而不是 reactive 對象，可以在不丟失響應式的情況下解構 props。J1628資訊網——每日最新資訊28at.com

<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> 中定義渲染函數。J1628資訊網——每日最新資訊28at.com

<script setup lang="tsx">// 可以直接傳遞 JSXdefineRender(  <div>    <span>Hello</span>  </div>,)// 或使用渲染函數defineRender(() => {  return (    <div>      <h1>Hello World</h1>    </div>  )})</script>

shortVmodel

v-model 的語法糖。直接通過特定符號（'::' | '$' | '*'）代替 v-model。默認使用 $ 符號J1628資訊網——每日最新資訊28at.com

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

總結

除此之外，Vue Macros 還提供了很多其他的宏或 語法糖 可供大家使用。但是需要注意的是，目前有些 實驗性質 的功能需要注意謹慎使用。J1628資訊網——每日最新資訊28at.com

J1628資訊網——每日最新資訊28at.com

本文鏈接：http://www.tebozhan.com/showinfo-26-90339-0.html體驗超現代的 Vue ？Vue Macros 使用探索

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： yolov部署到iPhone或終端實踐全過程

下一篇： 一文搞懂七種基本的GC垃圾回收算法