有关 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 更消耗内存资源

[bootvue]

ts 在多人协作场景下优势比较明显

[sky857412]

volar 插件不好用，自动导包提示没有，也可能我用的姿势不对

[moreant]

js 转 ts ，对象里点不出来属性就开始慌了，会检查是不是写错了或者拼错了

[irisdev]

vue3 有什么好用的组件库吗

[xujiahui]

@irisdev #24 已经好多组件库了，我用的 naive-ui 感觉还行

[apeople]

反正我 vue2 升到 vue3 开发体验提升巨大

[agileago]

@wunonglin 来用 vue3-oop https://github.com/agileago/vue3-oop ts 支持完美，即享受到 tsx 的便利又有响应式自动精准更新，再加上自动化的依赖注入(类似 ng,但简化)处理全局状态，无需再去寻找各种库，更深的是，假如你有 nestjs 的架构经验，同样可以用在前端，使整个项目结构更清晰易懂, 装饰器真是个好东西

<script src="https://gist.github.com/agileago/211f80caa8bb7721e24943777d602dad.js"></script>

[agileago]

不得不说，vue3 对面向对象的支持太棒了

[iikebug]

@makelove solid 生态太差了，基本上啥都要自己造轮子

[wunonglin]

@agileago #27 其实我用 vue2+ts 也能较为接受。但是一旦和别人共事的 vue 项目，代码质量简直难以想象（我没权利管人家业管不来），所以还是有 ng 这样的框架来约束比较好。除非团队里全是大佬，个个代码质量都是开源水平。

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

上面观点是我做了那么多年接触的项目里总结的。

[connection]

我是 React + TS 转 vue3 + TS 。
TS 在 vue3 中使用感觉「有的时候」还是像自我安慰..
但 composition api 使用感比 React hook 。但是 ref 在 composition 上还是挺麻烦，MaybeRef 见惯不怪。
感觉 大多数人都不应该浪费时间在「挑选框架」。
合适的场景选择合适的东西更重要。

[jones2000]

只喜欢用 js 写， 其他的都不太好， 约束太多了， 不能天马行空的写，放飞自我的写代码。
任何框架都不能解决写烂代码的问题， 只要是一个人都会写烂代码， 你可以自己回看下自己 N 年前的代码，也是烂的一塌糊涂。 大家都是从烂代码里爬出来的。这个是成长的过程。
太多 js 的框架，是加快了开发速度，但在我看来其实降低了个人的开发能力，都被限死在框架里面了，其实 js 是没有框架，就是一个开放的东西，搞那么多条条框框的干什么呢。