Vue3进阶主题Composition API使用详解

目录
  • 什么是Composition API
  • 为什么Vue3推荐使用Composition API
  • 总结

什么是Composition API

Composition API 是 Vue3 中引入的一种新的 API 风格，旨在提高代码的可读性、可维护性和可重用性。Composition API 不同于 Vue2 中的 Options API，它采用了一种基于函数的编程方式，将组件内的逻辑分解成更小的可组合函数单元，以实现更加灵活和高效的代码组织方式。

为什么Vue3推荐使用Composition API

Vue3 推荐使用 Composition API 的主要原因是为了更好地组织和重用组件逻辑。

在 Vue2 中，我们通常使用 Options API，其中我们通过定义不同的选项（如 data、methods、computed 等）来定义组件的行为。这种方式存在一些缺点，例如：

  • 大型组件变得难以维护，因为相关代码被分散在不同的选项中。
  • 大型组件可能会有重复的逻辑，因为代码难以重用。
  • 跟踪哪些数据属性被修改以及在何时修改它们可能变得困难。

我们下面举个简单例子, 以下代码定义了一个用于获取数据的逻辑：

import { reactive, onMounted } from 'vue'
import axios from 'axios'
export function useData(url) {
  const data = reactive({
    loading: false,
    error: null,
    items: []
  })
  const fetchData = async () => {
    data.loading = true
    try {
      const response = await axios.get(url)
      data.items = response.data
    } catch (error) {
      data.error = error.message
    }
    data.loading = false
  }
  onMounted(() => {
    fetchData()
  })
  return {
    data,
    fetchData
  }
}

可以看到，该逻辑包括了获取数据的方法和处理加载状态、错误信息等的逻辑。我们可以在多个组件中使用该逻辑，避免了重复的代码。

例如，在一个组件中使用该逻辑：

import { useData } from './useData'
export default {
  setup() {
    const { data } = useData('https://api.example.com/data')
    return {
      data
    }
  }
}

当然, Vue2通过mixin也能实现上面的功能, 但可读性和可维护性不如Composition API:

const dataMixin = {
  data() {
    return {
      loading: false,
      error: null,
      items: []
    }
  },
  methods: {
    fetchData() {
      this.loading = true
      axios.get(this.url)
        .then(response => {
          this.items = response.data
        })
        .catch(error => {
          this.error = error.message
        })
        .finally(() => {
          this.loading = false
        })
    }
  },
  mounted() {
    this.fetchData()
  }
}

然后在组件中使用:

export default {
  mixins: [dataMixin],
  data() {
    return {
      url: 'https://api.example.com/data'
    }
  }
}

可以看到，使用mixin可以将公共的逻辑混入到组件中，但是混入存在一些问题，例如命名冲突、生命周期钩子的调用顺序等问题。

总结

Composition API 提供了一种更加灵活的方式来组织组件逻辑，它将相关的逻辑按照功能进行组织，而不是按照选项进行组织。这样，相关的逻辑被放置在一起，代码变得更加清晰，可读性和可维护性也得到了提高。

Composition API 还支持逻辑的复用，可以将一个逻辑作为一个单独的函数进行定义，然后在多个组件中进行复用。这种方式可以减少重复的代码，提高代码的复用性和可维护性。

可以说 Composition API 解决了组件结构问题，使得代码更加清晰、可读性和可维护性都得到了提高。

