V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
variousdidt
V2EX  ›  程序员

前端框架技术选型讨论

  •  
  •   variousdidt · 2022-10-26 15:39:12 +08:00 · 8974 次点击
    这是一个创建于 787 天前的主题,其中的信息可能已经有所发展或是发生改变。

    vue 对比 react:

    对比 vue2 和 vue3 ,vue3 的组合式 API 无疑是更好的选择,以下优势针对于 vue3 版本而言; react 也仅指使用 create react app 方式构建的项目

    • 优势
    1. 使用 vite 搭建 vue3 项目框架,自带路由管理,sass ,less 支持的很好,yarn 装一下包即可使用,无需多余配置; react 需要手动配置各种 loader
    2. 组合式 API ,逻辑抽离方便,不再受限于生命周期函数; react 也可以做到
    3. vite 使用Rollup打包,速度大幅优于 webpack ,开发体验更好; react 大多使用 webpack ,打包速度一般
    • 劣势
    1. vue 不支持 IE11(reactive 使用的是 Proxy ,IE 全系不支持),react 进行相关配置后支持 IE9-IE11
    2. vue TS 支持不够好; react 天生支持
    3. vue2 升级 vue3 有代价,社区相关轮子未必及时适配; react 社区活跃度高,大版本升级更早,适配大概更全

    总的来说,react 就是 f(state) = UI ,仅仅是一个 UI 框架,其他的交给开发者自己配置;而 vite 生成的 vue 项目是一个功能更全的脚手架,帮开发者做了很多其他事(比如路由)。

    72 条回复    2023-05-27 01:20:18 +08:00
    nikolai
        1
    nikolai  
       2022-10-26 15:47:41 +08:00   ❤️ 1
    要比就 Vite 跟 Next ,Vue 跟 React 比,不能这么玩田忌赛马

    还有都快 2023 了 ,不要再用 CRA ,Next / Remix 什么的不用服务器渲染的话也就可以当 CRA 用
    233373
        2
    233373  
       2022-10-26 15:48:30 +08:00
    react+1
    variousdidt
        3
    variousdidt  
    OP
       2022-10-26 15:51:35 +08:00   ❤️ 1
    @nikolai vue 官网推荐使用 vite ,react 官网推荐 cra ;确实是后台,无需 ssr ,这点没说。next 用过,确实很快,但是 next 应该和 nuxt 讨论吧
    variousdidt
        4
    variousdidt  
    OP
       2022-10-26 15:54:30 +08:00
    @233373 +1 ,我也是一直 react ,但最近维护了 vue2 ,看了 vue3 ,vue3 很好,但我暂时只敢玩玩
    sjhhjx0122
        5
    sjhhjx0122  
       2022-10-26 16:14:43 +08:00   ❤️ 2
    构建工具就构建工具之间比,既然 react 是库就应该跟 vue 比首页白屏,渲染速度,写法优劣,而且 react vite 起个项目也很快啊,说实话真写大项目我宁愿用 angular 。小项目活动页 svelte ,solidjs 写起来真的比 react vue 强
    Akitora
        6
    Akitora  
       2022-10-26 16:15:13 +08:00 via Android   ❤️ 3
    here we go again
    heishu
        7
    heishu  
       2022-10-26 16:22:04 +08:00
    抛弃 vite 吧,turbopack 构建更快
    wu67
        8
    wu67  
       2022-10-26 16:22:57 +08:00
    vite 和 webpack 相比, 也就本地开发的时候快一点吧, 构建的话, 目标一致的时候, 其实时间差不多, 反正我个人感觉是这样的. 题外话, vite 也可以用来调试构建 react......

    vue2 升级 vue3 基本上是破坏性更新, 尤其是加入 ts 的话, 基本相当于整块业务的代码重写了, 还有包装取值的.value, 简直让人脑壳疼.

    至于框架, nuxt next 我个人觉得都是对应 vue/react 的强约束实践, 你喜欢 /跟你团队风格接近的话, 就会感觉很舒服, 反而则会觉得很难受.

    生态方面, vue 官方有给出非常完善的解决方案, 基本开箱即用.
    react 的 cra 相当于一个非常基础的‘启动器’, 可能小心翼翼的额外增加部分可选的配置, 并且配置范围也有限, 一些三方的配置轮子大多有一个巨大的问题, 更新周期过长, 甚至有些两三年没更新了.

    还有另一个让人难受的点, 就是 react 的各种生态有点分裂, 缺少一个一统江湖的轮子, 或者轮子是有自己的想法.... 例子就是, react-router, 不止 router, 还带着 http req... 另一个是状态库, redux recoil 等等等好几个轮子各方乱战...还有就是 antd, 整体功能都有, 各种小细节上让开发者难受, 就没考虑过 DRY
    xieren58
        9
    xieren58  
       2022-10-26 16:25:48 +08:00   ❤️ 1
    solidjs
    variousdidt
        10
    variousdidt  
    OP
       2022-10-26 16:25:51 +08:00
    @wu67 很同意
    variousdidt
        11
    variousdidt  
    OP
       2022-10-26 16:27:44 +08:00   ❤️ 1
    @heishu 宣传说比 vite 快 10 倍,被 Evan you 反驳了
    renhou
        12
    renhou  
       2022-10-26 16:30:20 +08:00
    自己开发,哪个用的顺手用哪个
    公司开发,根据公司技术栈,成员能力决定
    特定需求,必须用这个库,必须支持 xxx ,那就以需求为导向
    找工作,最好一个很强另一个也不差

    vue 和 react 各有各的特征和局限性,关键取决于你要拿它干啥解决啥
    kkkyrieliu
        13
    kkkyrieliu  
       2022-10-26 16:34:20 +08:00
    看团队。以我目前的经验,vue (自动挡)确实会帮助团队更好招人
    FightPig
        14
    FightPig  
       2022-10-26 16:35:53 +08:00
    vite 用了阵挺好用的,但总有时会有些问题,比如 hmr ,动不动就没用了,比如你自己写个组件,然后做成 npm 包,打包进项目,运行都没问题,也不报错,但 hmr 没用。后来一点点排查发现是 vuedragable 造成的,去掉又好了。
    murmur
        15
    murmur  
       2022-10-26 16:38:03 +08:00
    vue2 可以做 IE 兼容,没毛病
    wunonglin
        16
    wunonglin  
       2022-10-26 16:41:39 +08:00
    比来比去,不如直接用 Angular ,全套不用想那么多
    variousdidt
        17
    variousdidt  
    OP
       2022-10-26 16:46:55 +08:00
    @murmur vue2 可以,但是 vue3 组合式 API 个人感觉用过就不会愿意用生命周期的方式了
    ccyu220
        18
    ccyu220  
       2022-10-26 16:51:12 +08:00   ❤️ 2
    天天月经贴没意思

    1 、有选型能力,React 的生态什么都能满足
    2 、快速出产品,Vue 全家桶,你选型的时候我项目都写完了
    3 、Vite 和 CRA ,一般的项目速度没必要分的这么细,况且 Vite 快速上手,为什么不用。
    4 、都快 2023 年了,你可以说它的 TS 实现没有 React 那么简洁(例如 Props ),但没必要说 Vue 对 TS 支持不好
    5 、Vue 版本都发到 3.2.41 了,还说 vue2 升级 vue3 有代价

    这种现成的东西难道不是看自己选择吗,别人说的就能影响你的决策?

    比如我,首选肯定是 React ,并且是 next.js 。

    但是你做公司的小项目,照顾所有人能力上下,那 Vue 全家桶是不是就是更好的选择?

    不管是上面那两个和 Angual 、Solid.js 、Svelte ,还是 Next 、Nuxt ,或者 Vite 、Webpack 、刚公布的 Turbopack

    潮流向前,工具永远是适时而用
    wangxiaoaer
        19
    wangxiaoaer  
       2022-10-26 16:55:04 +08:00
    我以前天天黑 ng ,最近把 ng 的最新文档又过了一遍觉得真是香,可惜团队都是 vue 一把梭。
    zhwithsweet
        20
    zhwithsweet  
       2022-10-26 17:59:58 +08:00
    https://github.com/fisand/vite-wagmi-starter 求个 star

    现代 Dapp 前端模版
    gdtdpt
        21
    gdtdpt  
       2022-10-26 18:15:56 +08:00
    ng 的香真是懂的都懂,可惜有点门槛变成小众了,单干我选 react ,团队还是 vue 吧,太自由的东西不能指望人人都懂编程规范,交流起来太累。
    walpurgis
        22
    walpurgis  
       2022-10-26 18:18:57 +08:00 via iPhone
    2 也可以用组合式 api 和 vite ,不能作为 3 的优势
    Ritr
        23
    Ritr  
       2022-10-26 18:35:51 +08:00
    react + vite + ts
    Ritr
        24
    Ritr  
       2022-10-26 18:38:20 +08:00
    @gdtdpt ng 确实很好
    jones2000
        25
    jones2000  
       2022-10-26 19:07:19 +08:00
    选型前先给出项目预算,否则就是空谈,没有意义。5000 的单子 和 500W 的单子都做一个聊天工具,选型会一样吗
    YuTengjing
        26
    YuTengjing  
       2022-10-26 19:09:24 +08:00
    1. 正经人谁用用 cra ,现在很多人都在用 vite + react 。cra 一直没迁移 vite 怀疑是提前收到消息 webpack 的作者在悄咪咪的搞 turbopack
    2. 前端框架就和前端框架比较,cli 就和 cli 比较,cra 要比也是比 vue-cli
    3. vue3 的 TS 支持很好
    4. 使用 cra 默认已经配置好了很多东西,并不需要改动很多配置,难道 vite 一行配置都不需要了?比配置少,没有框架比得过 parcel
    5. 使用路由不就是装一个包几行代码的事吗?
    940701122
        27
    940701122  
       2022-10-26 19:19:49 +08:00 via iPhone
    中后台项目有个关键的点是目前 react 没法完美实现 vue 的 keepAlive
    vecZro
        28
    vecZro  
       2022-10-26 19:26:38 +08:00
    @variousdidt vue2.7 支持 组合式 api 啊
    LiYechao
        29
    LiYechao  
       2022-10-26 19:31:09 +08:00
    @variousdidt vite + react + ts 它不香吗?
    signalas1
        30
    signalas1  
       2022-10-26 23:44:26 +08:00
    React React React
    YuTengjing
        31
    YuTengjing  
       2022-10-26 23:57:26 +08:00 via Android
    @ccyu220 vue2 升级 vue3 升级代价是很高的,先不论:
    1. 语言 js 到 ts
    2. vue3 应该没 mixin 吧,vue2 逻辑复用可大量用,这块是重灾区
    3. 一个成熟的大型 vue2 项目依赖十几个其它 vue2 库很合理吧,稍微大点公司都有自研的组件库
    4. 代码风格官方推荐 composition api ,把旧的组合式 api 组件迁移到 compoaition api 这也是隐形成本,说是隐形是因为没必要立马去做,甚至可以选择不做
    14
        32
    14  
       2022-10-27 00:03:55 +08:00   ❤️ 1
    我最近的选择也是 Vite + React + TS + Vitest
    dayeye2006199
        33
    dayeye2006199  
       2022-10-27 00:35:22 +08:00
    选型 =

    1. 你团队里大部分人会什么?
    2. 我们以后招到的人会不会这个,或者很快学会用这个?
    3. 我们能不能快速实现我们现在需要的东西?
    4. 我们以后能不能快速实现我们可能需要的东西?

    你看,这 4 个问题,哪个和技术有关呢?
    MrHyde
        34
    MrHyde  
       2022-10-27 00:55:45 +08:00
    你还是老老实实用 react 吧,简单的很
    DOLLOR
        35
    DOLLOR  
       2022-10-27 01:05:00 +08:00
    实在不行就
    TS + vanilla + web component
    WasteNya
        36
    WasteNya  
       2022-10-27 02:10:02 +08:00 via Android
    @940701122 有的,react activation ,还很灵活
    Aloento
        37
    Aloento  
       2022-10-27 03:52:25 +08:00
    我还是觉得传统 HTML + CSS + ES5 适合你
    yechentide
        38
    yechentide  
       2022-10-27 06:01:46 +08:00 via iPhone
    请问楼上大佬们说的 ng 是什么?
    zhennann
        39
    zhennann  
       2022-10-27 06:27:53 +08:00
    要想多快好省,用一个 CabloyJS 全栈框架就够了,可以做到:
    1 、只需一个项目,既可同时实现“后台管理系统”和“前台应用”;
    2 、只需一个项目,既可同时跨端 pc 、mobile 。mobile 端是接近原生体验。
    下面以“微信一起点菜”为例:
    1 )前台点菜应用: https://test.cabloy.com/?appKey=diancai-h5%3AappDianCaiWechatH5&appIsolate=true
    2 )后台商家管理系统: https://test.cabloy.com/
    3 )以上两个链接可以分别用 pc 和 mobile 打开。全新交互体验,全新架构设计,试过便知。
    SeanWeirdo
        40
    SeanWeirdo  
       2022-10-27 06:57:09 +08:00
    @yechentide angular
    solos
        41
    solos  
       2022-10-27 09:16:58 +08:00   ❤️ 3
    这时候 angular 的先进性就体现出来了 别的框架再加上些乱七八糟的东西最后也不一定能达到 angular 的水平 angular 在终点站等你们 众所周知 angular + 菜鸟 = react/vue + 老鸟
    Zzzz77
        42
    Zzzz77  
       2022-10-27 09:22:06 +08:00   ❤️ 2
    网友:Angular YYDS
    现实:公司让用什么你就用什么
    jy02534655
        43
    jy02534655  
       2022-10-27 09:22:24 +08:00
    @variousdidt vue 2.7 组合式 api 直接可以用,vue 2.6 版本可以用 @vue/composition-api 扩展来用 组合式 api ,我们公司现在就是这样搞的,另外用 vue cli 5.0.8 创建的 vue 2.6 版本项目在 package.json 里面配置好 browserslist 无需其他扩展就可以兼容 ie11
    KouShuiYu
        44
    KouShuiYu  
       2022-10-27 09:29:53 +08:00
    @variousdidt Vue2.7 以后可以用组合式 API 的,用法上和 Vue3 没啥区别
    beisilu
        45
    beisilu  
       2022-10-27 09:36:43 +08:00
    我感觉 vue 和 flutter 里的 getx 库很像,屏蔽了很多细节加入很多糖。但是 getx 在 flutter 社区里也是褒贬不一。
    akakidz
        46
    akakidz  
       2022-10-27 09:47:15 +08:00
    2022 年了技术选型还有人推荐 angular 我是没想到的
    beginor
        47
    beginor  
       2022-10-27 09:47:29 +08:00
    angular +1
    arfaWong
        48
    arfaWong  
       2022-10-27 09:56:15 +08:00
    @akakidz 推荐 Angular 有何不妥?你认为的 Angular 不会是 AngularJS 吧?
    Bazingal
        49
    Bazingal  
       2022-10-27 10:18:13 +08:00
    2022 年了还有人看不起 angular 我是没想到的
    wuxqing
        50
    wuxqing  
       2022-10-27 10:19:48 +08:00
    react 14,256,709
    vue 3,067,705
    @angular/core 2,496,934
    看下载量,angular 貌似也不差
    Chad0000
        51
    Chad0000  
       2022-10-27 10:21:57 +08:00 via iPhone   ❤️ 1
    作为一个在公司和个人项目中使用 angular 好多年的全端开发,不是很了解上面遇到的问题(因为我没遇到过)。
    vHypnos
        52
    vHypnos  
       2022-10-27 10:22:33 +08:00
    自从写了 Vue ,Next+ React 是真的香。
    akakidz
        53
    akakidz  
       2022-10-27 10:29:09 +08:00
    @arfaWong angular 在国内招人的成本要比 vue 和 react 高的多
    leeum
        54
    leeum  
       2022-10-27 10:33:05 +08:00
    没人提 Umi+React ? 搭配 Antd 用起来也算是全家桶了吧
    simo
        55
    simo  
       2022-10-27 11:16:44 +08:00
    接触过的公司包括朋友公司,基本效率第一原则。我选型的话,肯定根据团队经验和能力来定,通用的,比如成熟三方库、自建库都给你提前做好了。
    大部分人对框架的使用,在业务开发、复制粘贴层面即可。
    kinge
        56
    kinge  
       2022-10-27 11:17:58 +08:00
    Next+ React+Tailwindcss
    ragnaroks
        57
    ragnaroks  
       2022-10-27 11:35:24 +08:00
    从维护性、容易难度、生态支持、社区支持来说,只有 react 。

    但是考虑到大多数前端并不是系统学习而是批站看一个星期视频赶鸭子上架,所以我在国内还是推荐 vue 。
    danhahaha
        58
    danhahaha  
       2022-10-27 11:42:33 +08:00
    小马过河,别听他们给你说,3 个都上手试下,最多一周时间
    nazhenhuiyi294
        59
    nazhenhuiyi294  
       2022-10-27 12:05:09 +08:00
    建议从找工作的角度开始思考,现在 next 工作应该是最多的。
    janyin
        60
    janyin  
       2022-10-27 12:35:35 +08:00
    vite + react + ts
    FreshOldMan
        61
    FreshOldMan  
       2022-10-27 13:27:01 +08:00
    vite + react + ts
    variousdidt
        62
    variousdidt  
    OP
       2022-10-27 13:39:22 +08:00
    @leeum umi 太重了,首屏加载时间要优化优化
    QKgf555H87Fp0cth
        63
    QKgf555H87Fp0cth  
       2022-10-27 15:39:13 +08:00
    react 需要手动配置各种 loader?

    CRA 就行啊
    QKgf555H87Fp0cth
        64
    QKgf555H87Fp0cth  
       2022-10-27 15:39:37 +08:00
    我现在是 Vite + React + Recoil + TS
    QKgf555H87Fp0cth
        65
    QKgf555H87Fp0cth  
       2022-10-27 15:39:52 +08:00
    还有 Next
    anonymous2351d00
        66
    anonymous2351d00  
       2022-10-27 16:37:59 +08:00
    angular + ng-zorro
    angular + ng-zorro-mobile
    angular + ng-alain
    hez2010
        67
    hez2010  
       2022-10-27 16:47:57 +08:00 via iPad
    推荐 solidjs ,类似 react ,但比 react 快,还比 react 小。
    iamv2er
        68
    iamv2er  
       2022-10-27 17:18:47 +08:00 via iPhone
    几年前就看到类似的帖子了
    jamosLi
        69
    jamosLi  
       2022-10-27 17:21:24 +08:00
    一个 cra 我还要查一下是不是啥新技术。
    你要是公司用,稳定,安全,可维护是第一要素,是字面上的三要素,不要说我也可以,然后通过一堆骚断腰的操作达到相应目的。其次就是一个稳定,易用,长期维护的 UI 库。更重要的一点是市场上拥有足够多的相关技术人才。

    所以这一堆里 angular 第一个被干掉,没那多人会,工作不是炫技。
    UI 库到目前来说就两个 antd 和 vant 。

    所以很好选 pc react ,移动端 vue ,不出彩,但是不会错。
    Mirachael
        70
    Mirachael  
       2022-10-28 09:53:05 +08:00
    @jamosLi Angular 没什么花里胡哨的东西吧
    luvxy
        71
    luvxy  
       2022-10-28 10:22:35 +08:00
    一位普通公司的前端组长给个建议吧,看你项目是啥,看你团队怎么样?

    普通的后台管理系统, 你们也是一家很普通的公司,都是写业务代码的情况, 那就 vue 上手都容易,做的也快. 模版语法+option api,写法基本固定了一个下限了(vue 官网说了 Composition 解决了啥问题,并不是一定非要用这玩意的,先进的不一定是最合适的),简单易读,接手别人代码速度更快,招人也很好招 薪资也不会那么高,甚至要求不高直接去培训班进货就能干出来项目 ,相关库基本都是官方那套稳定且文档多. 这个选择就是不加班.

    react 对人员要求较高,你想要项目稳定易维护,需要研究各种项目规范(我见过的烂代码太多了, 包括大厂员工) ,jsx 灵活自己造轮子很爽,周边很多想咋搭配怎么搭配, 各种玩新玩具,非常容易出现不同人用不同的库,一个项目里面各种各样的写法,加班写坑填坑非常适用, 适合想要跳槽想再项目里面炫技,给简历加亮点的情况. 而且你造出啥轮子,封装复杂功能的话, 让你在公司变得不可替代,啥人接手都会觉得难受

    react 和 vue 脚手架根本不需要纠结,越简洁的越好, 项目大了肯定得自己修改,配置甚至自己写 plugin 的
    web1996
        72
    web1996  
       2023-05-27 01:20:18 +08:00 via Android
    @940701122 使用 swr 缓存请求,使用 store 管理状态,也能实现 vue 的缓存功能,体验还更好。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2457 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 02:42 · PVG 10:42 · LAX 18:42 · JFK 21:42
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.