Vue框架在项目开发中如何实现组件的复用？

本文共计1417个文字，预计阅读时间需要6分钟。

目录 + 介绍 + 最佳实践

1.options 对象化

2.动态返回

3.灵活使用 ref

4.异步变同步

5.简易状态管理

参考资料 + 介绍 + 在 Vue 应用中，组合式函数（Composables）是利用 Vue 的响应式系统，将逻辑封装成可重用的组件。组合式函数是 Vue 3 的一个强大特性，它可以帮助我们更好地组织代码，提高组件的可读性和可维护性。

目录

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

介绍

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

• 组合式函数 | Vue.js
• 组合式 API 常见问答 | Vue.js

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

参考资料

• vueuse.org/
• 可组合的 Vue - Anthony Fu
• michaelnthiessen.com/coding-bett…

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