V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Richard14
V2EX  ›  Vue.js

有关 TypeScript 思想和 Vue3 的正确使用方式

  •  
  •   Richard14 · 2022-06-13 20:00:35 +08:00 · 4835 次点击
    这是一个创建于 927 天前的主题,其中的信息可能已经有所发展或是发生改变。

    这几天新项目用 vue3 写已经大概搞出雏形了。单说使用层面的体验上,setup 确实是个好用的东西。虽然代码里需要多写一写 ref 之类的标记,但直接根据闭包级别调度所有数据和代码,确实比 vue2 的分体式体验好上不少,再加上实际代码里需要展示的变量不是全部,而中间变量既不需要写 ref 又能享受闭包的好处,属实是方便了不少。

    配置方面,个人感觉上 vite 比起 2 时代 vue-cli 的配置是更清晰了些,我曾因不熟悉 webpack ,而 cli 的文档又多有语焉不详之处而受折磨,这次配置没有出现类似情况。

    只能说,曾经看到网上有人说 vue3 是非常失败的作品,在社区也不被认可,现在看来这是屁话了,也许是有利益相关才会说出这种评价。

    不过话又说回来,最近几天的写作过程中,虽然创建的是 ts 项目,但是感觉自己还是在写 js ,没有任何区别。至多算是把原先 js 参数无法设置默认值这种问题修正,让它看起来更像现代语言了一些这样。类型标注方面也没有标的那么细,如果仅是出于方便后续开发维护代码的角度出发,其实也只在关键位置定义了类型,并没有体验到什么太大的变化。

    由于原生 js 还是面型过程氛围较浓的语言,虽然在看 ts 说明书过程中它允许使用对象和接口,但是开发过程中实在搞不太清楚什么环境下需要使用,值得使用,毕竟面向过程已经能解决问题。感觉上就是原先希望通过一个项目学习并了解 ts ,但是写完后发现完全没有收获,还是像原来一样我行我素?

    32 条回复    2022-06-15 01:03:29 +08:00
    yafoo
        1
    yafoo  
       2022-06-13 20:14:23 +08:00 via Android
    我也不明白为啥那么多人批 vue3
    enchilada2020
        2
    enchilada2020  
       2022-06-13 20:27:51 +08:00 via Android
    @yafoo 好像多数都在吐槽 Vue3 与 TS 集成度不好 以及生态差的问题
    GeruzoniAnsasu
        3
    GeruzoniAnsasu  
       2022-06-13 20:29:42 +08:00
    @yafoo 大概是过去式+仍然不能适配所有特定场景的原因
    wunonglin
        4
    wunonglin  
       2022-06-13 20:44:45 +08:00
    和 ts 配合起来体验太差,各种地方让人看起来还是 vue2 的那套思维。可能是我 ng 写多了,用 vue 一直很难受
    zackwan95
        5
    zackwan95  
       2022-06-13 20:46:19 +08:00   ❤️ 2
    @yafoo 生态实在太太太差了,或许你一直用 vue 感觉不到,但是用惯了 react 换 vue 简直坑爹。
    DOLLOR
        6
    DOLLOR  
       2022-06-13 20:53:24 +08:00   ❤️ 6
    似乎还是有不少人对 TS 有什么误会,以为增加了 type 就是面向对象,就要写 class ,就要去折腾“面向对象的三大特性”,然后就要告别过去的“面向过程”思维。

    我自从写 TS 之后,也没感觉思维跟 JS 有什么巨大的决裂。不管以前用面向过程,还是函数式,还是事件驱动式,现在也能继续用。不会因为不写 class 就不配写 TS 了。
    TS 给我到来的好处,首先就是编辑器懂得我想要什么,能正确地提示变量名、字段名,不需要跑起来在开发者工具里打断点才知道这特么是啥玩意。
    然后就是在写代码的时候就能及早发现错误,比如 promise 忘记 await 了,或者回调函数的参数位置写错了,编辑器就飘红。
    还有就是 interface 、type 声明自身也能起到文档、注释的辅助作用,后期维护也不会那么抓瞎。

    当然,要享受到这些好处有个很大的前提,就是你要有一套完善的工具链。比如你的编辑器对 TS 有完整的支持(比如 vscode 、webstorm ),你用的框架、类库提供完善的声明(比如我用的是 react ,跟 TS 契合得非常好。vue 跟 TS 契合度可能不如其他两个框架)。当你充分享受到这些好处之后,可能会变得越来越懒了,懒得背接口、字段,没有智能提示就浑身难受,回不去的感觉。(也许 JSDOC + ts-check + 一个强大的编辑器也能达到 TS 一半的功力吧)
    yafoo
        7
    yafoo  
       2022-06-13 20:55:37 +08:00 via Android
    @zackwan95 我的意思是 vue3 和 vue2 比,为什么会有人批 v3
    tedding
        8
    tedding  
       2022-06-13 21:03:07 +08:00 via iPhone
    @DOLLOR 回不去了是真的。用了 angular 之后…更回不去了……vue3 最近几个月也在用,有了 ng 的铺垫,vue3 的 ts 支持,没有那么讨厌 vue 了😂😂😂,用了好几年 angular 一直挺排斥 vue 的。我会认认真真写类型,因为人真的很容易忘,没有了 ts 的类型保护,有点胆战心惊。
    Zzzz77
        9
    Zzzz77  
       2022-06-13 21:14:39 +08:00   ❤️ 1
    我其实不明白 vue3 生态差在哪儿。。我用 vue3 + ts 做过两个较复杂的前端项目,完全 hold 得住,说生态差真的说不过去。关于与 ts 的配合,首先你需要把 volar 打开,其次你可以用 tsx ,其他我不知道还有什么地方会让我觉得 “体验差”,当然你要硬是拿去跟 angular 比,是有差距,但是 react 去跟 angular 同样有差距,这个更多是框架哲学和定位不同导致的,简单地说就是:你到底是不是真的需要那么深度的集成?

    至于为什么那么多人不喜欢 vue3 ,我个人的看法主要是以下几点:
    1. 讨厌 vue ,和 1 、2 或 3 没关系;
    2. 用 vue2 的思维开发 vue3 ,水土不服;
    3. mmp ,学不动了还一直更新;
    4. 也许期望过高?

    最后说下我个人在使用 vue3 过程中遇到的糟心的地方:
    1. volar 就目前来看仍有些不太好的地方,具体不展开,虽然比起一年前已经好太多了;
    2. 新版 devtools 日常卡死,需要重装才能解决;
    wangyzj
        10
    wangyzj  
       2022-06-13 21:17:32 +08:00
    vue2 挺好
    jeffh
        11
    jeffh  
       2022-06-13 21:28:11 +08:00
    vue3 写起来比较舒服
    runze
        12
    runze  
       2022-06-13 21:37:55 +08:00
    vue 有个特点:不管是写 react 的还是写 angular 的,都优先批判它;但是如果把两方对它的批评放一起,就能得到很奇妙的结果。
    makelove
        13
    makelove  
       2022-06-13 21:38:52 +08:00
    何不来用 solid-js? 集 react 和 vue 优点于一身,ts 支持也非常好
    特别是和 vue 一样再也没有那些烦死人的 hooks 规则了,感觉重回经典
    gouflv
        14
    gouflv  
       2022-06-13 22:27:49 +08:00 via iPhone
    虽说 vue3 并不失败,但也没有特别成功。
    太多历史包袱推不掉,只好再让开发者再忍一忍,或许 vue4 就好了。

    你如果实在等不了,那就跳出 vue 这个圈子,模版爱好者去 ng ,jsx 爱好者去 react 或者 solidjs 。
    lujiaosama
        15
    lujiaosama  
       2022-06-13 22:51:19 +08:00
    真的喜欢面向对象的写法那就去写 nestjs, 天天就是跟对象打交道, oop 写得不要不要的. 回到前端, 能函数式写法为啥要写 class , vue 对 ts 的支持力度没有 react 好是真的,但还是比原生 js 好太多了.
    walpurgis
        16
    walpurgis  
       2022-06-14 00:10:49 +08:00
    ts 的好处,对接过那种几十个字段,或对象嵌套 3 层以上的接口吗,还有取不到值,发现是后端同学单词拼写错误。
    接口定义手写麻烦?有很多通过 OpenAPI 定义生成代码的轮子。
    还有各种三方库,类型定义有时候比文档更有用。
    terranboy
        17
    terranboy  
       2022-06-14 00:17:18 +08:00
    小项目 不复杂的项目 我也不知道 VUE 里写 TS 干嘛 有点脱裤子放屁
    sjhhjx0122
        18
    sjhhjx0122  
       2022-06-14 08:42:34 +08:00
    @Zzzz77 volar 实在是不好用,写了这么久了,就想要个自定义指令提示,想要个组件没引入的报错,可是我现在改个类型,他都不一定能实时读到,还得我刷新 vscode 窗口。最主要还是 vue3 上了 ts 之后,props 类型有的时候跟定义的类型是有出入的,还不能用外部引入的 type
    sjhhjx0122
        19
    sjhhjx0122  
       2022-06-14 08:59:25 +08:00
    @lujiaosama class 和函数式非得争个高低就有点信仰的味道了,vue option api 的那些问题,写 class 的 ng 基本都不会有,其实 vue 现在有点像 ng1 升级 ng2 了,还不如直接大改一下,现在这样跟 ts 结合有的时候写起来是真的不顺手
    Qcui
        20
    Qcui  
       2022-06-14 09:06:57 +08:00
    我对 Vue3 生态印象不好的一点就是:volar 内存占用太高了,写 vue3 比写 react 更消耗内存资源
    bootvue
        21
    bootvue  
       2022-06-14 09:16:23 +08:00
    ts 在多人协作场景下优势比较明显
    sky857412
        22
    sky857412  
       2022-06-14 09:29:20 +08:00
    volar 插件不好用,自动导包提示没有,也可能我用的姿势不对
    moreant
        23
    moreant  
       2022-06-14 09:35:17 +08:00
    js 转 ts ,对象里点不出来属性就开始慌了,会检查是不是写错了或者拼错了
    irisdev
        24
    irisdev  
       2022-06-14 11:46:37 +08:00
    vue3 有什么好用的组件库吗
    xujiahui
        25
    xujiahui  
       2022-06-14 13:39:20 +08:00
    @irisdev #24 已经好多组件库了,我用的 naive-ui 感觉还行
    apeople
        26
    apeople  
       2022-06-14 15:15:39 +08:00
    反正我 vue2 升到 vue3 开发体验提升巨大
    agileago
        27
    agileago  
       2022-06-14 15:28:16 +08:00
    @wunonglin 来用 vue3-oop https://github.com/agileago/vue3-oop ts 支持完美,即享受到 tsx 的便利又有响应式自动精准更新,再加上自动化的依赖注入(类似 ng,但简化)处理全局状态,无需再去寻找各种库,更深的是,假如你有 nestjs 的架构经验,同样可以用在前端,使整个项目结构更清晰易懂, 装饰器真是个好东西

    <script src="https://gist.github.com/agileago/211f80caa8bb7721e24943777d602dad.js"></script>
    agileago
        28
    agileago  
       2022-06-14 15:33:43 +08:00
    不得不说,vue3 对面向对象的支持太棒了
    iikebug
        29
    iikebug  
       2022-06-14 16:19:03 +08:00
    @makelove solid 生态太差了,基本上啥都要自己造轮子
    wunonglin
        30
    wunonglin  
       2022-06-14 16:56:37 +08:00
    @agileago #27 其实我用 vue2+ts 也能较为接受。但是一旦和别人共事的 vue 项目,代码质量简直难以想象(我没权利管人家业管不来),所以还是有 ng 这样的框架来约束比较好。除非团队里全是大佬,个个代码质量都是开源水平。

    本来 vue 就是上手快,门槛低,导致新人暴增,也不是个个人心里都有“最佳实践”,写出的东西像团屎一样,恶心至极。

    上面观点是我做了那么多年接触的项目里总结的。
    connection
        31
    connection  
       2022-06-14 20:26:29 +08:00
    我是 React + TS 转 vue3 + TS 。
    TS 在 vue3 中使用感觉「有的时候」还是像自我安慰..
    但 composition api 使用感比 React hook 。但是 ref 在 composition 上还是挺麻烦,MaybeRef 见惯不怪。
    感觉 大多数人都不应该浪费时间在「挑选框架」。
    合适的场景选择合适的东西更重要。
    jones2000
        32
    jones2000  
       2022-06-15 01:03:29 +08:00
    只喜欢用 js 写, 其他的都不太好, 约束太多了, 不能天马行空的写,放飞自我的写代码。
    任何框架都不能解决写烂代码的问题, 只要是一个人都会写烂代码, 你可以自己回看下自己 N 年前的代码,也是烂的一塌糊涂。 大家都是从烂代码里爬出来的。这个是成长的过程。
    太多 js 的框架,是加快了开发速度,但在我看来其实降低了个人的开发能力,都被限死在框架里面了,其实 js 是没有框架,就是一个开放的东西,搞那么多条条框框的干什么呢。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1030 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 20:51 · PVG 04:51 · LAX 12:51 · JFK 15:51
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.