Vue3 超前版发布三个新特性!有望全面拥抱 JSX/TSX!

前言

大家好,我是林三心,用最通俗易懂的话讲最难的知识点是我的座右铭,基础是进阶的前提是我的初心~

拥抱 JSX/TSX?

我们都知道 Vue 一直主流是使用 template 模板来进行页面的编写

而就在最近,Vue3 的超前项目 Vue Macros 中,发布了 defineRender、setupComponent、setupSFC 这些新的 API,这代表了,以后 Vue3 有可能可以全面拥抱 JSX/TSX 了!!

说这个新 API 之前,我们先来说说什么是 Vue Macros

Vue Macros

Vue Macros 是由 Vue 团队成员维护的一个 超前版 Vue

许多 Vue3 的新 API 都是在这个项目中孵化出来的,比如 Vue3.4 的:

  • defineOptions
  • defineModel

所以从 Vue Macros 这个项目,也可以预见到 Vue3 未来可能会发布的新 API 和新特性

Vue Macros 中很多功能都是超前功能,在 Vue3 正式版中并没有这些功能,如果想要体验这些超前功能,需要安装对应的插件

bash 复制代码
npm i -D unplugin-vue-macros

并在 vite.config.ts 中配置这个插件

回顾 Vue3 现有渲染方式

template

我们在开发 Vue 时,在很多情况下,都会使用 template 来编写页面

h 函数

但是在编写一些比较灵活且基础的组件(比如组件库)时,使用 template 来编写比较费劲,所以有些时候也会使用 h 函数来编写

但是可以看到,虽然 h 函数更加贴近 JavaScript,更加灵活,但是当层级太多时,写起来也是非常的不方便~

@vitejs/plugin-vue-jsx

所以 Vue3 在之前推出了 @vitejs/plugin-vue-jsx 这个插件,目的就是为了开发者能在 Vue3 项目中去使用 JSX/TSX

bash 复制代码
pnpm i @vitejs/plugin-vue-jsx

拥抱 JSX/TSX!!!

defineRender

defineRender 是 Vue 超前项目 Vue Macros 中推出的一个新的 API,它很有大可能会在未来的 Vue3 正式版中推出

我们可以通过安装 Vue Macros 的插件来体验这一超前功能

setupComponent

setupComponent 让 Vue3 越来越像 React 了!!!在超前项目中,推出了 defineSetupComponent 这个 API ,让你可以使用 JSX 去编写一个组件

setupSFC

setupSFC 的模式下,无需在包裹 defineSetupComponent 这个函数了,甚至可以直接写在 tsx 文件中,来编写一个 SFC

结语 & 加学习群 & 摸鱼群

我是林三心

  • 一个待过小型toG型外包公司、大型外包公司、小公司、潜力型创业公司、大公司的作死型前端选手;
  • 一个偏前端的全干工程师;
  • 一个不正经的掘金作者;
  • 一个逗比的B站up主;
  • 一个不帅的小红书博主;
  • 一个喜欢打铁的篮球菜鸟;
  • 一个喜欢历史的乏味少年;
  • 一个喜欢rap的五音不全弱鸡

如果你想一起学习前端,一起摸鱼,一起研究简历优化,一起研究面试进步,一起交流历史音乐篮球rap,可以来俺的摸鱼学习群哈哈,点这个,有7000多名前端小伙伴在等着一起学习哦 --> 摸鱼沸点

相关推荐
一袋米扛几楼9833 分钟前
【前端】从零开始的搭建顺序指南(技术栈:Node.js + Express + MongoDB + React)book-management
前端·node.js·express
yzhSWJ1 小时前
CSS Position 属性完全指南
前端·css
xcLeigh1 小时前
HTML5好看的水果蔬菜在线商城网站源码系列模板7
前端·html·html5
非凡网站1 小时前
企业网站html源代码 企业网站管理源码模板
前端·html
brzhang2 小时前
接口又乱又难用?老司机带你掌握 8 个 API 设计绝招,告别低效协作!
前端·后端·架构
brzhang2 小时前
搞懂 HTTP/1、HTTP/2、HTTP/3:让你的 Web 应用快如闪电,面试不再怕!
前端·后端·架构
林太白2 小时前
NestJS用户模块CRUD和分页实现
前端·javascript·nestjs
诸神缄默不语2 小时前
已有 npm 项目,如何下载依赖、编译并运行项目
前端·npm·node.js
brzhang2 小时前
JS 代码是如何跑起来的?带你深入 V8 引擎和事件循环的幕后
前端·javascript·后端
天天扭码2 小时前
面试常考 | 深入理解 JavaScript 中手写 new 操作符
前端·javascript·面试