【愚公系列】《循序渐进Vue.js 3.x前端开发实践》035-组合式API的应用

愚公搬代码

发布于 2025-06-02 17:41:22

13100

代码可运行

文章被收录于专栏：循序渐进Vue.js 3.x前端开发实践循序渐进Vue.js 3.x前端开发实践

运行总次数：0

代码可运行

标题	详情
作者简介	愚公搬代码
头衔	华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。
近期荣誉	2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主，2024年华为云十佳博主等。
博客内容	.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
欢迎	👍点赞、✍评论、⭐收藏

🚀前言

在 Vue 3 的发布中，组合式 API（Composition API）作为一项重要的新特性，引起了广泛的关注和讨论。它为开发者提供了一种全新的方式来组织和复用逻辑，不仅增强了代码的可读性和可维护性，还提升了组件的灵活性和可测试性。组合式 API 的引入，标志着 Vue.js 在组件设计和开发模式上的一次重要进化。

本篇文章将深入探讨组合式 API 的应用，帮助你理解其核心概念和使用场景。我们将解析组合式 API 的基本用法，包括如何使用 setup 函数、如何组织响应式状态以及如何封装逻辑和功能。通过实际案例，我们将展示如何在项目中有效地运用组合式 API 来构建灵活而强大的组件。

setup方法本身也可以定义组件的生命周期方法，方便将相关的逻辑组合在一起。

🚀一、组合式API的应用

🔎1. HTML 结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Setup</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style> </style>
</head>
<body>
    <div id="Application">
        <com name="组件名"></com>
    </div>
    <script> ... </script>
</body>
</html>

<div id="Application">：在这里，Vue 应用将被挂载到 id="Application" 的 <div> 元素上，<com> 是自定义的组件标签，表示一个名为 com 的 Vue 组件。
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>：引入 Vue 3 的 CDN，这使得你可以直接在浏览器中使用 Vue 3 的功能。
在 <div> 内，<com> 组件被放置在模板中，并传递了一个 name 属性。

🔎2. Vue 应用与组件的创建

const App = Vue.createApp({})

Vue.createApp({})：创建一个 Vue 应用实例。这里传入的对象是空的，意味着没有定义组件的具体逻辑。它只是一个容器，待会儿会通过 App.component 来注册组件。

App.component("com", {
    setup(props, context) {
        console.log(props.name)
        // 属性
        console.log(context.attrs)
        // 插槽
        console.log(context.slots)
        // 触发事件
        console.log(context.emit)
        let data = "setup的数据";
        Vue.onMounted(() => {
            console.log("setup定义的mounted")
        })
        return () => Vue.h('div', [data])
    },
    props: {
        name: String,
    },
    mounted() {
        console.log("组件内定义的mounted")
    }
})

这部分代码注册了一个名为 com 的组件，并定义了组件的 setup 函数。接下来，我们详细解析每一部分。

🔎3. `setup` 函数中的逻辑

setup(props, context) {
    console.log(props.name)
    // 属性
    console.log(context.attrs)
    // 插槽
    console.log(context.slots)
    // 触发事件
    console.log(context.emit)
    let data = "setup的数据";
    Vue.onMounted(() => {
        console.log("setup定义的mounted")
    })
    return () => Vue.h('div', [data])
}

setup 是 Vue 3 组件的 Composition API 中的一个新函数，它替代了 Vue 2.x 中的 data、methods、mounted 等选项，提供更灵活的逻辑复用方式。
props：
- props 是从父组件传递给子组件的属性。这里 props.name 代表父组件传递的 name 属性，console.log(props.name) 会输出 "组件名"。
context：setup 函数的第二个参数是 context，它包含一些对组件生命周期和行为的控制信息：
- context.attrs：包含父组件传递给子组件的非 props 属性。这些属性没有被定义在 props 中，仍然会传递给子组件。例如，假设父组件传递了 <com name="组件名" extra="extra属性"></com>，context.attrs 会包含 extra 属性。
- context.slots：包含父组件传递给子组件的插槽。插槽是 Vue 的一种机制，用于将父组件的内容插入到子组件的特定位置。
- context.emit：这是一个函数，用来触发自定义事件。比如，子组件可以通过 context.emit('eventName') 来触发父组件监听的事件。
let data = "setup的数据"：在 setup 函数中定义了一个局部变量 data，这个数据将会返回并在组件的模板中渲染。
Vue.onMounted(() => { console.log("setup定义的mounted") })：
- onMounted 是 Vue 3 中的一个生命周期钩子，它会在组件挂载后立即执行。这里在 setup 内使用了 onMounted，打印 "setup定义的mounted"。注意，onMounted 与 Vue 2.x 中的 mounted 不同，它是 Vue 3 中 Composition API 的一部分，专门用来在 setup 函数中处理生命周期。
return () => Vue.h('div', [data])：
- 这个 return 语句返回的是一个渲染函数。它用 Vue.h 创建了一个 <div> 元素，并在其中渲染了 data 的值，即 "setup的数据"。
- Vue.h 是 Vue 3 中的一种虚拟 DOM 渲染方式，可以直接返回渲染的内容，而不是使用模板字符串。

🔎4. `props` 配置

props: {
    name: String,
},

props 配置选项用来定义组件的属性。在这里，name 是一个字符串类型的属性，父组件在使用 <com name="组件名"></com> 时，name 的值为 "组件名"，这个值会被传递到子组件。

🔎5. 组件内的 `mounted` 生命周期钩子

mounted() {
    console.log("组件内定义的mounted")
}

这是一个传统的生命周期钩子，在组件挂载到 DOM 上时调用。它与 setup 中的 onMounted 类似，都会在组件挂载后执行。但 setup 中的生命周期钩子是在组件实例化时触发的，而在 mounted 中直接定义的是传统的 Vue 2.x 风格的钩子。mounted 会在 Vue 3 的 Options API 中使用。

🔎6. 挂载 Vue 应用

App.mount("#Application")

App.mount("#Application")：将 Vue 应用挂载到页面上 id="Application" 的 <div> 元素中。Vue 会解析 com 组件并将其渲染在页面中。

🔎7. 代码逻辑总结

这段代码主要演示了 Vue 3 中 Composition API 中 setup 函数的用法以及如何处理组件的 props、context、生命周期钩子和渲染函数。以下是代码的主要逻辑：

props 用于接收父组件传递的数据，这里父组件传递了 name="组件名"，子组件可以通过 props.name 来访问。
context 作为 setup 函数的第二个参数，提供了对插槽、非 props 属性和事件触发的访问。
onMounted 和 mounted 都是生命周期钩子，onMounted 用于 Vue 3 的 Composition API，而 mounted 用于 Options API。
组件通过渲染函数代替模板 (template)，在渲染时返回一个 div 元素并显示 "setup的数据"。