Vue中的Hooks有什么作用(hooks,vue,编程语言)

Hooks 对于 Vue 意义着什么？

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

问题背景

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

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

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

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

示例：@dan_abramov's code from #ReactConf2018

• 图①

• 图②

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

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

Vue 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>