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

[Richard14]

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

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

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

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

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

[yafoo]

我也不明白为啥那么多人批 vue3

[enchilada2020]

@yafoo 好像多数都在吐槽 Vue3 与 TS 集成度不好 以及生态差的问题

[GeruzoniAnsasu]

@yafoo 大概是过去式+仍然不能适配所有特定场景的原因

[wunonglin]

和 ts 配合起来体验太差，各种地方让人看起来还是 vue2 的那套思维。可能是我 ng 写多了，用 vue 一直很难受

[zackwan95]

@yafoo 生态实在太太太差了，或许你一直用 vue 感觉不到，但是用惯了 react 换 vue 简直坑爹。

[DOLLOR]

似乎还是有不少人对 TS 有什么误会，以为增加了 type 就是面向对象，就要写 class ，就要去折腾“面向对象的三大特性”，然后就要告别过去的“面向过程”思维。

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

当然，要享受到这些好处有个很大的前提，就是你要有一套完善的工具链。比如你的编辑器对 TS 有完整的支持（比如 vscode 、webstorm ），你用的框架、类库提供完善的声明（比如我用的是 react ，跟 TS 契合得非常好。vue 跟 TS 契合度可能不如其他两个框架）。当你充分享受到这些好处之后，可能会变得越来越懒了，懒得背接口、字段，没有智能提示就浑身难受，回不去的感觉。（也许 JSDOC + ts-check + 一个强大的编辑器也能达到 TS 一半的功力吧）

[yafoo]

@zackwan95 我的意思是 vue3 和 vue2 比，为什么会有人批 v3

[tedding]

@DOLLOR 回不去了是真的。用了 angular 之后…更回不去了……vue3 最近几个月也在用，有了 ng 的铺垫，vue3 的 ts 支持，没有那么讨厌 vue 了😂😂😂，用了好几年 angular 一直挺排斥 vue 的。我会认认真真写类型，因为人真的很容易忘，没有了 ts 的类型保护，有点胆战心惊。

[Zzzz77]

我其实不明白 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]

vue2 挺好

[jeffh]

vue3 写起来比较舒服

[runze]

vue 有个特点：不管是写 react 的还是写 angular 的，都优先批判它；但是如果把两方对它的批评放一起，就能得到很奇妙的结果。

[makelove]

何不来用 solid-js? 集 react 和 vue 优点于一身，ts 支持也非常好
特别是和 vue 一样再也没有那些烦死人的 hooks 规则了，感觉重回经典

[gouflv]

虽说 vue3 并不失败，但也没有特别成功。
太多历史包袱推不掉，只好再让开发者再忍一忍，或许 vue4 就好了。

你如果实在等不了，那就跳出 vue 这个圈子，模版爱好者去 ng ，jsx 爱好者去 react 或者 solidjs 。

[lujiaosama]

真的喜欢面向对象的写法那就去写 nestjs, 天天就是跟对象打交道, oop 写得不要不要的. 回到前端, 能函数式写法为啥要写 class , vue 对 ts 的支持力度没有 react 好是真的,但还是比原生 js 好太多了.

[walpurgis]

ts 的好处，对接过那种几十个字段，或对象嵌套 3 层以上的接口吗，还有取不到值，发现是后端同学单词拼写错误。
接口定义手写麻烦？有很多通过 OpenAPI 定义生成代码的轮子。
还有各种三方库，类型定义有时候比文档更有用。

[terranboy]

小项目 不复杂的项目 我也不知道 VUE 里写 TS 干嘛 有点脱裤子放屁

[sjhhjx0122]

@Zzzz77 volar 实在是不好用，写了这么久了，就想要个自定义指令提示，想要个组件没引入的报错，可是我现在改个类型，他都不一定能实时读到，还得我刷新 vscode 窗口。最主要还是 vue3 上了 ts 之后，props 类型有的时候跟定义的类型是有出入的，还不能用外部引入的 type

[sjhhjx0122]

@lujiaosama class 和函数式非得争个高低就有点信仰的味道了，vue option api 的那些问题，写 class 的 ng 基本都不会有，其实 vue 现在有点像 ng1 升级 ng2 了，还不如直接大改一下，现在这样跟 ts 结合有的时候写起来是真的不顺手

[Qcui]

我对 Vue3 生态印象不好的一点就是：volar 内存占用太高了，写 vue3 比写 react 更消耗内存资源