Vue3 Composition API怎么用？从入门到避坑全解析，比Options API香在哪？

Vue3的核心为什么换成了Composition API？

不少从Vue2转过来的朋友，刚接触setup语法糖或者Composition API的旧写法时，都会挠头：Options API不是好好的吗？按data、methods、computed、watch分类写，新手也能很快上手,为什么突然改了一套东西？

其实这个改变，完全是为了解决Vue2在大型项目里的复用性和可维护性痛点，举个具体的例子，假设你在做一个电商后台的商品管理页面，需要处理“商品搜索筛选”“库存预警提示”“批量删除确认”这三个逻辑块，在Options API里，你得把这三个逻辑的变量、方法、计算属性全拆到不同的分类里：比如搜索的关键词放data，筛选结果放computed，筛选触发的方法放methods；库存预警的阈值放data，判断逻辑放computed或者watch，弹窗触发的也放methods；批量删除的选中数组放data,全选反选的方法放methods。

这么写的话，单个页面的代码行数超过300行很正常，而且你要修改“库存预警”的逻辑，得在data、computed、methods三个地方来回跳，一会儿改阈值一会儿调弹窗文案一会儿更新判断条件，新人接手看代码完全摸不着头脑，复用起来就更麻烦了，虽然Vue2有mixin，但mixin会有命名冲突（两个mixin都有“loading”变量，最后谁覆盖谁？）、来源不透明（用了好几个mixin后，根本不知道某个方法是从哪来的）、难以传递参数这些问题，用过的朋友应该都懂那种“踩雷无数”的感觉。

Composition API的核心思路就是把相关的逻辑放在一起，不再按功能分类（data、methods），而是按业务或者功能块组织代码，就像把一堆乱序的积木，按房子、车子、家具的模型重新整理好，拼的时候方便,拆的时候也不费劲。

setup语法糖到底是什么？怎么上手最快？

很多教程一开始会讲Composition API的旧写法：在组件里定义setup()函数，然后返回需要暴露给模板的变量和方法，写起来有点啰嗦，其实现在官方推荐的是<script setup>语法糖，这是最简洁、最符合现代开发习惯的方式，新手直接学这个就行,不用纠结旧写法的细节。

那<script setup>到底怎么用呢？其实就是把普通的<script>标签加个setup属性，里面写的内容就相当于旧写法的setup()函数里的代码，而且不需要手动return，所有在<script setup>里声明的变量、导入的组件、定义的方法和计算属性,都会自动暴露给模板用。

举个最简单的计数器例子，对比一下Options API和<script setup>的写法,你就知道有多香了：

Options API的计数器

<template>
  <div class="counter">
    <p>当前计数：{{ count }}</p>
    <button @click="increment">+1</button>
    <button @click="decrement">-1</button>
  </div>
</template>
<script>
export default {
  name: 'CounterOptions',
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    }
  }
};
</script>