Vorwort:

Hooks sind eine unvermeidliche Fähigkeit in Vue. Hooks sind einige wiederverwendbare Methoden, die jederzeit eingeführt und aufgerufen werden können, um das Ziel einer hohen Kohäsion und einer geringen Kopplung zu erreichen.

1. Einführung in Hooks

Die Hooks-Funktion in vue3 entspricht dem Mixin in vue2. Das Wesentliche von Hooks ist eine Funktion. Sie besteht darin, den JS-Code einiger einzelner Funktionen der Datei zu extrahieren und in einer separaten JS-Datei abzulegen. Sein Vorteil ist, dass dies möglich ist wiederverwendet werden Der Code macht die Logik im Setup klarer und verständlicher, macht Compoosition Apidie Verwendung einfacher und umfassender und macht das Schreiben von Vue3 angenehmer.

2. Grundlegende Verwendung von Haken

为了展示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 最终效果

Endlich ist unser Fall abgeschlossen und Benutzer können Schülerinformationen hinzufügen und löschen.

2.2 Kapseln Sie Hooks ein, die die Mausposition überwachen

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. Zusammenfassung

Dies ist die grundlegende Verwendung von Hooks. In diesem Artikel wurde nur kurz erläutert, dass es viele gängige Hooks gibt, die Sie selbst kapseln können, z. B. Anti-Shake, Drosselung, Vorladen usw. Die Datenquelle von Hooks ist eindeutig mit der vorherigen Schreibweise von Mixin zu vergleichen. Es kommt zu keiner Festplattenfragmentierung und zu keinen Namenskonflikten. Es bietet eine explizitere Möglichkeit, Code zu organisieren, ihn wiederverwendbar zu machen und, was noch wichtiger ist, es ermöglicht verschiedenen Logikteilen, zu kommunizieren und zusammenzuarbeiten.

Die grundlegende Verwendung von Hooks in vue3