经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
vue3中的hook简单封装
来源:jb51  时间:2022/4/18 12:05:18  对本文有异议

vue3的hook封装

vue3最新鲜的就是组合式API了,通过组合式API我们可以把一些复杂的逻辑或一些常用的逻辑封装成一个个hook来进行调用,这样的方式也更易于维护。

使用

  1. import useTest from "../../hooks/useTest";
  2. export default defineComponent({
  3. ? name: "vue3Test",
  4. ? setup: () => {
  5. ? ? let refTest = ref(111); // 单个值用ref
  6. ? ? const { testHook } = useTest({ value: refTest });
  7. ? ? return { refTest, testHook };
  8. ? }
  9. });

useTest

  1. import { Ref, ref, reactive, watch } from "vue";
  2. export default function ({ value }: { value: Ref<number> }) {
  3. ? let testHook = ref(1000);
  4. ? let testReactiveHook = reactive({
  5. ? ? name: "234567i",
  6. ? });
  7. ? watch(value, () => {
  8. ? ? testHook.value = testHook.value + value.value;
  9. ? ? testReactiveHook.name = "343453453453434";
  10. ? });
  11. ? return {
  12. ? ? testHook,
  13. ? ? testReactiveHook,
  14. ? };
  15. }

简单的封装了一个hook进行学习,vue3的hook和react的hook差别并不大因此对比react上手vue3还是比较快的

vue3的hooks总结

vue3中的hooks其实是函数的写法,就是将文件的一些单独功能的js代码进行抽离出来,放到单独的js文件中。这样其实和我们在vue2中学的mixin比较像。

下面总结一下如何去书写hooks

首先应该先建立一个hooks文件夹:其目的是为了存放hook文件。

在这里插入图片描述

建立相关的hook文件:一般使用use开头。 

计数器的hook

在这里插入图片描述

useTitle的hooks

s

useScrollPostion用来监测浏览器页面的滚动情况

在这里插入图片描述

useMousemove监听鼠标位置的hook

在这里插入图片描述

useLocalStorage可以本地存储

在这里插入图片描述

以上为个人经验,希望能给大家一个参考,也希望大家多多支持w3xue。 

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号