Vue 的组合式 API 和选项式 API
在入门 Vue 时，我发现组件有两种写法：组件式 API 和选项式 API。两者有什么区别？改用哪一种？本文是我的一些直观的理解。
选项式 API（Options API）是 Vue2 中提供的。组合式 API（Composition API）是 Vue3 中提供的。
选项式 API
选项式 API 是在 <script> 部分，直接 export 一个 Object，包括数据、方法等都在这个 object 中，通过方法或者属性来实现。示例：
<script>
export default {
name: 'App',
data() {
return {
name: 'mae'
}
},
methods: {
changeName() {
this.name = 'maeiee'
}
}
}
</script>
组合式 API
组合式方案在 <script> 部分里包含一个 setup 方法，然后在 setup 方法内部，像写代码一样，写命令式代码：
<script>
import { ref } from 'vue';
export default {
name: 'App',
setup() {
const name = ref('mae');
function changeName() {
name.value = 'maeiee';
}
return {
name, changeName
}
}
}
</script>
对于复杂的逻辑，组合式 API 能够更加方便地进行拆分，我想这就是“组合式”的含义把。具体拆分用法参见《组合式API和选项式API - 掘金 (juejin.cn)》