Vue的Hooks,谈谈它对于 Vue 的意义
问题背景
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 的详细对比)
地址 https://zhuanlan.zhihu.com/p/133819602
其实理解到它的设计意图了,即使不原原本本的挪用框架,自己用 JS 原生,也能整一个类似的复用逻辑吧。把实现一个完整功能的逻辑,封装进一个函数中,就看函数名称,就知道它是干嘛的了,不用知道其内部实现,如果想知道,再到对应的 hooks 里面去找,至少就这一点来说,和函数式编程设计思路是一致的;
作者:Sarah Drasner
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tangbhgjf
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
photoshop蒙版画笔没反应怎么办
PHP中文网 06-24