vue3中的hooks基本使用_vue3hooks使用场景

目录

 前言：

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

<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 不会出现磁盘碎片，不会出现命名冲突。它提供了一种更明确的方式来组织代码，使得代码能重用，更重要的是，它允许不同的逻辑部分进行通信、协同工作。