Vue3提供了那么多种写法,那种值得推荐？

Question

问题描述

在学习Vue3的时候,发现可以有好几种写法去编写js代码,
不太了解市面上那种方式是比较常用的?
【写法】
1、可以按vue的配置方式编写 (vue3因该不推荐)
2、通过语法糖setup直接编写
3、不通过语法糖而是用setup() {....}

个人觉得用语法糖 和 不用都有它们各自的优缺点,不太好取舍！

另外一个就是不用ts用js时,defineComponent要不要去使用？

Answer 1

个人偏向于<script setup>
不需要return值，数据可以直接在模板中引用，写起来非常顺滑

Answer 2

比较倾向 不通过语法糖而是用setup() {....}，原因：

1. 如果vue2 的项目要用，可以指在vue2 的项目中直接引入composition-api，可以直接使用

Answer 3

在我看来，Vue3 大概提供了两种定义组件的方式

• 配置式 (Option API)
• 组合式 (Compsition API)

甚至这两种模式在 Vue 框架的底层都完美的合二为一了（没去看源码，猜测，用不当真）。

配置式是提供一个配置对象，然后 Vue 框架会根据这个配置来生成组件类；而组合式则是一种更为灵活的方式，通过一堆看起来相互独立的函数来完成组件的配置。

不过，即使在两种模式下，都还有一些灵活的处理方式。比如说配置项中有一个 template 属性，可以通过它来配置模板。当然也可以通过我们熟悉的 SFC <template> 模板语法来配置。不过由于配置式中大量使用 this 引用，所以在“解耦”这个问题实在会受到一些局限。（其实把 this 作为参数对象使用，解耦也不是太难的事情）

组合式 API 的重要功能之一就是“解耦”，而且在 TypeScript 加持下，可以大大提高类型安全性，减少由于解耦不慎带来的类型相关的错误。组合式 API 一般会采用 setup 来配置组件。为了提升开发体验，Vue3 甚至提供了 <script setup> 语法来帮助开发者偷懒（确实可以少定不少代码）。但事情总是要做的，人不做，框架不做，那编译器总是要做的。

所以在我看来，主要还是根据自己的开发环境和团队习惯来选择。虽然 Vue3 在兼容 Vue2 上还是下了不少功夫，但是用上了 Vue3 之后很难回得去，所以如果不是特别需要，不用考虑 Vue2 的兼容性问题（参考各大组件库的 Vue3 版本，基本上从 Vue2 到 Vue3 都是断层式升级）。所以写法 …… 建议还是从团队协作上去考虑吧。

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。