目录

前言：

1.hooks介绍

2.hooks的基本使用

2.1添加删除学生信息的案例

2.2封装监听鼠标位置的hooks

3.总结

前言：

hooks在vue中是必会的技巧 ，hooks就是一些可复用的方法，可以随时被引入和调用以实现高内聚低耦合的目标。

1.hooks介绍

vue3 中的 hooks 函数相当于 vue2 里面的 mixin 混入,hooks本质是一个函数, ，就是将文件的一些单独功能的js代码进行抽离出来，放到单独的js文件中他的优势就在于, 复用代码, 让setup中的逻辑更清楚易懂，让Compoosition Api更好用更丰满，让书写Vue3更畅快。

2.hooks的基本使用

为了展示hooks的使用，所以我们做二个案例来更好的掌握hooks的基本使用。

2.1添加删除学生信息的案例

2.1.1 建立一个hooks文件夹:src/hooks

2.1.2静态布局

// src/App.js 名称:年龄:添加学生
 
序号
名字
年龄
操作
 
 
{{ index }}
{{item.name }}
{{item.age }}
删除
 
 

2.1.3在hooks文件下创建useClass.js文件(一般使用use开头)

//src/hooks/useClass.jsimport {reactive } from 'vue'export default function(){let id = 3//学生信息let classList = reactive([{id:0,name:"jianwang",age:18},{id:1,name:"domes",age:20},{id:2,name:"dow",age:18},])//添加信息 const addClass = (name,age)=>{id++classList.push({id,name,age}) } //删除信息 const delects = (ids)=>{for(let [index,item] of classList.entries()){console.log(ids,item.id)if(item.id == ids){classList.splice(index,1)} } } //把方法和数据返回出去 return{addClass,delects,classList }}

2.1.4App.js中引入hooks

// src/App.js//引入hooks文件import useClass from "./hooks/useClass"//用户填写的学生姓名与年龄let name = "",age = 0;//导入const {delects,addClass,classList} = useClass()

2.1.5最终效果

最终我们这个案例就结束了，用户能够对学生信息进行添加与删除了。

2.2封装监听鼠标位置的hooks

2.2.1 和上面的流程一样首先创建hooks文件然后编写内容

// src/hooks/useMove.jsimport {ref} from 'vue'export default function(){//创建2个响应式变量来储存用户鼠标x轴和y轴的位置let pageX = ref(0) , pageY = ref(0)window.addEventListener('mousemove',(event)=>{pageX.value = event.pageXpageY.value = event.pageY})return {pageX,pageY}}

2.2.1 在App.js中引入hooks后，调用后这个功能就能实现了，能够在任何页面去引入并且使用它最终效果：

import useMove from "./hooks/useMove"const {pageX, pageY} = useMove() X: {{pageX }} Y:{{ pageY }} 

3.总结

这就是 hooks 的基本使用,本篇文章只是简单的讲解了一下还有很多常用hooks大家可以自己去封装一下比如防抖，节流，预加载等等。hooks的数据来源清晰 对比之前的写法 Mixin 不会出现磁盘碎片，不会出现命名冲突。它提供了一种更明确的方式来组织代码，使得代码能重用，更重要的是，它允许不同的逻辑部分进行通信、协同工作。