vue3中的自定义hook函数
1、介绍什么是hook?—— 本质是一个函数,把setup函数中使用的Composition API进行了封装。类似于vue2.x中的mixin。自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。2、使用例如:给组件添加一个监听事件获取鼠标点击事件并复用①如果不复用的话:(注意,如果不把这个函数单写成savePoint会报错)②如果需要复用 ,可以进行了封装成hook导出,然后再
·
1、介绍
什么是hook?—— 本质是一个函数,把setup函数中使用的Composition API进行了封装。
类似于vue2.x中的mixin。
自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。
2、使用
例如:给组件添加一个监听事件获取鼠标点击事件并复用
①如果不复用的话:(注意,如果不把这个函数单写成savePoint会报错)
②如果需要复用 ,可以进行了封装成hook导出,然后再需要复用的组件中引用就好了。
代码:
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 }
复用usePoint的Demo.vue
<template> <h2>当前求和为:{{ sum }}</h2> <button @click="sum++">点我+1</button> <hr /> <h2>坐标为:x:{{ point.x }},y:{{ point.y }}</h2> </template> <script> import { ref } from "vue"; import usePoint from "../hooks/usePoint"; export default { name: "Demo", setup() { //数据 let sum = ref(0); let point = usePoint(); //返回一个对象(常用) return { sum, point }; }, }; </script>
复用复用usePoint的Test.vue
<template> <h2>我是Test组件</h2> <h2>坐标为:x:{{ point.x }},y:{{ point.y }}</h2> </template> <script> import usePoint from "../hooks/usePoint"; export default { name: "Test", setup() { const point = usePoint(); return { point }; }, }; </script>
参考视频:
https://www.bilibili.com/video/BV1Zy4y1K7SH?p=156&spm_id_from=pageDriver
更多推荐
已为社区贡献4条内容
所有评论(0)