【Vue3】组合式 API

背景

随着年龄的增长，很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来，技术出身的人总是很难放下一些执念，遂将这些知识整理成文，以纪念曾经努力学习奋斗的日子。本文内容并非完全原创，大多是参考其他文章资料整理所得，感谢每位技术人的开源精神。

简介

本文介绍如何使用组合式 API 编写 Vue3 组件。

组合式 API（Composition API）是 Vue3 后官方建议的组件书写风格，用于替代传统的选项式 API（Options API）。

开发环境

分类	名称	版本
操作系统	Windows	Windows 11
IDE	Visual Studio Code	1.91.1

开发步骤及源码

在 【Vue3】选项式 API 基础上修改 Vue 根组件 App.vue 代码。

<!-- 组件结构 -->
<template>
    <div class="person">
        <h3>姓名：{{ name }}</h3>
        <h3>生日：{{ birth.getFullYear() + '-' + (birth.getMonth() + 1) + "-" + birth.getDate() }}</h3>
        <button @click="showContact">查看联系方式</button>
    </div>
</template>

<!-- 组件行为 -->
<script lang="ts">
export default {
    // 组件名
    name: 'App',
    setup() {
        // 数据定义
        const name = '哈利·波特'
        const birth = new Date('1980-07-31')
        const contact = '霍格沃茨魔法学校格兰芬多学院'

        // 方法定义
        function showContact() {
            alert(contact)
        }

        return { name, birth, showContact }
    }
}
</script>

<!-- 组件样式 -->
<style lang="scss">
.person {
    background-color: cadetblue;
    border-radius: 5px;
    color: white;
    padding: 20px;
    
    button {
        background-color: gold;
        border-radius: 5px;
        padding: 5px 10px;
    }
}
</style>

说明：

• 组合式 API 增加了一个 setup 选项，所有的数据和方法定义都可以写在 setup 中，对比选项式 API 将数据和方法定义在不同的选项中（数据写在 data 选项中，方法写在 methods 选项中），组合式 API 更便于维护；
• setup 选项中最后一条语句必须使用 return 将页面中用到的数据和方法包装成一个 JSON 对象返回，否则页面会报错。

setup 语法糖

虽然 setup 选项解决了数据和方法定义分离的问题，但使用 setup 选项定义仍显得代码层级过深，Vue 官方通过提供 setup 语法糖的方式解决了此问题。

<!-- 组件结构 -->
<template>
    <div class="person">
        <h3>姓名：{{ name }}</h3>
        <h3>生日：{{ birth.getFullYear() + '-' + (birth.getMonth() + 1) + "-" + birth.getDate() }}</h3>
        <button @click="showContact">查看联系方式</button>
    </div>
</template>

<!-- 组件行为：暴露组件 -->
<script lang="ts">
export default {
    // 组件名
    name: 'App'
}
</script>

<!-- 组件行为：setup语法糖 -->
<script setup lang="ts">
// 数据定义
const name = '哈利·波特'
const birth = new Date('1980-07-31')
const contact = '霍格沃茨魔法学校格兰芬多学院'

// 方法定义
function showContact() {
    alert(contact)
}
</script>

<!-- 组件样式 -->
<style lang="scss">
.person {
    background-color: cadetblue;
    border-radius: 5px;
    color: white;
    padding: 20px;
    
    button {
        background-color: gold;
        border-radius: 5px;
        padding: 5px 10px;
    }
}
</style>

注意：此处使用了两次 <script> 标签，第一个标签 <script lang="ts"> 用于暴露组件名，第二个标签 <script setup lang="ts"> 即 setup 语法糖的书写方式，将之前 setup 选项中的代码全部移动此标签下，且去掉最后一个 return 语句。

setup 扩展组件

使用 setup 语法糖后出现了两个 <script> 标签，第一个标签 <script lang="ts"> 可以省略，但省略后暴露的组件名与 .vue 文件名保持一致。如果既想只保留一个 <script> 标签，又能自定义不同于 .vue 文件名的组件名，那么可以通过安装 setup 扩展组件实现。

1> 通过 npm 安装 setup 扩展插件。

PS D:\temp\VUE\vue3-demo> npm i vite-plugin-vue-setup-extend -D
npm warn deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead

added 3 packages in 3s

10 packages are looking for funding
  run `npm fund` for details

2> 修改 vite.config.ts 配置文件。

3> 修改 App.vue，删除 <script lang="ts"> 标签，在 <script setup lang="ts"> 标签中添加 name 属性。

<!-- 组件结构 -->
<template>
    <div class="person">
        <h3>姓名：{{ name }}</h3>
        <h3>生日：{{ birth.getFullYear() + '-' + (birth.getMonth() + 1) + "-" + birth.getDate() }}</h3>
        <button @click="showContact">查看联系方式</button>
    </div>
</template>

<!-- 组件行为 -->
<script setup lang="ts" name="App">
// 数据定义
const name = '哈利·波特'
const birth = new Date('1980-07-31')
const contact = '霍格沃茨魔法学校格兰芬多学院'

// 方法定义
function showContact() {
    alert(contact)
}
</script>

<!-- 组件样式 -->
<style lang="scss">
.person {
    background-color: cadetblue;
    border-radius: 5px;
    color: white;
    padding: 20px;
    
    button {
        background-color: gold;
        border-radius: 5px;
        padding: 5px 10px;
    }
}
</style>

总结

组合式 API（Composition API）和选项式 API（Options API）并不是非此即彼的关系，两者可以混用，但是建议尽量只选用其中一种，且尽量选用官方推荐的组合式 API（Composition API）。