当前位置：首页 > 科技 > 软件

说实话，第一次对 Vue 有点小失望

来源：责编：时间：2024-07-09 18:16:44 63观看

导读在最近的 Vue Conf 2024 上，Vue 官方推荐了一款 Vue 的工具 Vine-Vue，在这里我先 respect 一下 Vue 团队对于开发者的鼓励~但是我想对 Vue 官方团队说：你真的觉得有必要推荐这个库吗？Vue-Vine图片先来说说这个库的作用，这

在最近的 Vue Conf 2024 上，Vue 官方推荐了一款 Vue 的工具 Vine-Vue，在这里我先 respect 一下 Vue 团队对于开发者的鼓励~但是我想对 Vue 官方团队说：你真的觉得有必要推荐这个库吗？

Vue-Vine

图片

先来说说这个库的作用，这个库的作用就是：让 Vue 组件能通过函数式来定义。

举个例子，我们在平时写一个组件的时候，会通过模板的方式去定义。

图片

但是在使用了 Vue-Vine这个库之后，可以使用函数式的方式去定义。

图片

翻看了一下Vue-Vine的官方文档，总结出Vue-Vine这个库的初衷是：

想要做到像 React JSX 那样的组件定义方式
可以在同个文件里定义多个组件
使得逻辑更加聚合，提高开发效率

图片

但是我感觉现阶段 Vue 生态就具备这样的能力了，且已经经过一段时间的打磨了呀！

定义多文件、逻辑聚合？Vue 本来就可以！

说到一个文件里定义多个文件、逻辑更加聚合，其实本来 Vue 就支持！

如果你想要把多个组件写在同一个文件里、让逻辑更加紧凑，那是很简单的事情，只需要使用 Vue 的 defineComponent + h函数，即可做到：

图片

使用起来就跟平时 Vue 的模板使用别无二致。

图片

甚至你可以把爷父孙组件全部定义在同一个文件里。

图片

使用起来也是跟平时 Vue 的模板使用别无二致。

图片

h 函数太麻烦？那就用 TSX/JSX！

肯定会有人说 Vue 的h函数用起来太麻烦了，各种层级嵌套，写起来没有 TSX/JSX 那么爽。

其实，在 Vue 中也可以写 TSX/JSX !!

pnpm i @vitejs/plugin-vue-jsx -D

安装完毕后，需要在 vite.config.ts 中去进行插件配置。

图片

配置完就可以写 TSX 啦！！！

基本渲染 & 响应式 & 事件

我们可以新建一个 TsxComp.tsx 文件，来写 TSX 。写 TSX 可以不在 Vue文件中去写。

图片

接着我们可以去渲染这个组件。

图片

可以看到基本的渲染 & 响应式 & 事件已经实现。

图片

v-if 条件判断渲染

模板中一般使用 v-if 来进行条件判断渲染，而 TSX 是比较接近原生语法的，其实条件判断也很像原生的写法，直接用 &&。

图片

v-for 循环渲染

模板中使用 v-for 来循环渲染，TSX 更接近原生，需要使用数组方法 map 来进行渲染。

图片

slot 插槽

在模板中，可以通过插槽 slot 去传入一些 DOM 到组件内去渲染，TSX 中也一样有插槽，只不过用法不像模板那样用，而是跟 Vue 的h函数类似。

举个例子，我写一个 TSX 组件接收 default 和 test 两个插槽。

图片

如果你是从模板传到 TSX 中的话，那么传入的方式无差别，也是使用 template 传入。

图片

如果你是从 TSX 传到 TSX 的话，那么传入方式通过 props 来传了。

图片

JSX/TSX 性能差

当然你如果用了 JSX/TSX 的话，性能肯定是差一丢丢的，但是这点开销，真不算啥~大不了不用呗，用回 h 函数。

图片

本文链接：//www.dmpip.com//www.dmpip.com/showinfo-26-99888-0.html说实话，第一次对 Vue 有点小失望

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

上一篇：从ESB服务组合编排到NetflixConductor微服务编排

下一篇：还在用 Lodash？这个爆火的替代品贼强，性能提升300% ，体积减少 97%！

标签：

热门焦点

一加Ace2 Pro官宣：普及16G内存引领24G

一加官方今天继续为本月发布的新机一加Ace2 Pro带来预热，公布了内存方面的信息。“淘汰 8GB ，12GB 起步，16GB 普及，24GB 引领，还有呢？#一加Ace2Pro#，2023 年 8 月，敬请期待。”同时
2023年Q2用户偏好榜：12+256G版本成新主流

3月份的性能榜、性价比榜和好评榜之后，就要轮到2023年的第二季度偏好榜了，上半年的新机潮已经过去，最明显的肯定就是大内存和存储的机型了，另外部分中端机也取消了屏幕塑料支架
6月安卓手机性价比榜：Note 12 Turbo断层式碾压

6月份有一个618，虽然这是京东周年庆的日子，但别的电商也都不约而同的跟进了，反正促销没坏处，厂商和用户都能满意。618期间一些产品也出现了历史低价，那么各个价位段的产品性价比
Golang 中的 io 包详解：组合接口

io.ReadWriter// ReadWriter is the interface that groups the basic Read and Write methods.type ReadWriter interface { Reader Writer}是对Reader和Writer接口的组合，
Java NIO内存映射文件：提高文件读写效率的优秀实践！

Java的NIO库提供了内存映射文件的支持，它可以将文件映射到内存中，从而可以更快地读取和写入文件数据。本文将对Java内存映射文件进行详细的介绍和演示。内存映射文件概述内存
三万字盘点 Spring 九大核心基础功能

大家好，我是三友~~今天来跟大家聊一聊Spring的9大核心基础功能。话不多说，先上目录：图片友情提示，本文过长，建议收藏，嘿嘿嘿！一、资源管理资源管理是Spring的一个核心的基础功能，不
10天营收超1亿美元，《星铁》比《原神》差在哪？

来源：伯虎财经作者：陈平安即便你没玩过《原神》，你一定听说过的它的大名。恨它的人把《原神》开服那天称作是中国游戏史上最黑暗的一天，有粉丝因为索尼在PS平台上线《原神》，怒而
阿里大调整

来源：产品刘有媒体报道称，近期淘宝天猫集团启动了近年来最大的人力制度改革，涉及员工绩效、层级体系等多个核心事项，目前已形成一个初步的“征求意见版”：1、取消P序列
onebot M24巧系列一体机采用轻薄机身设计，现已在各平台开售

onebot M24 巧系列一体机目前已在线上线下各平台同步开售。onebot M24 巧系列采用一体化轻薄机身设计，最薄处为 10.15mm，拥有宝石红、午夜蓝、石墨绿、雅致