前言
前端技术的更替可谓是日新月异，可能一不小心你可能就跟不上前端这飞快的发展速度了。所以说，面对这样的局面，我们要时刻保持着一个学习的心态，对新技术具有探索的精神，不要让自己被淘汰了。
而Vue3以及早早的成为默认版本，而他的生态也趋近成熟。是时候系统的学习一下子了，看看他给我们带来了什么东西。
组件API风格
在Vue3中组件的写法可以分为两种风格：选项式 API 和组合式 API。
选项式 API (Options API)
选项式顾名思义就是通过多个选项来描述一个组件的逻辑。就像data、methods和mounted等等。在选项内部，可以通过this访问到当前组件实例。
<script> export default { // data() 返回的属性将会成为响应式的状态 // 通过 this 可以访问到 data中的数据 data() { return { num: 0 } }, methods: { add() { this.num++ } }, mounted() { console.log(`初始化： ${this.num}.`) } } </script> <template> <button @click="add">计数: {{ num }}</button>- </template> 复制代码
组合式 API (Composition API)
在组合式API中，所有的选项都是通过从vue 中导入到组件中的。可以和<script setup>配合使用，在这里声明的顶层变量以及导入函数等可以直接在 template 中使用。
<script setup> import { ref, onMounted } from 'vue' // 响应式状态 const num = ref(0) function add() { num.value++ } onMounted(() => { console.log(`初始化： ${this.num}.`) }) </script> <template> <button @click="add">计数: {{ num }}</button> </template> 复制代码
如何选择
这两种方式，在绝大多数的场景下都能使用。值得注意的一点是，选项式 API 是在组合式 API 的基础上实现的，选项式的方式更加灵活，抒写更加自由一些，对于组件逻辑的抽离更加方便，所以在觉大多数场景下，还是建议组合式API的。
![[译] 用 Typescript + Composition API 重构 Vue 3 组件](https://ucc.alicdn.com/hid5ykfodc62m_20240829_e496cb22e4e94454b6319d817d78e968.webp?x-oss-process=image/resize,h_160,m_lfit)
