Vue3中hook的简单使用

创建文件夹

在src下创建文件夹。文件名称为hooks。

hooks下的文件夹下 是你的封装的hook

通过命名为useXXXXXX

usexy.js 文件是封装的获取屏幕的坐标

import {

 onBeforeUnmount,

 onMounted,

} from vue 

export default function () {

 let x ref( 0 )

 let y ref( 0 )

 // 如果这个文件是ts e的类型应该是 MouseEvent

 let pageHander function(e){

 console.log(e)

 x.value e.pageX;

 y.value e.pageY;

 // 需要使用生命周期函数 页面加载完成

 onMounted(() {

 window.addEventListener( click ,pageHander)

 // 在页面即将卸载时 移除事件的监听

 onBeforeUnmount(() {

 window.removeEventListener( click ,pageHander )

 return {x,y}

}

使用的页面

 template 

 div 

 p 横坐标{{x}} /p 

 p 纵坐标{{y}} /p 

 /div 

 /template 

 script 

import getxy from ../src/hooks/usexy.js 

export default {

 name: App ,

 setup() {

 let {x,y} getxy()

 return {x,y}

 /script 

也许大家会觉得这里的hooks。

跟我写一个封装的函数 没有什么区别

这里来看确实是没有什么太大的区别。

Vue2源码系列-render函数 前面我们对 Vue 实例化的大致流程进行了梳理。现在我们再具体看看初始化中的 initRender 的处理，通过本篇文章可以学习到 Vue 的 render 函数处理逻辑。
react 进阶hook 之自定义Hook hooks是一个函数，并且是在react 函数组件中使用的，不同的hook的作用也是不一样的，例如，state hook是用来定义函数组件的状态， 而effect hook 是用来定义组件的副作用,那么自定义hook是用来干啥的呢？,自定来定义一个hook 函数，里面可以包含 多个hooks。简单点的说是，把相同逻辑的hooks封装在同一个函数里。