理解 Vue 3 组合式 API

Vue 3 组合式 API 是一种强大的组织代码的新方式,为开发者提供了更多的灵活性和控制力。尽管选项式 API 仍然是许多人的首选。但组合式 API 提供了一种现代的方法,在可扩展性和可复用性方面表现出色。

在这篇指南中,我们将详细介绍组合式 API 的关键概念,并展示如何在 Vue 3 应用程序中有效地使用它。

享受阅读!

🤔 什么是组合式 API,为什么你应该尝试它?

组合式 API 是 Vue 3 中引入的一个功能,使开发者能够按逻辑关注点组织代码 ,而不是按 datamethodscomputed 等选项来组织。它利用函数和响应式来封装和复用逻辑。

使用组合式 API 提供了以下优势:

  1. 更好的代码组织:逻辑按功能分组,而不是按选项。
  2. 可复用性:可以轻松地在组件之间提取和复用逻辑。
  3. 可扩展性:通过减少混乱,简化了对大型组件的管理。
  4. TypeScript 友好:与 TypeScript 无缝协作,提高了类型安全性。

组合式 API 非常适合大型项目或者希望提高代码可复用性的团队。

🟢 组合式 API 的关键概念

组合式 API 包含几个关键概念。

1. 响应式状态管理

ref 为单个值创建一个响应式引用。通过 .value 访问或修改该值。

js 复制代码
<script setup>
import { ref } from 'vue';

const count = ref(0);

const increment = () => {
  count.value++;
};
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

2. 计算属性

computed 用于基于其他响应式值创建响应式、派生数据。

js 复制代码
<script setup>
import { ref, computed } from 'vue';

const count = ref(0);

const double = computed(() => count.value * 2);
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double: {{ double }}</p>
  </div>
</template>

3. 监视器

watch 观察响应式值,并在它们变化时执行操作。

js 复制代码
<script setup>
import { ref, watch } from 'vue';

const count = ref(0);

watch(count, (newValue, oldValue) => {
  console.log(`Count changed from ${oldValue} to ${newValue}`);
});
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
  </div>
</template>

4. 生命周期钩子

组合式 API 提供了与函数等效的生命周期钩子。

js 复制代码
<script setup>
import { onMounted, onUnmounted } from 'vue';

onMounted(() => {
  console.log('Component mounted');
});

onUnmounted(() => {
  console.log('Component unmounted');
});
</script>

5. 组合式函数

组合式函数是一个可复用的函数,用于封装逻辑。它是组合式 API 可复用性的基石。

示例:计数器逻辑的组合式函数

js 复制代码
// useCounter.js
import { ref } from 'vue';

export function useCounter() {
  const count = ref(0);

  const increment = () => {
    count.value++;
  };

  const decrement = () => {
    count.value--;
  };

  return { count, increment, decrement };
}

使用组合式函数:

js 复制代码
<script setup>
import { useCounter } from './useCounter';

const { count, increment, decrement } = useCounter();
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

✅ 总结

Vue 3 组合式 API 提供了一种现代、灵活的方式来处理状态和逻辑,使你的应用程序更易于扩展和维护。通过理解和使用响应式原语、计算属性、监视器和组合式函数,你可以编写更简洁、更可复用的代码。

原文:dev.to/jacobandrew...

相关推荐
楚轩努力变强23 分钟前
前端工程化常见问题总结
开发语言·前端·javascript·vue.js·visual studio code
鱼樱前端25 分钟前
rust基础二(闭包)
前端·rust
菜鸟学Python33 分钟前
Python web框架王者 Django 5.0发布:20周年了!
前端·数据库·python·django·sqlite
前端开发爱好者1 小时前
只有 7 KB!前端圈疯传的 Vue3 转场动效神库!效果炸裂!
前端·javascript·vue.js
pe7er1 小时前
RESTful API 的规范性和接口安全性如何取舍
前端·后端
Fly-ping1 小时前
【前端】JavaScript文件压缩指南
开发语言·前端·javascript
未来之窗软件服务2 小时前
免费版酒店押金原路退回系统之【房费押金计算器】实践——仙盟创梦IDE
前端·javascript·css·仙盟创梦ide·东方仙盟·酒店押金系统
拾光拾趣录2 小时前
常见 HTTP 请求头:从“为什么接口返回乱码”说起
前端·http
阿华的代码王国2 小时前
【Android】卡片式布局 && 滚动容器ScrollView
android·xml·java·前端·后端·卡片布局·滚动容器
2025年一定要上岸2 小时前
【pytest高阶】源码的走读方法及插件hook
运维·前端·python·pytest