温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Vue中的Hooks有什么作用

发布时间:2022-02-14 09:34:41 来源:亿速云 阅读:303 作者:iii 栏目:编程语言

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

Vue中的Hooks有什么作用

Hooks 对于 Vue 意义着什么?

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

问题背景

Hooks 为什么被提出?就 React 而言,最初的问题背景是这样的:

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

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

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

示例:@dan_abramov's code from #ReactConf2018

  • 图①

Vue中的Hooks有什么作用

  • 图②

Vue中的Hooks有什么作用

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

在维护方面,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 hook
export 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有什么作用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI