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

什么是 Vue Macros

Vue Macros 是一个 vue 的周边库，可以在 Vue 2.7 以上的项目中进行使用。并引入了一套高级功能（宏）和语法糖。5Go28资讯网——每日最新资讯28at.com

图片5Go28资讯网——每日最新资讯28at.com

这些宏是库的一部分，主要是实现了 Vue 目前尚未正式采用的提案。5Go28资讯网——每日最新资讯28at.com

如何使用？

要开始在项目中使用 Vue Macros，首先需要安装该库：5Go28资讯网——每日最新资讯28at.com

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

安装后，需要打包器进行不同的配置。5Go28资讯网——每日最新资讯28at.com

如果使用 Vite ，则需要在 vite.config.js 文件中：5Go28资讯网——每日最新资讯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需要进行额外配置：5Go28资讯网——每日最新资讯28at.com

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

核心 API

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

defineOptions允许直接在内部声明组件选项<script setup>，而不需要单独的<script>块，也就是说可以在一个宏函数中设置 name, props, emits, render。5Go28资讯网——每日最新资讯28at.com

对于喜欢组合 API 但仍想使用某些选项 API 功能的开发人员来说，这个宏非常有用。5Go28资讯网——每日最新资讯28at.com

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

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

使用 defineSlots 可以在 <script setup> 中声明 SFC 中插槽的类型5Go28资讯网——每日最新资讯28at.com

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

defineProps

使用 $defineProps 可以正确地解构 props 的类型5Go28资讯网——每日最新资讯28at.com

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

definePropsRefs

从 defineProps 中将返回 refs 而不是 reactive 对象，可以在不丢失响应式的情况下解构 props。5Go28资讯网——每日最新资讯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> 中定义渲染函数。5Go28资讯网——每日最新资讯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。默认使用 $ 符号5Go28资讯网——每日最新资讯28at.com

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

总结

除此之外，Vue Macros 还提供了很多其他的宏或 语法糖 可供大家使用。但是需要注意的是，目前有些 实验性质 的功能需要注意谨慎使用。5Go28资讯网——每日最新资讯28at.com

5Go28资讯网——每日最新资讯28at.com

本文链接：http://www.28at.com/showinfo-26-90339-0.html体验超现代的 Vue ？Vue Macros 使用探索

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇： yolov部署到iPhone或终端实践全过程

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