目录
前言：
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
<template>
<div>
<div>
名称:<input type="text" v-model="name">
年龄:<input type="number" v-model="age">
<button @click="addClass(name,age)">添加学生</button>
</div>
<table border width="520">
<tr>
<td>序号</td>
<td>名字</td>
<td>年龄</td>
<td>操作</td>
</tr>
<tr v-for="(item,index) in classList" :key="item.id">
<td>{{ index }}</td>
<td>{{item.name }}</td>
<td>{{item.age }}</td>
<td @click="delects(item.id)">删除</td>
</tr>
</table>
</div>
</template>2.1.3 在hooks文件下创建useClass.js文件(一般使用use开头)
//src/hooks/useClass.js
import {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.4 App.js中引入hooks
// src/App.js
<script setup>
//引入hooks文件
import useClass from "./hooks/useClass"
//用户填写的学生姓名与年龄
let name = "",age = 0;
//导入
const {delects,addClass,classList} = useClass()
</script>
2.1.5 最终效果
最终我们这个案例就结束了，用户能够对学生信息进行添加与删除了。
2.2封装监听鼠标位置的hooks
2.2.1 和上面的流程一样首先创建hooks文件然后编写内容
// src/hooks/useMove.js
import {ref} from 'vue'
export default function(){
//创建2个响应式变量来储存用户鼠标x轴和y轴的位置
let pageX = ref(0) , pageY = ref(0)
window.addEventListener('mousemove',(event)=>{
pageX.value = event.pageX
pageY.value = event.pageY
})
return {
pageX,
pageY
}
}2.2.1 在App.js中引入hooks后，调用后这个功能就能实现了，能够在任何页面去引入并且使用它最终效果：
文章来源：https://www.toymoban.com/news/detail-612263.html
<script setup>
import useMove from "./hooks/useMove"
const { pageX, pageY} = useMove()
</script>
<template>
<div>
X: {{pageX }} Y:{{ pageY }}
</div>
</template>
<style scoped>
</style>3.总结
这就是 hooks 的基本使用,本篇文章只是简单的讲解了一下还有很多常用hooks大家可以自己去封装一下比如防抖，节流，预加载等等。hooks的数据来源清晰 对比之前的写法 Mixin 不会出现磁盘碎片，不会出现命名冲突。它提供了一种更明确的方式来组织代码，使得代码能重用，更重要的是，它允许不同的逻辑部分进行通信、协同工作。文章来源地址https://www.toymoban.com/news/detail-612263.html
到了这里，关于vue3中的hooks基本使用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
