为什么Vue3要用自定义Hook？：
就是为了让Compoosition Api更好用更丰满，让写Vue3更畅快！像写诗一样写代码！ 其实这个问题更深意义是为什么Vue3比Vue2更好！无外呼性能大幅度提升，其实编码体验也是Vue3的优点Composition Api的引入（解决Option Api在代码量大的情况下的强耦合） 让开发者有更好的开发体验。
-
将可复用功能抽离为外部JS文件
-
函数名/文件名以use开头，形如：useXxx
-
引用时将响应式变量或者方法显式解构暴露出来如：
const {nameRef，Fn} = useXxx()（在setup函数解构出自定义hooks的变量和方法）
实例：
hooks/useMousePosition.js
import { onMounted, reactive, toRefs } from 'vue'
export default () => {
// 1、获取坐标轴
// 定义响应式初始值
const moves = reactive({
x: 0,
y: 0
})
// 获取当前鼠标位置
const move = e => {
// console.log(e.pageX)
// console.log(e.pageY)
moves.x = e.pageX
moves.y = e.pageY
}
onMounted(() => {
// 参数一：鼠标在文档中移动事件，参数二：事件处理函数
document.addEventListener('mousemove', move)
})
return {
//等价于 x: 0, y: 0
...toRefs(moves)
}
}
App.vue
<template>
<div>获取当前鼠标当前位置：</div>
<div>x：{{x}}</div>
<div>y：{{y}}</div>
<hr>
<div>
{{count}}
<button @click="add">+1</button>
</div>
<Abc />
</template>
<script setup>
import { ref } from 'vue'
// 引入hooks函数
import useMousePosition from './hooks/useMousePosition'
// 1、调用 hooks 函数，提高代码复用
const { x, y } = useMousePosition()
// 2、加一
const count = ref(0)
const add = () => {
count.value ++
}
</script>
<style lang="scss" scoped>
</style>
