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 允许我们使用函数调用来定义组件的状态逻辑,这些函数有更强的组合性、重用性;同时,仍然可以进行状态的访问和维护;
示例:
图①
图②
有图①到图②的转变,对组件代码进行了再次组合,然后以函数的的方式进行导出,供外部重用;
在维护方面,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