以上就是Vue3进阶主题Composition API使用详解的详细内容，更多关于Vue3主题Composition API的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 动画详解Vue3的Composition Api

    动画详解Vue3的Composition Api

    目录 回顾Option Api Option Api的缺陷 Composition Api 众所周知,Vue3.0带来了一个全新的特性——Composition API. 字面意思就是“组合API”,它是为了实现基于函数的逻辑复用机制而产生的. 回顾Option Api 在了解Composition Api之前,首先回顾下我们使用Option Api遇到的问题,我们在Vue2中常常会需要在特定的区域(data,methods,watch,computed...)编写负责相同功能的代码. Opti

  • Vue3 Composition API优雅封装第三方组件实例

    目录 前言 一.对于第三方组件的属性props.事件events 二.对于第三方组件的插槽slots 三.对于第三方组件的方法methods 前言 对于第三方组件,如何在保持第三方组件原有功能(属性props.事件events.插槽slots.方法methods)的基础上,优雅地进行功能的扩展了? 以Element Plus的el-input为例: 很有可能你以前是这样玩的,封装一个MyInput组件,把要使用的属性props.事件events和插槽slots.方法methods根据自己的需要再

  • 浅谈Vue3.0新版API之composition-api入坑指南

    关于VUE3.0 由于vue3.0语法跟vue2.x的语法几乎是完全兼容的,本文主要介绍了如何使用composition-api,主要分以下几个方面来讲 使用vite体验vue3.0 composition-api解决了什么问题 语法糖介绍 vite的安装使用 vite仓库地址 https://github.com/vuejs/vite 上面有详细的安装使用教程,按照步骤安装即可 composition-api解决了什么问题 使用传统的option配置方法写组件的时候问题,随着业务复杂度越来越高

  • Vue2如何支持composition API示例详解

    目录 前言 如何使用 原理解析 响应式( ref reactive 的实现) 总结 前言 自从 Vue3 发布之后,composition API 这个词走入写 Vue 同学的视野之中,相信大家也一直听到 composition API 比之前的 options API 有多好多强,如今由于 @vue/composition-api 插件的发布,Vue2 的同学也可以上车咯,接下来我们主要以响应式的 ref 和 reactive 来深入分析一下,这个插件是怎么实现此功能的. 如何使用 // 入口

  • vue3.2 Composition API项目依赖升级

    目录 第一次Composition API 思考setup 最常见的问题,忘记写.value style v-bind 的优缺点 pinia or not 第一次Composition API 在vue3.2中,正式支持了script setup的写法,这样可以大大简化组件的代码量,减少一些重复操作,我认为当你写vue3时,应该把这当作默认写法. 在vue3.2之前,一般会这样写. <script> export default { setup(props,ctx){ const a = re

  • Vue3新特性之在Composition API中使用CSS Modules

    在 Vue 3 Composition API 最近的一次 beta 升级中,无论是 Vue 3 本 3 库 vue-next,还是面向 Vue 2 过渡用的 @vue/composition-api 库中,都同步更新了一个 useCSSModule 函数 -- 用来在使用了 Composition API 的 Vue 实例中,支持 CSS Modules 语法. 首先来看看什么是 CSS Modules: CSS Modules CSS Modules 是一种 CSS 的模块化和组合系统.vu

  • Vue3进阶主题Composition API使用详解

    目录 什么是Composition API 为什么Vue3推荐使用Composition API 总结 什么是Composition API Composition API 是 Vue3 中引入的一种新的 API 风格,旨在提高代码的可读性.可维护性和可重用性.Composition API 不同于 Vue2 中的 Options API,它采用了一种基于函数的编程方式,将组件内的逻辑分解成更小的可组合函数单元,以实现更加灵活和高效的代码组织方式. 为什么Vue3推荐使用Composition

  • vue3 axios 实现自动化api配置详解

    vue3 axios 实现自动化api配置详解

    目录 概述 示例 约定 请求 URL 的约定 请求传参的约定 分页列表,请求参数约定 分页列表 响应示例 响应码 code 的约定 请求跨域问题解决方案 全局配置 配置说明coder/config.js 模型配置 1.实现对一个实体进行增.删.改.查.导出.唯一性校验 2.只需要增.删.改.查中得某些操作,可以指定生成你需要的方法 3.自定义方法配置 4.指定请求接口地址前缀 概述 在实践中,我们发现上述的代码重复率非常高,新增和修改都费力,并且是没技术含量的体力活. 但又必须要这样做,不适合以

  • Vue3中的组合式 API示例详解

    Vue3中的组合式 API示例详解

    目录 为什么要有组合式 API? 更好的逻辑复用 更灵活的代码组织 更好的类型推导 生产包体积更小 与选项式 API 的关系 组合式 API 是否覆盖了所有场景? 可以同时使用两种 API 吗? 选项式 API 会被废弃吗? 组合式 API 是一系列 API 的集合,使我们可以使用函数而不是声明选项的方式书写 Vue 组件.它是一个概括性的术语,涵盖了以下方面的 API: 响应性 API:例如ref()和reactive(),使我们可以直接创建响应式状态.计算属性和侦听器. 生命周期钩子:例如o

  • 详解vue3.0 的 Composition API 的一种使用方法

    网上讨论的文章已经很多了,这里举一个简单的例子来讨论一下 Composition API 的用法,具体问题才好具体讨论嘛. 假如我们要做一个论坛的讨论列表和分页,以前是把需要的数据都放在data里面,事件都放在methods 里面,代码少的话还好分辨,如果代码多了,看着就头疼了. 现在vue3.0可以按照业务关系分成多个管理类来管理这些代码. 比如帖子列表+发帖功能,我们先做一个模板: (简单表示一下,不做美化处理了) <template> <div> 论坛列表 <div v

  • vue3 Vite 进阶rollup命令行使用详解

    目录 rollup介绍 以命令行方式打包 Tree Shaking Rollup 的命令行使用 命令行 format 格式 rollup.config.js 设置/获取环境变量 插件 plugins rollup介绍 开源类库优先选择 以 ESM 标准为目标的构建工具 Tree Shaking 以命令行方式打包 安装 rollup npm install -g rollup 创建 index.js 文件 import path from "path"; console.log(&quo

  • Python爬虫进阶之Beautiful Soup库详解

    Python爬虫进阶之Beautiful Soup库详解

    一.Beautiful Soup库简介 BeautifulSoup4 是一个 HTML/XML 的解析器,主要的功能是解析和提取 HTML/XML 的数据.和 lxml 库一样. lxml 只会局部遍历,而 BeautifulSoup4 是基于 HTML DOM 的,会加载整个文档,解析 整个 DOM 树,因此内存开销比较大,性能比较低. BeautifulSoup4 用来解析 HTML 比较简单,API 使用非常人性化,支持 CSS 选择器,是 Python 标准库中的 HTML 解析器,也支

  • vue3+electron12+dll开发客户端配置详解

    当前使用的版本为 @vue/cli4 创建的 vue3.0 + typescript + electron 12 版本创建,其他版本暂未测试.网上资料良莠不齐,因此花费时间依次试验,达到一个目前最优解. 修改仓库源 由于electron版本的未知性,可能存在serve可用而build之后打开白屏的情况,因此需要谨慎对待.最好在版本可用的情况下commit一个版本,方便代码回滚,如果谁有更好的资料希望共享. 在开始配置前,可以将yarn和npm的rc文件稍作修改,使用命令或者文件直接修改.npmr

  • Swift进阶教程Mirror反射示例详解

    Swift进阶教程Mirror反射示例详解

    目录 元类型与.self AnyObject AnyClass Any type(Of:) self self在方法里面的作用 Self Swift Runtime Mirror Mirror的基本用法 Mirror的简单应用-JSON解析 Mirror源码解析 Enum Metadata探索 还原TargetEnumMetadata 还原TargetEnumDescriptor 相对偏移指针 打印枚举中的属性 Struct Metadata探索 获取结构体的属性 swift_getTypeBy

  • Vue3中使用Supabase Auth方法详解

    目录 引言 安装Supabase 设置Supabase 创建一个AuthUser组合 创建页面 注册.vue EmailConfirmation.vue 登录.vu ForgotPassword.vue Me.vue login() loginWithSocialProvider() logout() isLoggedIn() register() update() sendPasswordResetEmail() 观察Auth状态的变化 测试东西 注销 家庭作业 总结 引言 Supabase是

随机推荐