函数"/>
vue3中的hook函数
一、什么是hook
hook本质是一个函数,把setup函数中使用的Composition API(组合式API)进行了封装,类似于vue中的mixin。
自定义hook的优势:复用代码,让setup中的逻辑更清楚易懂。
我们用获取当前鼠标的坐标这个例子来说明:
二、未封装hook前的代码
<template><div><h3>当前鼠标的坐标为:x:{{ point.x }},y:{{ point.y }}</h3></div></template><script>
import { onBeforeUnmount, onMounted, reactive } from 'vue';export default {setup() {let point = reactive({x: 0,y: 0})function savePoint(e) {point.x = e.pageXpoint.y = e.pageYconsole.log(point.x, point.y);}onMounted(() => {window.addEventListener('click', savePoint)})onBeforeUnmount(() => {window.removeEventListener('click', savePoint)})return {point}}
}
</script>
三、封装后的代码
(1)组件中(PointView.vue)
<template><div><h3>当前鼠标的坐标为:x:{{ point.x }},y:{{ point.y }}</h3></div></template><script>
import usePoint from "@/hooks/usePoint";
export default {setup() {const point = usePoint()return {point}}
}
</script>
(2)hook中(usePoint.js)
import { onBeforeUnmount, onMounted, reactive } from 'vue';
// 获取鼠标当前坐标
export default function() {// 数据let point = reactive({x: 0,y: 0})// 方法function savePoint(e) {point.x = e.pageXpoint.y = e.pageYconsole.log(point.x, point.y);}onMounted(() => {window.addEventListener('click', savePoint)})onBeforeUnmount(() => {window.removeEventListener('click', savePoint)})// 返回值return point
}
更多推荐
vue3中的hook函数
发布评论