vue选项式和组合式区别?新手学习应该选择哪一种API风格

不墨迹直给答案：零基础学 Vue，直接优先学习“组合式 API”

看了网上大量讲解Vue选项式API与组合式API如何选择的文章，大多表述模棱两可，一味强调两者各有优劣，反而让入门新手越看越迷茫。今天站在纯前端新手容易理解的视角，直白讲清：如今学 Vue，为什么一定要优先学组合式 API。

一、顺应趋势

打开Vue2的官方文档https://v2.cn.vuejs.org/，在顶部能看到这么一段话“Vue 2 已经终止支持且不再维护。 请升级到 Vue 3 或了解有关 Vue 2 终止支持 (EOL) 的信息。”

而Vue2使用的就是“选项式API”，Vue3正式推出“组合式API”。如果是在前两年Vue2、Vue3并行阶段，还能出于Vue3性能不完善或项目兼容考虑，犹豫选择；现在行业技术迭代已定，再固守老旧写法，完全不符合当下求职与开发需求。

二、Vue官方权威定位

图2 Vue3简介

再打开Vue3的官方文档https://cn.vuejs.org/guide/introduction.html，简介中明确标注“实际上，选项式 API 是在组合式 API 的基础上实现的！”我们用最简单的逻辑理解：想要学习选项式API，最好有组合式API的基础；或者学习了组合式API，才能更轻松的学习选项式API；

奇怪的是，网上几乎所有的文章都口径统一“选项式API优点是对初学者友好”，小编觉得可能是受到图中第二段最后一句话的影响。但他们都忽略了一个前提“对于有面向对象语言背景的用户来说”；而组合式API是没有任何前提的，并且小编是从自己的学习过程中，总结经验：对于零基础、只会原生 JavaScript 的普通新手而言，组合式 API 写法更贴合原生 JS 思维，上手门槛更低。

三、代码逻辑更贴合原生 JS，新手极易上手

我们用一个简易案例直观对比代码写法上的差异。图中两个功能完全独立，功能A点击+号，快乐源泉数值增加，并自动计算翻倍数值；功能B是数值减少。HTML和CSS代码完全一致，仅对比JS部分。

HTML和CSS代码:

<template>
    <div class="app">
        <div class="happy">
            <h1>功能A</h1>
            <span>快乐源泉:{{ happy }}</span><button @click="increase">+</button>
            <p>快乐加倍: {{ doubleHappy }}</p>
        </div>
        <div class="worry">
            <h1>功能B</h1>
            <span>烦恼源泉:{{ worry }}</span><button @click="decrease">-</button>
            <p>烦恼拜拜: {{ doubleWorry }}</p>
        </div>
    </div>
</template>
<style scoped>
.app {
    font-size: 20px;
    text-align: center;
    display: flex;
    gap: 100px;
    justify-content: center;
}
span {
    margin: 0 10px;
}
</style>

1. 选项式 API 写法：把功能A和功能B像拆积木一样拆散，然后再分类。把它们的原始数据部分归类放在data里；把它们的二次计算结果归类放在computed里；把它们的方法归类放在methods里。初学者第一次接触的如果是选项式API，心中潜台词大概是“这TM什么新鲜玩意，乱七八糟的”。

<script>
export default {
    data() {
        return {
            happy: 1,
            worry: 10
        }
    },
    computed: {
        doubleHappy() {
            return this.happy * 2
        },
        doubleWorry() {
            return this.worry * 2
        }
    },
    methods: {
        increase() {
            this.happy++
        },
        decrease() {
            this.worry--
        }
    }
}
</script>

2. 组合式 API 写法：不用多解释了，一看就懂！写法和原生JS高度相似。初学者第一次接触的如果是组合式API，心中潜台词大概是“嗯~熟悉的配方熟悉的味道”。

<script setup>
import { ref, computed } from 'vue'
// 功能A
const happy = ref(1)
const doubleHappy = computed(() => happy.value * 2)
const increase = () => happy.value++
// 功能B
const worry = ref(10)
const doubleWorry = computed(() => worry.value * 2)
const decrease = () => worry.value--
</script>

3.代码逻辑更清晰

小编在网上看到了这张图，更能说明初学者应该选择“组合式API”。左边是“选项式API”，右边是“组合式API”，相同颜色代表一个功能。