如何使用 Vue 3 的 Composition API

Vue 3 引入了 Composition API,它提供了一种更灵活的方式来组织和重用逻辑。与 Vue 2 的 Options API 相比,Composition API 允许你将组件的逻辑按功能组织到函数中,而不是将它们分散到组件选项对象中。以下是如何在 Vue 3 中使用 Composition API 的基本步骤:

1. 引入必要的函数

首先,你需要从 vue 包中引入 refreactivecomputedwatchwatchEffect 等 Composition API 提供的函数。这些函数允许你创建响应式状态、计算属性和侦听器。

复制代码

javascript复制代码

|---|----------------------------------------------------------------------|
| | import { ref, reactive, computed, watch, watchEffect } from 'vue'; |

2. 使用 setup 函数

setup 函数是 Composition API 的入口点。它是组件中所有 Composition API 调用的地方。setup 函数在组件创建之前被调用,并且它会在 beforeCreatecreated 生命周期钩子之前执行。

复制代码

javascript复制代码

|---|----------------------------------|
| | export default { |
| | setup() { |
| | // 你的 Composition API 代码将放在这里 |
| | } |
| | }; |

3. 创建响应式状态

使用 refreactive 来创建响应式状态。ref 用于基本数据类型,而 reactive 用于对象或数组。

复制代码

javascript复制代码

|---|------------------------------|
| | const count = ref(0); |
| | const person = reactive({ |
| | name: 'Alice', |
| | age: 30 |
| | }); |

4. 使用计算属性和侦听器

你可以使用 computed 来创建计算属性,使用 watchwatchEffect 来侦听响应式状态的变化。

复制代码

javascript复制代码

|---|--------------------------------------------------------------------|
| | const doubleCount = computed(() => count.value * 2); |
| | |
| | watchEffect(() => { |
| | console.log(`Count is: ${count.value}`); |
| | }); |
| | |
| | watch(count, (newValue, oldValue) => { |
| | console.log(`Count changed from ${oldValue} to ${newValue}`); |
| | }); |

5. 暴露给模板

setup 函数需要返回所有需要在模板中使用的响应式状态、计算属性、方法等。

复制代码

javascript复制代码

|---|------------------------------|
| | export default { |
| | setup() { |
| | const count = ref(0); |
| | const increment = () => { |
| | count.value++; |
| | }; |
| | |
| | return { |
| | count, |
| | increment |
| | }; |
| | } |
| | }; |

6. 在模板中使用

现在,你可以在模板中像使用其他组件选项一样使用 countincrement

复制代码

html复制代码

|---|--------------------------------------------------|
| | <template> |
| | <div> |
| | <p>{``{ count }}</p> |
| | <button @click="increment">Increment</button> |
| | </div> |
| | </template> |

7. 使用生命周期钩子

Composition API 提供了与 Options API 相同的生命周期钩子,但你需要从 vue 中显式导入它们,并在 setup 函数中使用。

复制代码

javascript复制代码

|---|--------------------------------------------------|
| | import { onMounted, onUnmounted } from 'vue'; |
| | |
| | export default { |
| | setup() { |
| | onMounted(() => { |
| | console.log('Component is mounted!'); |
| | }); |
| | |
| | onUnmounted(() => { |
| | console.log('Component is unmounted!'); |
| | }); |
| | |
| | // ... 其他 Composition API 代码 |
| | } |
| | }; |

8. 组件间的通信

Composition API 并没有改变 Vue 的组件间通信方式(如 props、emit、provide/inject、Vuex、Vue Router 等)。但是,你可以将逻辑封装在自定义的 Composition API 函数中,并在多个组件之间重用这些函数,从而实现更高效的代码复用。

通过遵循这些步骤,你可以开始在你的 Vue 3 项目中使用 Composition API 来构建更灵活、更可维护的组件。

相关推荐
技术钱1 小时前
vue3 封装图片上传预览组件支持docx、excel、pdf、图片、txt格式
vue.js·pdf·excel
kyle~1 小时前
C++--- override 关键字 强制编译器验证当前函数是否重写基类的虚函数
java·前端·c++
Light601 小时前
像素退场,曲线登场:现代响应式 CSS 全家桶 | 领码课堂
前端·css·响应式设计·css函数·布局系统·相对单位·设计令牌
爱生活的苏苏2 小时前
elementUI 表单验证-联动型校验
前端·javascript·elementui
一只小风华~4 小时前
Vue Router 路由元信息(meta)详解
前端·javascript·vue.js
*且听风吟4 小时前
html 实现鼠标滑动点亮横轴
前端·javascript·html
计算机学姐4 小时前
基于微信小程序的垃圾分类管理系统【2026最新】
java·vue.js·spring boot·mysql·微信小程序·小程序·mybatis
武昌库里写JAVA5 小时前
C语言 #pragma once - C语言零基础入门教程
vue.js·spring boot·sql·layui·课程设计
iCoding915 小时前
前端分页 vs 后端分页:技术选型
前端·后端·系统架构
mingtianyihou336 小时前
使用 Service Worker 限制请求并发数
前端