Vue3自定义hook的用法（附带实例）

Vue3 推荐利用 Vue 的组合式 API 函数进行代码封装，这种封装方式统称为自定义 hook。

假设现在想要实现，切换 Comp1、Comp2 两个组件，这两个组件的实现效果基本相同，它们都可以对 msg、count 数据进行处理，以及设置 count 的 increase 递增功能、count 的 computed 计算属性和对 count 数据进行 watch 监听，唯一的区别就是 Comp1 中 count 的始初值是 0，而 Comp2 中 Count 的初始值是 2。

Comp1.vue 文件代码如下，这是 Vue2 的编码方式，现在在这个基础上修改代码，实现自定义 hook 封装。

<template>
  <div>
    <p>msg:{{ msg }}</p>
    <p>count:{{ count }}</p>
    <p>double:{{ double }}</p>
    <button @click="increase">increase</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: '你好，C语言中文网!',
      // Comp1 中 count 的初始值为 0，Comp2 中 count 的初始值为 2
      count: 0,
    };
  },
  methods: {
    increase() {
      this.count++;
    },
  },
  computed: {
    double() {
      return this.count * 2;
    },
  },
  watch: {
    count(newVal, oldVal) {
      console.log('count 发生了变化', newVal, oldVal);
    },
  },
};
</script>

直接复制 Comp1.vue 文件的代码，将其中 count 的初始值修改为 2，完成 Comp2.vue 文件代码的编写。

在 src 目录下创建 hooks 目录，并在 hooks 目录下创建 countHook.js 文件。将 Comp1 中的逻辑脚本迁移至 countHook.js 文件中，并做简单修改：引入 ref、computed、watch 函数，将数据、方法、计算属性和监听中的内容重新声明并默认暴露，最终将 msg、count、increase、double 这些变量、函数、计算结果值返回。

值得一提的是，由于后续会改变 Comp1 与 Comp2 的 count 值，因此这里使用函数传参的方式对 count 的值进行设置。

src/hooks/countHook.js 文件代码如下：

import { ref, computed, watch } from 'vue';
export default (initCount = 0) => {
  const msg = ref('你好，C语言中文网！');
  const count = ref(initCount);

  const increase = () => {
    count.value++;
  };

  const double = computed(() => {
    return count.value * 2;
  });

  watch(double, (newVal, oldVal) => {
    console.log('newVal', newVal);
    console.log('oldVal', oldVal);
  });

  return { msg, count, increase, double };
};

此时就可以在 Comp1 中引入 countHook，并传递 count 的初始值。如果不传递值，则默认使用 hook 中设置的 initCount 初始值。由于 Comp1 的初始值需要设置为 0、Comp2 的初始值需要设置为 2，所以 Comp1 不需要传值，Comp2 传递 2 即可。

这里只展示 Comp1.vue 文件的代码，具体如下：

<template>
  <div>
    <p>msg:{{ msg }}</p>
    <p>count:{{ count }}</p>
    <p>double:{{ double }}</p>
    <button @click="increase">increase</button>
  </div>
</template>

<script setup>
import countHook from '../hooks/countHook';
const { msg, count, increase, double } = countHook();
</script>