vue  composition-api 封装组合式函数的操作方法

目录
  • 介绍
  • 最佳实践
    • 1. options对象化
    • 2. 动态返回
    • 3. 灵活地使用ref
    • 4. 异步变同步
    • 5. 简单的状态管理
  • 参考资料

介绍

在 Vue 应用的概念中，“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。

Composables 函数就是利用 Vue3 提出的 Composition API ，封装出的一些可以复用的组合式函数，目前 Vue2 也可以使用（2.7 版本可以直接使用，2.6 需要引入另外composition-api的插件）。还没写过这种风格代码的同学，可以先看引用的官方文档的两个链接，介绍的比较详细。

下面我简单介绍一下： 组合式 API 的灵感来自Hooks，也是目前流行的函数式编程的思想，便于逻辑复用、测试以及类型推导，编写Vue业务代码的时候会更加的灵活。但组合式 API 不等于函数式编程，组合式 API 的特点是基于Vue数据响应系统的，而函数式编程通常强调数据不可变的。 组合式API 包括：

  • 响应式相关（ref、reactive、computed、watch 等）
  • 生命周期钩子（onMounted 和 onUnmounted 等）
  • provide、inject 等

一个简单的组合式函数示例和使用：

import { computed } from 'vue'

export function useAdd(a,b) {
 return computed(() => a.value + b.value)
}
import { ref } from 'vue'
import { useAdd } from './add.js
const a = ref(1)
const b = ref(2)
const c = useAdd(a,b)

最佳实践

像写工具函数一样，组合式函数也要设计好函数的接口，设计函数入参的类型以及默认值和返回值是什么样，以及后期的可扩展性。

1. options对象化

编写组合式函数时如果传入一些配置参数，可以把配置参数设计为 options 对象，好处就是不需要记住参数的位置，以及方便后期的扩展，可通过 TS 类型提示。如 Lodash 的防抖节流函数，配置项也是放在 options 对象里的。 函数内部实现通过解构获取 options 的配置项，可以赋值默认值

export function useTitle(newTitle = null, options = {}) {
  const {
    document = defaultDocument,
    observe = false,
    titleTemplate = '%s',
  } = options
  // ...
}

2. 动态返回

通过 options 的配置项，可以动态返回不同的值

export default useNow(options) {
  const { controls = false } = options;

  // ...

  if (!controls) {
    return value;
  } else {
     return { value, controlAction1, controlAction2 };
  }
}

如：useNow vueuse.org/core/useNow…

import { useNow } from '@vueuse/core'

const now = useNow()

// 返回控制暂停/恢复的函数
const { now, pause, resume } = useNow({ controls: true })

3. 灵活地使用ref

入参在使用的过程中可能是普通类型或 ref 类型：

type MaybeRef<T> = Ref<T> | T

如果函数内部期待入参是普通类型，但是使用者可能传入响应式的 Ref 类型，可以使用 unref 函数获取值，兼容 ref类型：

import { unref } from 'vue'

function useFeature(maybeRef) {
  const value = unref(maybeRef)
  //...
}

unref 的实现：

function unref <T> (r:Ref<T>|T): T) {
  return isRef(r) ? r.value : r
}

如果函数内部入参是 ref 类型的，可以再使用 ref 函数包裹，该函数如果传入一个ref类型的参数会原样返回。

import { ref, watch } from 'vue'
export function useTitle(newTitle) {
  const title = ref(newTitle || document.title)
  watch(title, (t) => {
    if (t != null) document.title = t},
        { immediate: true }
  )
  return title
}

4. 异步变同步

通过响应式数据的连接，不必使用await，在等待异步请求返回后将数据进行更新。如：

const { res } = useFetch('https://xxx.com/').json()
const data = computed(() => res.value?.data)
import { shallowRef } from 'vue'

export function useFetch<>(url) {
    const data = shallowRef(null)
    const error = shallowRef(null)
    fetch(unref(url)).then(r => r.json())
    .then(r => data.value = r)
    .catch(e => error.value = e)

  return {
        data,
        error
    }
}

5. 简单的状态管理

