vue 怎么用好 composition-api 封装组合式函数

·  阅读 2218
vue 怎么用好 composition-api 封装组合式函数

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第N天,点击查看活动详情

介绍

在 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 进行状态管理

6. 获取this

getCurrentInstance可以获取当前组件的实例、上下文。来操作vuex、router等

import { getCurrentInstance } from 'vue';

const instance = getCurrentInstance(); // 获取当前组件实例

const { proxy }  = getCurrentInstance(); // 组件上下文对象,相当于this
复制代码

参考

收藏成功!
已添加到「」, 点击更改