Hooks对于Vue作用意义详解

目录
  • 前言
  • 问题背景
  • Vue Hooks
    • 传递状态
    • 来源清晰
  • 小结

前言

本篇主体译自:https://css-tricks.com/what-hooks-mean-for-vue/

作者:Sarah Drasner

OS:虽然这是一篇 19 年 4 月的文章,但是对于 Hooks 说的非常清晰,作者也是请到尤大进行了原文的订正,对于了解 Vue Hooks 的设计及发展,还是有很好的阅读性的。

本文要谈到的 Hooks,不同于 Lifecycle Hooks(生命周期钩子),它是在 v16.7.0-alpha 中引入 React 的;尽管 Hooks 是由 React 提出,但是它的本质是一种重要的代码组合机制,对于整个 JavaScript 的框架系统都大有好处;今天花点时间具体来谈谈:Hooks 对于 Vue 意义着什么?

Hooks 提供了一种更明确的方式来组织代码,使得代码能重用,更重要的是,它允许不同的逻辑部分进行通信、协同工作。

问题背景

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 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 已经可以与 Vue 2.x 一起使用,但仍处于试验阶段。我们计划将 Hooks 集成到 Vue 3 中,但是它跟 React Hooks 还是会有所差异;

本瓜小结

Hooks 已经应用到 Vue3 了,也就是 setup 那一坨,但是它确实有一些不同于 React 的 Hooks 的地方;推荐阅读 Vue3 究竟好在哪里?(和 React Hook 的详细对比);

其实理解到它的设计意图了,即使不原原本本的挪用框架,自己用 JS 原生,也能整一个类似的复用逻辑吧。把实现一个完整功能的逻辑,封装进一个函数中,就看函数名称,就知道它是干嘛的了,不用知道其内部实现,如果想知道,再到对应的 hooks 里面去找,至少就这一点来说,和函数式编程设计思路是一致的;

以上就是Hooks之于Vue意义详解的详细内容,更多关于Hooks Vue意义的资料请关注我们其它相关文章!

(0)

