当前位置: 欣欣网 > 码农

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

2024-07-08码农

已帮助数百位同学拿到了中大厂 offer

前言

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

首先在文章开头,我先表示对 尤大 以及 Vue 团队的 respect,这篇文章就是单纯表达个人在技术上的看法,并无夹杂其他个人情感~

在最近的 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 函数

    结语

    我是林三心,感谢您的阅读~

    1v1私教、找工作、全程陪跑、终身服务

    可直接加 Sunday老师 微信沟通,回复【资料】可直接领取 Sunday独家整理 大厂面试题、大厂真实面经