Vue3中的Hook特性是什么

这篇文章主要讲解了“Vue3中的Hook特性是什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue3中的Hook特性是什么”吧！

Hook 的概念

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

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

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

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

于是函数组件诞生，为 React 实现了状态（state）分离。

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

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

是不是与上面的写法及其相似？不过虽然写法很像，他们在实现上还是有很大区别的。我们前面提到，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 ，对比后便知。

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

在实践中，mixin 有如下缺点：

• 引入了隐式依赖关系。

• 不同 mixins 之间可能会有先后顺序甚至代码冲突覆盖的问题

• mixin 代码会导致滚雪球式的复杂性

• 多个 mixin 导致合并项不明来源

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

• 一个组件的state影响许多组件的props

• 造成地狱嵌套

不过使用全新的 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。例如这是一个文件系统管理的例子：

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

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

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

感谢各位的阅读，以上就是“Vue3中的Hook特性是什么”的内容了，经过本文的学习后，相信大家对Vue3中的Hook特性是什么这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！