初识 Vue3 Hook

Hook

作用

在 vue3 中的 Composition Api 不同于 vue2 中 Option Api 的写法，选项式的 data 、methos、computed、watch，让功能中的内容分开放入其中，在简单组件中结构清晰明了，但在较为复杂的组件中，功能之间的跳转查找就比较麻烦。Composition Api 可以让我们摆脱这种困境，而 hook 的使用更能体现组合式的优点。

hook 主要是用来存储一些复用的逻辑、变量的封装，将变量和方法按功能分块来写，来实现高内聚低耦合,与 vue2 中的 minins 作用相同。

• minins 当存在多个组件中的数据或者功能很相近时，我们就可以利用 mixins 将公共部分提取出来，通过 mixins 封装函数。在引入组件之后与组件中的对象和方法进行合并，发生重叠的时候以组件为主，而 created、mounted 等钩子函数合，mixins 的钩子优先调用。

// 定义
export const myMixins = {
  data() {
    return {
      name: '张三',
      age: 18
    }
  },
  mounted() {
    this.getPerson()
  },
  methods: {
    getPerson() {
      console.log(this.name + ':' + this.age)
    }
  }
}

// 使用
import { myMixins } from "myMixins.js"
export default {
  mixins: [ myMixins ],
  data() {
    return {}
  },
  mounted() {
    console.log('我叫' + this.name)
    this.getPerson()
  }
}

缺点就是

• 变量重复会覆盖，当组件命名与 mixin 中重复，组件的会覆盖 mixin 里面的。
• 无法查找数据来源，因为通过合并对象来共享代码，当引入多个 mixin，模糊了数据来源，查找的时候比较麻烦。

hook 不同于 minins，hook 是函数，这样就可以帮助我们提高代码的复用性, 让我们能在不同的组件中都利用 hooks 函数，并且能够清楚知道使用变量、方法的来源，帮助开发者更好地管理组件状态和行为。

使用

新建一个 hook 文件，我们通常给这个文件命名为 ‘ use + 功能名 ’ 为文件名。最后通过 return 出我们想要使用的数据和方法。

import { ref, onMounted, onUnmounted } from 'vue'
export default function useAmount(num1) {
  let x = ref<number>(0)
  let y = ref<number>(1)

  function amount(num2: number) {
    console.log('Point', num1, num2)
  }

  onMounted(() => {
    console.log('onMounted')
  })

  onUnmounted(() => {
    console.log('onUnmounted')
  })

  return { x, y, point }
}

使用

import useAmount from '@/hooks/usePoint';
const { x, y, amount } = useAmount(123)
console.log(x, y)
amount(111)

可以导入使用时解构重新命名，解决引入多个 hook 时命名冲突问题。

import useAmount from '@/hooks/usePoint';
const { x, y, amount: sum } = useAmount(123)
sum(3)

总结

• 以函数形式将可复用的数据、方法提取出来，方便在各个组件中重复使用，解决 mixin 命名冲突的问题。
• hook 更加符合 vue3 的组合式 api，通过函数返回值将想要的内容暴露出来，根据功能集中管理代码，使得组件的逻辑结构更加清晰，并且能够更好支持 TypeScript 类型编写。