vue 3 第三十三章：自定义 hooks

1. vue 2 中mixins

在Vue.js 2.x版本中， mixin 被广泛用于将组件的逻辑、计算属性和方法复用到其他组件中。然而，使用 mixin 也存在一些缺点需要注意。

1.1. mixins 的缺点：

• 命名冲突。当多个mixin中存在相同名称的方法或计算属性时，会发生命名冲突。这会导致组件中的数据和方法被覆盖，从而产生意想不到的行为。
• 组件依赖关系不明确。使用mixin会增加组件的复杂性，并使组件之间的依赖关系变得不明确。如果一个组件依赖多个mixin，那么这个组件的行为将变得难以预测和维护。
• 数据来源不可追踪。当一个组件使用多个mixin时，组件的数据来源将变得不可追踪。这会增加代码的调试难度，并导致在维护时出现困难。
• 混乱的代码结构。使用mixin会导致组件的代码结构变得混乱，因为逻辑和计算属性被分散在多个文件中。这会使代码难以理解和维护。

因此在 Vue 3 中 mixins 被废弃，推荐的做法是使用自定义 hook 。

2. 自定义 hooks

优秀的 hook 库推荐：VueUse

在Vue3中，自定义Hook是一个非常有用的功能，它可以帮助我们重用组件中的逻辑。下面是一个简单的示例，介绍如何在Vue3中创建自定义Hook。

2.1. 创建自定义Hook

要创建自定义Hook，我们可以导出一个函数。以下是一个简单的自定义Hook示例：

// hooks/counter.ts
import { ref } from "vue";

export default function () {
  const count = ref(0);
  const increment = () => {
    count.value++;
  };
  return {
    count,
    increment,
  };
}

在这个示例中，我们创建了一个名为useCounter的自定义Hook，它返回一个包含count和increment方法的对象。count是一个响应式变量，increment用于增加count的值。

2.2. 在组件中使用自定义Hook

以下是一个使用上面定义的useCounter自定义Hook的组件示例：

// hooks.vue
<template>
  <div>
    <div>自定义hook</div>
    <span>count: {{ counter.count }}</span>
    <br />
    <button @click="counter.increment">increment</button>
  </div>
</template>

<script setup lang="ts">
import useCounter from "@/hooks/counter";
const counter = useCounter();
</script>

<style scoped></style>

2. 总结

本章介绍了 Vue 3 中的自定义 hooks。自定义 hooks 可以帮助我们在 Vue 组件之间共享逻辑，提高代码的可重用性和可维护性。