当前位置:   article > 正文

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

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 静态布局

  1. // src/App.js
  2. <template>
  3. <div>
  4. <div>
  5. 名称:<input type="text" v-model="name">
  6. 年龄:<input type="number" v-model="age">
  7. <button @click="addClass(name,age)">添加学生</button>
  8. </div>
  9. <table border width="520">
  10. <tr>
  11. <td>序号</td>
  12. <td>名字</td>
  13. <td>年龄</td>
  14. <td>操作</td>
  15. </tr>
  16. <tr v-for="(item,index) in classList" :key="item.id">
  17. <td>{{ index }}</td>
  18. <td>{{item.name }}</td>
  19. <td>{{item.age }}</td>
  20. <td @click="delects(item.id)">删除</td>
  21. </tr>
  22. </table>
  23. </div>
  24. </template>

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

  1. //src/hooks/useClass.js
  2. import {reactive } from 'vue'
  3. export default function(){
  4. let id = 3
  5. //学生信息
  6. let classList = reactive([
  7. {id:0,name:"jianwang",age:18},
  8. {id:1,name:"domes",age:20},
  9. {id:2,name:"dow",age:18},
  10. ])
  11. //添加信息
  12. const addClass = (name,age)=>{
  13. id++
  14. classList.push({
  15. id,name,age
  16. })
  17. }
  18. //删除信息
  19. const delects = (ids)=>{
  20. for(let [index,item] of classList.entries()){
  21. console.log(ids,item.id)
  22. if(item.id == ids)
  23. {
  24. classList.splice(index,1)
  25. }
  26. }
  27. }
  28. //把方法和数据返回出去
  29. return{
  30. addClass,
  31. delects,
  32. classList
  33. }
  34. }

2.1.4 App.js中引入hooks

  1. // src/App.js
  2. <script setup>
  3. //引入hooks文件
  4. import useClass from "./hooks/useClass"
  5. //用户填写的学生姓名与年龄
  6. let name = "",age = 0;
  7. //导入
  8. const {delects,addClass,classList} = useClass()
  9. </script>

2.1.5 最终效果

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

2.2封装监听鼠标位置的hooks

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

  1. // src/hooks/useMove.js
  2. import {ref} from 'vue'
  3. export default function(){
  4. //创建2个响应式变量来储存用户鼠标x轴和y轴的位置
  5. let pageX = ref(0) , pageY = ref(0)
  6. window.addEventListener('mousemove',(event)=>{
  7. pageX.value = event.pageX
  8. pageY.value = event.pageY
  9. })
  10. return {
  11. pageX,
  12. pageY
  13. }
  14. }

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

  1. <script setup>
  2. import useMove from "./hooks/useMove"
  3. const { pageX, pageY} = useMove()
  4. </script>
  5. <template>
  6. <div>
  7. X: {{pageX }} Y:{{ pageY }}
  8. </div>
  9. </template>
  10. <style scoped>
  11. </style>


3.总结

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/weixin_40725706/article/detail/190903
推荐阅读
相关标签
  

闽ICP备14008679号