本篇内容介绍了“Vue中的Hooks有什么作用”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

Hooks 对于 Vue 意义着什么？

Hooks 提供了一种更明确的方式来组织代码，使得代码能重用，更重要的是，它允许不同的逻辑部分进行通信、协同工作。【相关推荐：vue.js视频教程】

Hooks 为什么被提出？就 React 而言，最初的问题背景是这样的：

在表达状态概念时，类 是最常见的组织形式。类本身存在一些问题，比如绑定关系冗长、复杂，导致不易读，This 的指向总会让人摸不清头脑；

不仅如此，在重用方面，使用渲染工具或高阶组件类的模式很常见，但这样容易陷入 “pyramid of doom” （末日金字塔），可以将它理解为过度的嵌套关系；

Hooks 就是来解决这些问题的；Hooks 允许我们使用函数调用来定义组件的状态逻辑，这些函数有更强的组合性、重用性；同时，仍然可以进行状态的访问和维护；

示例：@dan_abramov's code from #ReactConf2018

图①

图②

有图①到图②的转变，对组件代码进行了再次组合，然后以函数的的方式进行导出，供外部重用；

在维护方面，Hooks 提供了一种单一的、功能性的方式来处理共享逻辑，并有可能减少代码量。

那 Vue 中为什么要用 Hooks 呢？毕竟 Vue 中没有很频繁的使用类；在 Vue 中我们使用 mixin 来解决组件相同的重用逻辑；

mixin 的问题在哪？Hooks 能解决吗？

问题主要有两点：

mixin 之间不能传递状态；

逻辑来源并没有清晰的说明；

而这两点，Hooks 能很好地解决；

举个例子：

Hooks1

import{useData,useMounted}from'vue-hooks';exportfunctionwindowwidth(){constdata=useData({width:0})useMounted(()=>{data.width=window.innerWidth})//thisissomethingwecanconsumewiththeotherhookreturn{data}}

Hooks2

//thedatacomesfromtheotherhookexportfunctionlogolettering(data){useMounted(function(){//thisisthewidththatwestoredindatafromtheprevioushookif(data.data.width>1200){//wecanuserefsiftheyarecalledintheuseMountedhookconstlogoname=this.$refs.logoname;Splitting({target:logoname,by:"chars"});TweenMax.staggerFromTo(".char",5,{opacity:0,transformOrigin:"50%50%-30px",cycle:{color:["red","purple","teal"],rotationY(i){returni*50}}},...

两个钩子之间传值：

<script>import{logolettering}from"./../hooks/logolettering.js";import{windowwidth}from"./../hooks/windowwidth.js";exportdefault{hooks(){logolettering(windowwidth());}};</script>

我们可以在整个应用程序中使用 Hooks 组合逻辑；

在 src/hooks 文件夹中，创建了一个 Hooks，用于实现：打开对话框查看内容时，暂停页面，并在查看完对话框后，允许再次滚动。

它很有可能在应用程序中被多次使用；

import{useDestroyed,useMounted}from"vue-hooks";exportfunctionpreventscroll(){constpreventDefault=(e)=>{e=e||window.event;if(e.preventDefault)e.preventDefault();e.returnValue=false;}//keycodesforleft,up,right,downconstkeys={37:1,38:1,39:1,40:1};constpreventDefaultForScrollKeys=(e)=>{if(keys[e.keyCode]){preventDefault(e);returnfalse;}}useMounted(()=>{if(window.addEventListener)//olderFFwindow.addEventListener('DOMMouseScroll',preventDefault,false);window.onwheel=preventDefault;//modernstandardwindow.onmousewheel=document.onmousewheel=preventDefault;//olderbrowsers,IEwindow.touchmove=preventDefault;//mobilewindow.touchstart=preventDefault;//mobiledocument.onkeydown=preventDefaultForScrollKeys;});useDestroyed(()=>{if(window.removeEventListener)window.removeEventListener('DOMMouseScroll',preventDefault,false);//firefoxwindow.addEventListener('DOMMouseScroll',(e)=>{e.stopPropagation();},true);window.onmousewheel=document.onmousewheel=null;window.onwheel=null;window.touchmove=null;window.touchstart=null;document.onkeydown=null;});}

在 AppDetails.vue 组件中调用它：

<script>import{preventscroll}from"./../hooks/preventscroll.js";...exportdefault{...hooks(){preventscroll();}}</script>

“Vue中的Hooks有什么作用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！