vue3 hook,vue3如何自定义hook

　　本文主要介绍了vue3中hook的简单封装，有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。

目录

　　 vue3的hook包vu E3的hook总结我们来总结一下钩子计数器怎么写。

vue3的hook封装

　　vue3最新鲜的是组合API。通过组合的API，我们可以将一些复杂的逻辑或者一些常用的逻辑封装到hook中进行调用，更容易维护。

　　使用

　　从导入使用测试././hooks/use test ；

　　导出默认定义组件({

　　名称： vue3Test ，

　　设置：()={

　　设ref test=ref(111)；//对单个值使用ref

　　const { testHook }=use test({ value:ref test })；

　　返回{ refTest，test hook }；

　　}

　　});

　　使用测试

　　从“vue”导入{ Ref，Ref，reactive，watch }；

　　导出默认函数({ value }: { value: Refnumber }) {

　　设testHook=ref(1000)；

　　让testReactiveHook=reactive({

　　姓名： 234567i ，

　　});

　　手表(值，()={

　　test hook . value=test hook . value value . value；

　　testreactivehook . name= 343453453453434 ；

　　});

　　返回{

　　testHook，

　　testReactiveHook，

　　};

　　}

　　它只是封装了一个钩子用于学习，vue3的钩子和react的钩子没有太大区别，所以用vue3比react更快。

vue3的hooks总结

　　vue3中的Hooks其实就是函数的编写，就是把文件的个别函数的一些js代码提取出来放到单独的js文件中。其实这和我们vue2中学的mixin差不多。

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

　　你应该首先建立一个钩子文件夹：它的目的是存储钩子文件。

　　创建相关的钩子文件：一般使用开头。

计数器的hook

　　头衔的挂钩

　　UseScrollPostion用于监视浏览器页面的滚动。

　　使用Mousemove监听鼠标位置的钩子。

　　UseLocalStorage可以存储在本地。

　　以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。