| 标题 | 详情 |
|---|---|
| 作者简介 | 愚公搬代码 |
| 头衔 | 华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。 |
| 近期荣誉 | 2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主，2024年华为云十佳博主等。 |
| 博客内容 | .NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。 |
| 欢迎 | 👍点赞、✍评论、⭐收藏 |
文章目录
- 🚀前言
- 🚀一、组合式API的应用
- 🔎1. HTML 结构
- 🔎2. Vue 应用与组件的创建
- 🔎3. `setup` 函数中的逻辑
- 🔎4. `props` 配置
- 🔎5. 组件内的 `mounted` 生命周期钩子
- 🔎6. 挂载 Vue 应用
- 🔎7. 代码逻辑总结
🚀前言
在 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的数据"。
通过这种方式，你可以在 Vue 3 中使用 Composition API 来实现更灵活的组件设计和更高效的状态管理。