由于响应性系统与组件层是解耦的，简单的场景下我们可以使用 reactive 创建一个响应式对象，在多个组件实例间共享数据。

// store.js
import { reactive } from 'vue'

export const store = reactive({
  a: 0,
  b: 1
})

复杂场景则需要使用 pinia 进行状态管理

参考资料

到此这篇关于vue composition-api 封装组合式函数的操作方法的文章就介绍到这了,更多相关vue composition-api 内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 一文详解Vue选项式 API 的生命周期选项和组合式API

    目录 Vue2.Vue3 生命周期的变化 选项式 API 的生命周期选项的变化 小知识 组合式 生命周期选项 API VNode 生命周期事件 Vue2x Vue3x Vue2.Vue3 生命周期的变化 正好在看Vue的官方文档,也正好比对一下,做一下笔记 选项式 API 的生命周期选项的变化 Vue2.x Vue3 beforeCreate beforeCreate created created beforeMount beforeMount mounted mounted beforeUp

  • vue3组合式api实现v-lazy图片懒加载的方法实例

    目录 前置知识 Intersection Observer Vue3指令周期 image对象 思路 完整代码 总结 前置知识 Intersection Observer 浏览器提供api,用于检测目标元素和祖先元素/顶级文档视窗 (viewport) 交叉状态的方法. const observer = new IntersectionObserver(function (IntersectionObserverEntry) {},options); observer.observe(el); 构

  • vue组合式API浅显入门示例详解

    目录 正文 组合式API setup 变量声明 目前比起选项式API的优点 生命周期 正文 在react推出了hook之后,vue也在vue3里面添加了组合式API,鉴于这个时间间隔,我有理由认为组合式api和hook还是有一些关系的.不过在我具体的使用中,我并没发现这两个方法太多的相同点,不过鉴于vue自动发布之后就与react之间那剪不断理还乱的量子力学关系,估计会有很多人会问及这俩之间的异同.我还没到能分辨出异同的地步,就简单的介绍一下vue的组合式API吧. 组合式API 在vue3.0

  • vue3-组合式api-provide/inject详解

    目录 一.父组件 二.子组件 三.孙组件 四.运行项目界面效果如下 Vue3:组合式API-依赖注入(provide().inject()) 1.provide() 2.inject() provide/inject 适用于跨级通信,例如在父组件中改变值,在孙组件中通过依赖注入的方式能获取到父组件中改变的这个值 一.父组件 <template> <div> <!-- 子组件 --> <son></son> <button @click=&q

  • Vue组合式API--setup中定义响应式数据的示例详解

    目录 一.Options API(选项式API)的弊端 1.1 什么是选项式API 1.2 选项式API的弊端 二.Composition API(组合式API)概述 2.1 Composition API的作用 2.2 Composition API的编码位置 三.setup函数的参数和返回值 3.1 setup函数的参数 3.2 setup函数的返回值 四.setup中如何定义响应式数据 4.1 reactive函数 4.2 ref函数 4.3 关于如何选择reactive函数和ref函数

  • vue  composition-api 封装组合式函数的操作方法

    目录 介绍 最佳实践 1. options对象化 2. 动态返回 3. 灵活地使用ref 4. 异步变同步 5. 简单的状态管理 参考资料 介绍 在 Vue 应用的概念中,“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数. 组合式函数 | Vue.js 组合式 API 常见问答 | Vue.js Composables 函数就是利用 Vue3 提出的 Composition API ,封装出的一些可以复用的组合式函数,目前 Vue2 也

  • Composition Api封装业务hook思路示例分享

    Composition Api封装业务hook思路示例分享

    目录 前序 hook的场景 useGetJobList 共同 思路历程 心得 utils 和 hook 的区别 总结 前序 近期公司的新项目一个小程序,一直想尝试 Vue3 开发项目,苦于自己的驱动力不行,学的零零碎碎的.因此小程序我直接跟项目组长说我要使用 uniapp 的 Vue3 版进行开发.开发中遇到业务场景相同的,就分装了一个hook 来减少代码,易于维护. hook的场景 这种获取列表的需求很常见吧,在我这个小程序中有3处使用到了获取列表的功能.分别是: 我的收藏.已投递岗位.未投递

  • 使用Vue Composition API写出清晰、可扩展的表单实现

    表单是前端开发中最棘手的部分之一,您可能会在其中发现很多混乱的代码. 基于组件的框架,如 Vue.js,在提高前端代码的可扩展性方面做了很多工作,但是表单的问题仍然存在. 在本教程中,将向您展示新的 Vue Composition API(即将加入 Vue 3 中)如何使表单代码更清晰.更具可扩展性. 为什么表单代码经常很烂 像 Vue 这种基于组件的框架的关键设计模式是组件组合. 这种模式将应用程序的特性抽象为独立的.单一用途的组件,这些组件通信使用 props 和事件的方式. 然而,在此模式

  • Vue自定义指令封装节流函数的方法示例

    节流函数是web前端开发中经常用到的一个开发技巧,在input实时搜索,滚动事件等,为了避免过多消耗性能,我们都会使用节流函数.在<JavaScript高级程序设计>一书中有这样的一个例子: function throttle (method, context) { clearTimeout((method.tId)) method.tId = setTimeout(function () { method.call(context) }, 100) } function resizeDiv

  • Composition API思想封装NProgress示例详解

    目录 正文 安装和基本使用 自己实现一个 正文 最近在用vue3封装一套后台管理模版,自然会用到NProgress.如果你没有用过,你可以看一下instagram,youtube这些网站,它们都有一个顶部加载条,这也是现在最流行的网页加载条. 于是我发现了@vueuse/integrations中的useNProgress,我们先看一下Anthony Fu大神如何去封装的,然后咱们再去试着自己实现一下. 安装和基本使用 npm i nprogress @vueuse/integrations 基

  • 详解Vue3 Composition API中的提取和重用逻辑

    Vue3 Composition API可以在大型项目中更好地组织代码.然儿,随着使用几种不同的选项属性切换到单一的setup 方法,许多开发人员面临的问题是-- 这会不会更混乱,因为一切都在一个方法中 乍一看可能很容易,但是实际上只需要花一点点时间来编写可重用的模块化代码. 让我们来看看如何做到这一点. 问题 Vue.js 2.x 的 Options API 是一种非常直观的分隔代码的方法 export default { data () { return { articles: [], se

  • 浅谈Vue3 Composition API如何替换Vue Mixins

    想在你的Vue组件之间共享代码?如果你熟悉Vue 2 则可能知道使用mixin,但是新的Composition API 提供了更好的解决方案. 在本文中,我们将研究mixins的缺点,并了解Composition API如何克服它们,并使Vue应用程序具有更大的可伸缩性. 回顾Mixins功能 让我们快速回顾一下mixins模式,因为对于下一部分我们将要讲到的内容,请务必将其放在首位. 通常,Vue组件是由一个JavaScript对象定义的,它具有表示我们所需功能的各种属性--诸如 data,m

  • 详解Vue中Axios封装API接口的思路及方法

    一.axios的封装 在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中.他有很多优秀的特性,例如拦截请求和响应.取消请求.转换json.客户端防御XSRF等. 在一个项目中我们如果要使用很多接口的话,总不能在每个页面都写满了.get()或者.post()吧?所以我们就要自己手动封装一个全局的Axios网络模块,这样的话就既方便也会使代码量不那么冗余. 安装 > npm install axios //这个

  • Vue项目API接口封装的超详细解答

    目录 前言 一.axios是什么? 二.API接口封装步骤 1.创建拦截器(Interceptor.js) 2.创建存放API的文件(http.js) 3.使用方法 总结 前言 我们在开发的过程中,时常需要去访问服务器,然而每个请求都需要重新去axios访问,过于麻烦,所以我们在这封装了一个进行请求的方法,并且将接口api化,需要使用时直接引入api方法,使用起来非常的简单. 一.axios是什么? axios 是一个基于Promise 的 HTTP 库,可以用在浏览器和 node.js 中.

  • 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

随机推荐