别再写this.xxx了

你还在写一堆 this.xxx，还在用老套的 Vue 写法吗？

今天聊聊 Vue3 的两种写法：选项式 API 和 组合式 API。

简单说，就是"传统写法"和"现代写法"的区别。

传统写法就像是把所有东西都塞进不同的抽屉里（data放一个抽屉，methods放另一个抽屉），而现代写法就像是把相关的东西都放在一起，用的时候一目了然。

为什么推荐组合式 API？ 因为它让代码更自由、更高效，特别是在处理复杂逻辑时，简直是开发者的福音！

• • 组合式 API 官方文档：https://cn.vuejs.org/guide/introduction#composition-api
• • 选项式 API 官方文档：https://cn.vuejs.org/guide/introduction#options-api

老式写法：选项式 API

说到选项式 API，就像是给代码分门别类装进不同的盒子里。数据放 data 盒子，方法放 methods 盒子，生命周期放 mounted 盒子。

这种写法的特点就是一个字：规矩！每样东西都有固定的位置，初学者一看就懂。

但问题来了：当你的组件越来越复杂时，你得在各个盒子之间跳来跳去找东西，就像在房间里找遥控器一样头疼。

<script>
export default {
  // data() 返回的属性将会成为响应式的状态
  // 并且暴露在 `this` 上
  data() {
    return {
      count: 0
    }
  },

  // methods 是一些用来更改状态与触发更新的函数
  // 它们可以在模板中作为事件处理器绑定
  methods: {
    increment() {
      this.count++
    }
  },

  // 生命周期钩子会在组件生命周期的各个不同阶段被调用
  // 例如这个函数就会在组件挂载完成后被调用
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

新式写法：组合式 API

如果说选项式 API 是把东西分类放在不同抽屉里，那组合式 API 就像是把相关的东西都放在一个整理箱里，用的时候一把抓就行了。

最爽的是 <script setup> 语法糖，就像是给你的代码加了个智能管家。你只管写代码，它自动帮你处理各种繁琐的事情。

举个栗子：以前你要手动告诉Vue"这个变量给模板用"，现在它自动就知道了！是不是很贴心？

<script setup>
import { ref, onMounted } from 'vue'

// 响应式状态
const count = ref(0)

// 用来修改状态、触发更新的函数
function increment() {
  count.value++
}

// 生命周期钩子
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

该选哪一个？你的选择决定了你的段位

两种 API 风格都能够覆盖大部分的应用场景。它们只是同一个底层系统所提供的两套不同的接口。实际上，选项式 API 是在组合式 API 的基础上实现的！关于 Vue 的基础概念和知识在它们之间都是通用的。

**选项式 API：适合新手的"训练轮"**选项式 API 以 "组件实例" 的概念为中心（即上述例子中的 this），对于有面向对象语言背景的朋友来说，这就像回到了熟悉的老家。

它把响应性相关的复杂细节都藏起来，并强制按照固定套路来组织代码，对初学者来说就像有了一个贴心的导师，告诉你什么东西该放哪里。

组合式 API：高手的"自由式发挥" 组合式 API 的核心思想是直接在函数作用域内定义响应式状态变量，并将多个函数中得到的状态组合起来处理复杂问题。

这种写法更加自由，就像从"按部就班"升级到了"随心所欲"。但相应的，你需要对 Vue 的响应式系统有更深的理解才能玩得转。

这种灵活性也使得组织和重用逻辑变得更加强大，就像从"拼装模型"升级到了"乐高积木"。

官方推荐指南：

如果你是Vue新手：

• • 学习阶段推荐选择更容易理解的风格，两种风格的核心概念都是通用的。掌握一种后，另一种也能很快上手。

生产项目中：

• • 如果不需要构建工具，或者主要在简单场景中使用 Vue（比如给传统网站加点交互效果），推荐选项式 API
• • 如果要构建完整的单页应用，强烈推荐组合式 API + 单文件组件

小贴士： 想了解更多两种API的深度对比？可以查看 组合式 API FAQ[1]

写在最后：选择比努力更重要

技术在变，工具在变，但追求更好开发体验的心永远不变。

从选项式API到组合式API，这不仅仅是写法的改变，更是思维方式的升级。就像从诺基亚换到智能手机，虽然都能打电话，但体验完全不同。

那么问题来了：你现在还在用选项式API吗？或者已经拥抱组合式API了？

引用链接

[1] 组合式 API FAQ: https://cn.vuejs.org/guide/extras/composition-api-faq.html

如果这篇文章帮到了你，不妨点个分享给同样需要的朋友吧！ 你的每一次支持，都是我持续创作的动力！💪

往期推荐：