首先 并没有用到新的 组合式api,本质就是为了封装和代码的复用性
什么是hook?
把setup函数中使用的组合式 Api进行封装 本质是一个函数 类似于Vue2中的mixin
优势:复用代码 让setup中的逻辑更清晰
案例:点击页面实现获取坐标的功能,并且有多个组件需要这个功能:
新建一个hooks文件夹 存放函数
函数编写如下 usePoint.js ,实现点击页面打印坐标 组件卸载后 事件监听也要解绑
import {reactive,onMounted,onBeforeUnmount} from 'vue'
export default function (){
let point = reactive({
x:0,
y:0
})
function savePoint(event){
point.x = event.pageX
point.y = event.pageY
console.log(event.pageX,event.pageY)
}
onMounted(()=>{
window.addEventListener('click',savePoint)
})
onBeforeUnmount(()=>{
window.removeEventListener('click',savePoint)
})
// 向外返回有用的数据
return point
}
需要打点功能的组件 如下
<template>
<h2>其他的一些功能。。。。</h2>
<br>
<h2>当前点击时鼠标的坐标为:x:{{point.x}},y:{{point.y}}</h2>
</template>
<script>
import {ref} from 'vue'
import usePoint from '../hooks/usePoint'
export default {
setup(){
//数据
let sum = ref(0)
// 调用hooks函数 并接收数据
let point = usePoint()
return {sum,point}
}
}
</script>