相关推荐

  • vue3自定义hooks/可组合函数方式

    目录 自定义hooks/可组合函数 1.mixins方式的痛点 2.传统mixins方式示例 3.自定义hooks方式示例 vue3(hooks) 自定义hooks/可组合函数 vue3 composition api下mixins的替代方式(自定义hooks / 可组合函数) 传统方式下封装的mixins在引入文件里都是通过this来调用属性或方法, 而在vue3的composition API下this是undefined,实际上这两者就是冲突的, 只能封装一套全新的方式来使用类似mixin

  • vue3中的hooks总结

    目录 vue3的hooks总结 计数器的hook vue3自定义hooks vue3的hooks总结 vue3中的hooks其实是函数的写法,就是将文件的一些单独功能的js代码进行抽离出来,放到单独的js文件中.这样其实和我们在vue2中学的mixin比较像.下面我们总结一下如何去书写hooks. 首先应该先建立一个hooks文件夹:其目的是为了存放hook文件. 建立相关的hook文件:一般使用use开头. 计数器的hook useTitle的hooks useScrollPostion用来监

  • vue3使用自定义hooks获取dom元素的问题说明

    目录 使用自定义hooks获取dom元素问题 分享下楼主自己的观点 vue获取/操作组件的dom元素 下面是我的代码内容(非全部内容) 最后总结 使用自定义hooks获取dom元素问题 在自定义hooks的onMounted事件里面 获取ref元素,组件调用hooks的时候必须要传递响应式对象. 分享下楼主自己的观点 代码如下 <script> // demo.vue import { defineComponent, ref } from 'vue' import useBars from

  • vue-cli创建的项目中的gitHooks原理解析

    前言 在使用 vue create my-app 创建项目的时候,Vue 会自动帮我们做好一些预配置,你可以不使用它,但是一旦需要的时候,突然发现,咦~原来它已经帮我做好准备工作了,只需要按自己的需求配置一下就可以了,就会觉得 vue-cli 很贴心啊,帮我们节省了很多时间. 在 package.json 文件中会发现 gitHooks . lint-staged 等字段,不难看出它是在我们执行 git 命令的时候会自动执行的一些额外的操作,比如语法提示.错误提示等. 这个完整的过程是怎样的呢?

  • vue3-HOOKS模块化处理方式

    目录 vue3模块化处理 vue hooks理解与使用 demo源码示意 vue3模块化处理 vue3版本的更新,就是能搞更好的重用机制,可以把想要得模块独立出去 eg:显示一个当前时间的工能,在多个页面需要调用的时候不用重复的调用 可以在src目录下,新建一个文件夹hooks(所有抽离出来的功能模块都可以放到这个文件夹里), 然后再新建一个文件useNowTime.js,这里使用use开头是一个使用习惯,代表是一个抽离出来的模块 import { ref } from "vue";

  • vue-router的hooks用法详解

    虽然Vue 3还没有正式发布,但是热爱新技术的我早已按捺不住自己的内心,开始尝试在小项目中使用它了. 根据这篇<今日凌晨Vue3 beta版震撼发布,竟然公开支持脚手架项目!>我搭建了一个Vue 3的脚手架项目,用这种方式搭建的脚手架项目不仅仅只有vue是新版的,就连vue-router.vuex都是最新的. 给大家截一下package.json的图: 可以看到vue-router和vuex都已经开启4.0时代啦! 不过其实我并没有去了解过vue-router 4.0的新用法什么的,因为我觉得

  • Hooks对于Vue作用意义详解

    目录 前言 问题背景 Vue Hooks 传递状态 来源清晰 小结 前言 本篇主体译自:https://css-tricks.com/what-hooks-mean-for-vue/ 作者:Sarah Drasner OS:虽然这是一篇 19 年 4 月的文章,但是对于 Hooks 说的非常清晰,作者也是请到尤大进行了原文的订正,对于了解 Vue Hooks 的设计及发展,还是有很好的阅读性的. 本文要谈到的 Hooks,不同于 Lifecycle Hooks(生命周期钩子),它是在 v16.7

  • JavaScript开发过程中规范commit msg意义详解

    目录 规范 commit msg 的意义 commitizen commitlint 安装依赖 添加 .commitlint.config.js 文件 配置 git hooks 总结一下: step 1: 安装依赖 step 2: 添加配置文件 git cz 的原理 规范 commit msg 的意义 规范化.格式化的 commit message 可以让我们更好的追踪需求的演进.回滚时能够快速的找到提交.最次也能让我们的仓库显的更专业. 团队如何规范 commit msg呢,靠宣讲.靠文档?当

  • Vue渲染函数详解

    前面的话 Vue 推荐在绝大多数情况下使用 template 来创建HTML.然而在一些场景中,真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更接近编译器.本文将详细介绍Vue渲染函数 引入 下面是一个例子,如果要实现类似下面的效果.其中,H标签可替换 <h1> <a name="hello-world" href="#hello-world" rel="external nofol

  • Vue.js用法详解

    vue.js 教程 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue 学习起来非常简单,本教程基于 Vue 2.1.8 版本测试. 前  言 前段时间为了一个数据查询的项目自学了Vue,感觉这款框架还是很不错的,今天就整理整理这个框架如何使用,希望对正在学这个框架的小伙伴有所帮助~ 首先,我们先来了解一下Vue: V

  • vue相关配置文件详解及多环境配置详细步骤

    1.package.json 作用: package.json 文件其实就是对项目或者模块包的描述,里面包含许多元信息.比如项目名称,项目版本,项目执行入口文件,项目贡献者等等.npm install 命令会根据这个文件下载所有依赖模块. 文件结构如下: { "name": "sop-vue", "version": "0.1.0", "author": "zhangsan <zhangsa

  • Vue中 Vue.prototype使用详解

    目录 1. 基本示例 2. 为实例prototype设置作用域 3. 注册和使用全局变量 4. 原型方法的上下文 5. 应用示例 5.1 引入 axios Vue.prototype.Vue.component和Vue.use区别 1.Vue.prototype 2.vue.component 3.Vue.use 我们可能会在很多组件里用到数据/实用工具,但是不想污染全局作用域.这种情况下,可以通过在原型上定义它们使其在每个 Vue 的实例中可用. 1. 基本示例 在main.js中添加一个变量

  • Vue3使用hooks函数实现代码复用详解

    目录 前言 VUE2我们是怎么做的呢? VUE3中我们怎么处理复用代码逻辑的封装呢? 说那么多,不如直接上代码来看差异 前言 项目开发过程中,我们会遇到一些情况,就是多个组件都可以重复使用的一部分代码逻辑,功能函数,我们想要复用,这可怎么办呢? VUE2我们是怎么做的呢? 在vue2 中有一个东西:Mixins 可以实现这个功能 mixins就是将这些多个相同的逻辑抽离出来,各个组件只需要引入mixins,就能实现代码复用 弊端一: 会涉及到覆盖的问题 组件的data.methods.filte

  • Vue3 Hooks 模块化抽离示例详解

    目录 正文 todoList demo 目录结构 TodoList.vue代码如下 定义的类型文件 逻辑抽离 正文 Vue3中的Hooks 其实就是业务逻辑的抽离,跟Vue2中mixin 本质上是一样的:将当前组件的业务逻辑抽离到一个公共的文件中,提高逻辑复用性,让当前组件看起来更加清爽,不太一样的地方是我们封装hooks 的时候一般是返回一个函数. todoList demo 先来看一个简单的例子:todoList demo. 新建一个Vue3+Ts的项目: npm init vite@lat

  • Hooks封装与使用示例详解

    目录 Hooks是什么? Hooks解决了什么? HOC与HOOK对比 分别使用React与Vue3两种框架封装useThrottle钩子函数 总结 Hooks是什么? 本篇文章主要介绍Hooks如何在React与Vue3两大框架中封装使用. Hooks就是当代码执行在某个执行阶段,触发被钩子钩到的事件函数或者回调函数,Hooks的概念最早在React的V16.8.0版本正式推出,后面Vue3的出现也引入Hooks的概念,两者使用Hooks还是会有所差异. Hooks解决了什么? 完善代码能力

  • 公共Hooks封装文件下载useDownloadFile实例详解

    目录 引言 项目环境 封装前提:各方法对比 封装分解:下载核心代码 封装分解:用户体验设计 useDownloadFile.js完整代码 引言 对于经常需要开发企业管理后台的前端开发来说,必不可少的需要使用表格对于数据进行操作,在对于现有项目进行代码优化时,封装一些公共的Hooks. 本篇文章为useDownloadFile.js 基于个人项目环境进行封装的Hooks,仅以本文介绍封装Hooks思想心得,故相关代码可能不适用他人 项目环境 Vue3.x + Ant Design Vue3.x +

随机推荐