在最近的 Vue Conf 2024 上，Vue 官方推荐了一款 Vue 的工具 Vine-Vue，在这里我先 respect 一下 Vue 团队对于开发者的鼓励~但是我想对 Vue 官方团队说：你真的觉得有必要推荐这个库吗？
图片
先来说说这个库的作用，这个库的作用就是：让 Vue 组件能通过函数式来定义。
举个例子，我们在平时写一个组件的时候，会通过模板的方式去定义。
图片
但是在使用了 Vue-Vine这个库之后，可以使用函数式的方式去定义。
图片
翻看了一下Vue-Vine的官方文档，总结出Vue-Vine这个库的初衷是：
图片
但是我感觉现阶段 Vue 生态就具备这样的能力了，且已经经过一段时间的打磨了呀！
说到一个文件里定义多个文件、逻辑更加聚合，其实本来 Vue 就支持！
如果你想要把多个组件写在同一个文件里、让逻辑更加紧凑，那是很简单的事情，只需要使用 Vue 的 defineComponent + h函数，即可做到：
图片
使用起来就跟平时 Vue 的模板使用别无二致。
图片
图片
甚至你可以把爷父孙组件全部定义在同一个文件里。
图片
使用起来也是跟平时 Vue 的模板使用别无二致。
图片
图片
肯定会有人说 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 来进行条件判断渲染，而 TSX 是比较接近原生语法的，其实条件判断也很像原生的写法，直接用 &&。
图片
图片
模板中使用 v-for 来循环渲染，TSX 更接近原生，需要使用数组方法 map 来进行渲染。
图片
图片
在模板中，可以通过插槽 slot 去传入一些 DOM 到组件内去渲染，TSX 中也一样有插槽，只不过用法不像模板那样用，而是跟 Vue 的h函数类似。
举个例子，我写一个 TSX 组件接收 default 和 test 两个插槽。
图片
如果你是从模板传到 TSX 中的话，那么传入的方式无差别，也是使用 template 传入。
图片
图片
如果你是从 TSX 传到 TSX 的话，那么传入方式通过 props 来传了。
图片
图片
当然你如果用了 JSX/TSX 的话，性能肯定是差一丢丢的，但是这点开销，真不算啥~大不了不用呗，用回 h 函数。
图片
本文链接：http://www.28at.com/showinfo-26-99888-0.html说实话，第一次对 Vue 有点小失望
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com
Copyright © 2016-2023 天津谷骐科技有限公司 版权所有 sitemap.xml
违法及侵权请联系：2376512515@qq.com 津ICP备18001702号
津公网安备 12010102000574号