Foreword:

Hooks are an inevitable skill in Vue. Hooks are some reusable methods that can be introduced and called at any time to achieve the goal of high cohesion and low coupling.

1. Introduction to hooks

The hooks function in vue3 is equivalent to the mixin in vue2. The essence of hooks is a function. It is to extract the js code of some individual functions of the file and put it in a separate js file. Its advantage is that it can be reused The code makes the logic in the setup clearer and easier to understand, makes Compoosition Apiit easier to use and fuller, and makes writing Vue3 more enjoyable.

2. Basic use of 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 最终效果

Finally, our case is over, and users can add and delete student information.

2.2 Encapsulate hooks that monitor the mouse position

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后，调用后这个功能就能实现了，能够在任何页面去引入并且使用它最终效果：

<script setup>
import useMove from "./hooks/useMove"
const {  pageX, pageY} = useMove()
</script>

<template>
   <div>
      X: {
   
   {pageX }} Y:{
   
   { pageY }}
   </div>
</template>

<style scoped>
</style>

3. Summary

This is the basic use of hooks. This article just briefly explained that there are many common hooks that you can encapsulate by yourself, such as anti-shake, throttling, preloading, etc. The data source of hooks is clearly compared with the previous way of writing Mixin. There will be no disk fragmentation and no naming conflicts. It provides a more explicit way to organize code, making code reusable, and more importantly, it allows different logic parts to communicate and work together.

The basic use of hooks in vue3