Vue3: 知识总结: hooks(是函数形式)
Vue3 的 hook函数 相当于 vue2 的 mixin, 不同在与 hooks 是函数
Vue3 的 hook函数 可以帮助我们提高代码的复用性, 让我们能在不同的组件中都利用 hooks 函数
例子 :
首先在src目录下建立一个 hooks 文件夹
申明一个我们要复用的方法的名字.ts 文件
下面是 useMousePosition.ts 代码
import {onBeforeUnmount, onMounted, ref} from 'vue'export default function () { const x = ref(-1) ; // x 绑定为响应式数据 const y = ref(-1); const clickHandler=(event:MouseEvent)=>{ x.value = event.pageX y.value = event.pageY } onMounted(()=>{ window.addEventListener('click', clickHandlker) }) onBeforeUnmount(()=>{ window.removeEventListner('click', clickHandler) }) return { x, y }}
下面是 App.vue组件使用我们的 userMousePosition 这个 hooks 方法
<template><div> <h2>x: {{x}}, y: {{y}}</h2></div></template><script>import { ref} from "vue"/* 在组件中引入并使用自定义hook自定义hook的作用类似于vue2中的mixin技术自定义Hook的优势: 很清楚复用功能代码的来源, 更清楚易懂*/import useMousePosition from './hooks/useMousePosition'export default { setup() { const {x, y} = useMousePosition() // 这里就用了 hooks 函数, 从而提高了复用性 return { x, y, } }}</script>
————————————————
版权声明：本文为CSDN博主「爱吃鸡蛋的程序员」的原创文章
原文链接：https://blog.csdn.net/weixin_34865745/article/details/113992767