前言

hooks之前听别人说起过，react中最开始有使用到，类似于一种钩子函数，说是生命周期有点不太合适。

下面的说法比较合适：

vue3 中的 hooks 就是函数的一种写法，就是将文件的一些单独功能的js代码进行抽离出来，放到单独的js文件中，或者说是一些可以复用的公共方法/功能。其实 hooks 和 vue2 中的 mixin 有点类似，但是相对 mixins 而言， hooks 更清楚复用功能代码的来源, 更清晰易懂。

什么是hooks

"hooks"直译是 “钩子”，它并不仅是 react，甚至不仅是前端界的专用术语，而是整个行业所熟知的用语。通常指：系统运行到某一时期时，会调用被注册到该时机的回调函数。

hooks我们经常遇到，只不过是我们没有去关注过它。windows.ready windows.onload我们都有使用过，这些我们也可以简称为hooks

vue3中的hooks

在src文件夹新建文件夹hooks,hooks文件下新建mousepostion.js,components文件先新建test.vue

mousepostion.js

import { ref, onMounted, onUnmounted } from 'vue'

const useMousePosition = () => {
    const x = ref(0)
    const y = ref(0)

    const updateMouse = (e) => {
        x.value = e.pageX
        y.value = e.pageY
    }

    onMounted(() => {
        document.addEventListener('click', updateMouse)
    })

    onUnmounted(() => {
        document.removeEventListener('click', updateMouse)
    })

    return {x, y}
}

export default useMousePosition

test.vue

<template>
  <div>
    <p>X: {{ x }}</p>
    <p>Y: {{ y }}</p>
  </div>
</template>

<script>
import { defineComponent} from 'vue'
// 引入hooks
import useMousePosition from '@/hooks/mousepostion'
export default defineComponent({
  setup () {
    // 使用hooks功能
    const { x, y } = useMousePosition()

    return {
      x,
      y
    }
  }
})
</script>