vue 自定义hook

vue 自定义hook

在 Vue.js 中，自定义 hook 是一种用于封装可重用逻辑的函数。这些函数可以在组件中使用，以便在不同的组件之间共享代码。要创建一个自定义 hook，你可以按照以下步骤操作：

1. 创建一个 JavaScript 文件，例如 useCustomHook.js。
2. 在该文件中，定义一个函数，该函数返回你想要共享的逻辑。
3. 在需要使用该逻辑的组件中，导入并调用该函数。

下面是一个简单的示例，演示了如何创建一个名为 useCustomHook 的自定义 hook，该 hook 返回一个包含两个方法的对象：increment 和 decrement。这两个方法分别用于递增和递减一个计数器值。

首先，创建一个名为 useCustomHook.js 的文件，并在其中定义 useCustomHook 函数：

// useCustomHook.js
export default function useCustomHook() {
  let count = 0;

  function increment() {
    count++;
  }

  function decrement() {
    count--;
  }

  return {
    count,
    increment,
    decrement,
  };
}

接下来，在需要使用这个自定义 hook 的 Vue 组件中，导入并调用它：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
import useCustomHook from './useCustomHook';

export default {
  setup() {
    const { count, increment, decrement } = useCustomHook();

    return {
      count,
      increment,
      decrement,
    };
  },
};
</script>

在这个示例中，我们首先从 useCustomHook.js 文件中导入 useCustomHook 函数。然后，在组件的 setup 方法中，我们调用该函数并将返回的对象解构为 count、increment 和 decrement。最后，我们将这些值返回，以便在模板中使用它们。