hooks 对于 vue 意味着什么？本篇文章就来带大家了解一下vue中的hooks，聊聊它对于 vue 的意义，希望对大家有所帮助！
本文要谈到的 hooks，不同于 lifecycle hooks（生命周期钩子），它是在 v16.7.0-alpha 中引入 react 的；尽管 hooks 是由 react 提出，但是它的本质是一种重要的代码组合机制，对于整个 javascript 的框架系统都大有好处；今天花点时间具体来谈谈：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';export function windowwidth() {  const data = usedata({    width: 0  })  usemounted(() => {    data.width = window.innerwidth  })  // this is something we can consume with the other hook  return {    data  }}
hooks2// the data comes from the other hookexport function logolettering(data) {  usemounted(function () {    // this is the width that we stored in data from the previous hook    if (data.data.width > 1200) {      // we can use refs if they are called in the usemounted hook      const logoname = 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) {              return i * 50            }          }        },        ...
两个钩子之间传值：
<script>import { logolettering } from ./../hooks/logolettering.js;import { windowwidth } from ./../hooks/windowwidth.js;export default {  hooks() {    logolettering(windowwidth());  }};</script>
我们可以在整个应用程序中使用 hooks 组合逻辑；
来源清晰在 src/hooks 文件夹中，创建了一个 hooks，用于实现：打开对话框查看内容时，暂停页面，并在查看完对话框后，允许再次滚动。
它很有可能在应用程序中被多次使用；
import { usedestroyed, usemounted } from vue-hooks;export function preventscroll() {  const preventdefault = (e) => {    e = e || window.event;    if (e.preventdefault)      e.preventdefault();    e.returnvalue = false;  }  // keycodes for left, up, right, down  const keys = { 37: 1, 38: 1, 39: 1, 40: 1 };  const preventdefaultforscrollkeys = (e) => {    if (keys[e.keycode]) {      preventdefault(e);      return false;    }  }  usemounted(() => {    if (window.addeventlistener) // older ff      window.addeventlistener('dommousescroll', preventdefault, false);    window.onwheel = preventdefault; // modern standard    window.onmousewheel = document.onmousewheel = preventdefault; // older browsers, ie    window.touchmove = preventdefault; // mobile    window.touchstart = preventdefault; // mobile    document.onkeydown = preventdefaultforscrollkeys;  });  usedestroyed(() => {    if (window.removeeventlistener)      window.removeeventlistener('dommousescroll', preventdefault, false);    //firefox    window.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;...export default {  ...  hooks() {    preventscroll();  }}</script>
小结原文小结vue hooks 已经可以与 vue 2.x 一起使用，但仍处于试验阶段。我们计划将 hooks 集成到 vue 3 中，但是它跟 react hooks 还是会有所差异；
本瓜小结hooks 已经应用到 vue3 了，也就是 setup 那一坨，但是它确实有一些不同于 react 的 hooks 的地方；推荐阅读 vue3 究竟好在哪里？（和 react hook 的详细对比）
地址 https://zhuanlan.zhihu.com/p/133819602
其实理解到它的设计意图了，即使不原原本本的挪用框架，自己用 js 原生，也能整一个类似的复用逻辑吧。把实现一个完整功能的逻辑，封装进一个函数中，就看函数名称，就知道它是干嘛的了，不用知道其内部实现，如果想知道，再到对应的 hooks 里面去找，至少就这一点来说，和函数式编程设计思路是一致的；
本篇主体译自：what-hooks-mean-for-vue（https://css-tricks.com/what-hooks-mean-for-vue/）
作者：sarah drasner
更多编程相关知识，请访问：编程视频！！
以上就是深入了解vue中的hooks，聊聊它对于 vue 的意义！的详细内容。