• 技术文章 >web前端 >前端问答

    简单聊聊Vue3中的Hook特性(总结分享)

    长期闲置长期闲置2022-01-06 18:02:28转载142
    本篇文章给大家带来了为什么要使用 Hook,Vue 3 的 Hook 和 React 有何不同,接下来通过此文分享一下,希望对大家有帮助。

    Hook 的概念

    Hook 这个概念是在 React 中被提出的。首先简单介绍一下在 React 中,Hook 是怎么来的。

    26.png

    27.png

    参考大家熟知的 Vue 2 代码结构,我们看到:React 整体使用 Class 来封装一个组件;设计了一个 state 来管理变量,相当于 Vue 2 中的 data;同样拥有生命周期和自定义方法;模板部分借助 JSX 写进一个渲染函数。如果需要更新视图,必须通过 setState 方法更新 state 中的变量,然后视图上的数据才随之更新,不能直接通过更新视图来更新数据。

    可以看出,和 Vue 不同,它是一个单向的数据流。Vue 的读音是视图的 "view",而 "state",就是状态的意思。如果说 Vue 是视图导向,React 就是状态导向。

    既然 React 是用 Class 实现组件,那么问题就随之而来:在 Class 内必须注意 this 的指向问题;而且在组件发生复用和嵌套时,对每一层组件的 props 都要进行操作,逻辑复杂。

    于是函数组件诞生,为 React 实现了状态(state)分离。

    28.png

    这里把变量的声明、组件方法、渲染函数全部封装到一个函数中,新增了一个useEffect 来实现生命周期和监听 state 数据的变化。这个组件在被声明、更新、即将销毁时,都会调用定义它的函数,输出一个新的视图。

    再来看 Vue 3 中如何定义一个组件:

    29.png

    是不是与上面的写法及其相似?不过虽然写法很像,他们在实现上还是有很大区别的。我们前面提到,React 是状态导向,而 Vue 是视图导向。React 函数组件通过重新调用函数来更新视图,把生命周期融入了组件声明;而 Vue 的 setup 方法只替代了 beforeCreate 和 created,其他生命周期依然保留在组件内部定义,每个实例只运行一次 setup,同时支持监听视图和数据的变化。

    常有人说 Vue 是又实现了一次 React,但是两者理念完全不同,其实可以理解为,Vue 在保留自身特性的同时,采取了 React 的设计方式。

    所以什么是 Hook ? 在 React 中的定义是,在函数组件中保留 state 数据的同时,融入生命周期函数,将组件整体作为一个钩子函数。

    自定义 Hook

    当组件复杂时,多个组件中一些重复的逻辑可以被抽象出来。在 Hook 诞生之前,React 和 Vue 都拥有高阶组件的设计模式,在 React 使用到 HOC,在 Vue 2 中使用到 mixin。为什么要舍弃它们而使用 Hook,使用自定义 Hook 又有哪些优点,我们先简单了解一下 HOC 和 mixin ,对比后便知。

    30.png

    HOC 的原理是把组件作为参数传入一个函数,加入复用部分后将新的组件作为返回值,使用了装饰器模式。mixin 像是把复用的部分拆解成一个个小零件,某个组件需要时就拼接进去。

    在实践中,mixin 有如下缺点:

    为了避开这些问题,React 采用 HOC,但它依然存在缺陷:

    不过使用全新的 Hook 组件结构,可以实现平铺式调用组件的复用部分,解决了 mixin 的来源不明和 HOC 的地狱嵌套问题。

    Vue 3 实现 Hook

    前面说到 React 将 Class 组件转变为函数组件,实现了 Hook。在 Vue 3 中,Hook 是通过 Vue 3 新特性的最重要的部分——组合式 API 来实现的。

    使用组合式 API 编写组件,简单来说,之前根据数据类型拆分成的 data 、methods、生命周期等都被放在一个 setup 函数中,而组件在初始化时也只需要调用一次 setup 函数。具体的 API 这里不作详细介绍,可以去查阅官方文档。(antfu 讲解组合式 API)

    利用组合式 API,就可以仿照 React 的写法来实现一个 Hook。例如这是一个文件系统管理的例子:

    31.png

    32.png

    想象一下,如果这段代码在 Vue 2 里实现,仅仅是一个创建文件夹的动作,就要把声明的变量、方法、监听数据等拆解到各个部分,更何况我们还要实现删除、 编辑、复制粘贴等等功能,修改代码的工作量想想就非常庞大。

    但是用这种 Hook 的形式编写,我们可以把实现同一个功能的代码组合在一起,不仅代码非常简洁清晰,而且我们也可以很好地知道复用组件的来源。

    比起 React 的 Hook,Vue 3 在底层还做了一些优化,解除 react 函数组件的限制,提高了性能。

    总结

    本文大致内容如下:

    33.png

    思考

    为什么会有 hook 这种概念,而不用原来的 HOC 、mixin,可以看出在程序开发上一个进步的大方向就是越来越抽象化,类似于从C语言这种面向过程编程的语言发展到 java 这种面向对象编程的语言,从原生的前端三剑客发展到使用框架做组件开发,Hook 做的是同样的事情。把相关的逻辑封装到一起,无关的隔离开来,降低耦合度,把复用逻辑以接口的形式暴露给其他组件,屏蔽底层的实现。

    这样同样的功能在写法上更加简洁,修改单个功能不会牵扯到隐藏的依赖,降低维护的复杂度,规定的 use 命名使得代码易读、易扩展,也有利于多人协作。

    state 在 React 中是很重要的概念,用作状态管理的 Redux 其实是为了使得 React 中的 state 便于管理,而 Vue 实现了一个类似的 Vuex,却没有 state 机制。类似地,两者的 Hook 也都用到 effect,在 React 中 effect 也是为了解决 state 问题,Vue 使用它的机制完全不同。

    React 像是实现了一个以状态机为中心思想的系统,零件之间逻辑紧密,而 Vue 用自己的方法重新实现了 React 中的一些方法,使其完全分割开,需要哪个就把哪个组装进来。他们用的是两个完全不同的理念,不能说谁更好,但是在学习一个框架的时候,可以通过参考另一种框架的设计思路来加深理解。

    前段时间尤雨溪在知乎上也回答了一个问题提到说,从 AngularJS、React 到 Vue,其实是理念上的进步,如果你只是仿照这些思想做一个新的框架,那就只是在造轮子而已,而想要做一个里程碑式的进步,改进理念才是我们应该做的。

    【相关推荐:《vue.js教程》】

    以上就是简单聊聊Vue3中的Hook特性(总结分享)的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:掘金,如有侵犯,请联系admin@php.cn删除
    专题推荐:vue
    上一篇:CSS高频出现的奇怪按钮样式总结 下一篇:怎样利用Javascript简单实现星空连线的效果

    相关文章推荐

    • 尤雨溪解释vue3源码为啥不用?.可选链式操作符!• 带你详解vue中实现全页面或局部刷新的方法• 详细介绍vue中vuex(详解及实例)• 在vue中按键修饰符有哪些• 带你深入了解vue2中的 v-model,看看如何让组件支持该语法

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网