Vue3组合式函数——Vue hooks

1 前言

前言摘抄自 Vue.js 官网组合式函数介绍

1.1 什么是“组合式函数”

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

1.2 和 Mixin 的对比

“组合式函数”和 Vue 2 中的 mixins 功能比较相近，它也让我们能够把组件逻辑提取到可复用的单元里。然而 mixins 有三个主要的短板：

1. 不清晰的数据来源：当使用了多个 mixin 时，实例上的数据属性来自哪个 mixin 变得不清晰，这使追溯实现和理解组件行为变得困难。这也是我们推荐在组合式函数中使用 ref + 解构模式的理由：让属性的来源在消费组件时一目了然。
2. 命名空间冲突：多个来自不同作者的 mixin 可能会注册相同的属性名，造成命名冲突。若使用组合式函数，你可以通过在解构变量时对变量进行重命名来避免相同的键名。
3. 隐式的跨 mixin 交流：多个 mixin 需要依赖共享的属性名来进行相互作用，这使得它们隐性地耦合在一起。而一个组合式函数的返回值可以作为另一个组合式函数的参数被传入，像普通函数那样。

2 技术细节

• 命名规范：组合式函数约定用驼峰命名法命名，并以“use”作为开头
• 复用有状态逻辑：变量使用 ref 包裹并抛出
• 生命周期钩子：可使用 vue 组件生命周期钩子函数，会先进入组合式函数生命周期，再进入组件内部生命周期

3 示例

• 新增 useCustomTab.ts 文件

import { ref, onActivated } from 'vue'

export default function () {
  const loading = ref(true)

  const getData = (isLoading: boolean) => {
    // isLoading：组件传入参数
    loading.value = isLoading
    setTimeout(() => {
      // 模拟异步接口请求完成后取消 loading
      loading.value = false
    }, 3000);
  }

  onActivated(() => {
    getData(true) // 先调用
  })

  return {
    loading,
    getData
  }
}

• 在组件中使用

<template>
  <div v-loading="loading">
    xxx
  </div>
</template>

<script setup lang="ts">
import useCustomTab from '@/hooks/useCustomTab'
const { loading, getData } = useCustomTab()

onActivated(() => {
  getData(true) // 后调用
})
</script>