文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-11-29 22:28

关注

图片

这些宏是库的一部分,主要是实现了 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 还提供了很多其他的宏或 语法糖 可供大家使用。但是需要注意的是,目前有些 实验性质 的功能需要注意谨慎使用。


来源:程序员Sunday内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