vue中的hooks,vue-hooks
本文主要介绍钩子在Vue中的作用的详细说明。有需要的朋友可以借鉴一下，希望能有所帮助。祝大家进步很大，早日升职加薪。
目录
前言背景Vue挂钩传输状态来源的清晰摘要
前言
本文翻译自：https://css-tricks.com/what-hooks-mean-for-vue/.
莎拉德拉斯纳
OS:虽然这是19年4月的一篇文章，但是对钩子说的很清楚。作者还请犹大修改了原文，对于理解Vue Hooks的设计和开发还是很有可读性的。
本文要讲的钩子与生命周期钩子(Lifecycle Hooks)不同，后者在v16.7.0-alpha中引入了React虽然Hooks是React提出来的，但其本质是一种重要的代码合成机制，对整个JavaScript框架体系大有裨益。今天花点时间具体说说：Hooks 对于 Vue 意义着什么？
Hooks提供了一种更清晰的方式来组织代码，以便可以重用。更重要的是，它允许不同的逻辑部分进行通信和协同工作。
问题背景
为什么会提出钩子？就React而言，问题的初始背景如下：
在表述国家概念时，类是最常见的组织形式。类本身也有一些问题，比如绑定关系又长又复杂，读起来很吃力，这个的方向总是让人很迷茫；
不仅如此，在复用方面，使用渲染工具或高级组件类是常见的，但容易陷入“末日金字塔”，可以理解为过度嵌套；
Hooks就是来解决这些问题的；钩子允许我们使用函数调用来定义组件的状态逻辑。这些功能具有较强的组合性和可重用性；同时，状态仍然可以被访问和维护；
例子：@ dan _ abramov # 39来自#ReactConf2018的s代码
图
图
图到图有一个过渡，将组件代码重新组合，然后以函数的形式导出，供外部重用；
在维护方面，Hooks提供了一种单一的、功能性的方法来处理共享逻辑，并且有可能减少代码量。
Vue Hooks
那你为什么在Vue里用钩子？毕竟Vue中没有频繁使用的类；在Vue中，我们用mixin解决组件的相同复用逻辑；
mixin有什么问题？胡克斯，你能解决吗？
主要有两个问题：
您不能在mixin之间转移状态；逻辑没有解释清楚；钩子可以很好的解决这两个问题；
例如：
传递状态
挂钩1
从“vue-hooks”导入{ useData，use mounted }；
导出函数windowwidth() {
const data=useData({
宽度：0
})
使用已安装的(()={
data.width=window.innerWidth
})
//这是我们可以用另一个钩子来消耗的东西
返回{
数据
}
}
挂钩2
//数据来自另一个钩子
导出功能徽标字母(数据){
useMounted(function () {
//这是我们存储在前一个钩子的数据中的宽度
if (data.data.width 1200) {
//如果在useMounted钩子中调用refs，我们可以使用它们
const logoname=this。$ refs.logoname
拆分({ target: logoname，by: chars })；
TweenMax.staggerFromTo(。字符，5，
{
不透明度：0，
transform origin:“50% 50%-30px”，
周期：{
颜色：[红色，紫色，蓝绿色]，
旋转{
返回i * 50
}
}
},
.
在两个挂钩之间传递值：
脚本
从导入{ logolettering }。/./hooks/logo lettering . js ；
从导入{ windowwidth }。/./hooks/window width . js ；
导出默认值{
钩子(){
logo lettering(window width())；
}
};
/脚本
我们可以在整个应用中使用Hooks组合逻辑；
来源清晰
在src/挂钩文件夹中，创建了一个钩子，用于实现：打开对话框查看内容时，暂停页面，并在查看完对话框后，允许再次滚动。
它很有可能在应用程序中被多次使用；
从“vue挂钩”导入{使用销毁，使用安装}。
导出函数preventscroll() {
const preventDefault=(e)={
e=e window.event
如果（例如，预防默认)
e。防止默认()；
e.returnValue=false
}
//左、上、右、下的键码
const keys={ 37: 1，38: 1，39: 1，40:1 }；
const preventDefaultForScrollKeys=(e)={
if (keys[e.keyCode]) {
预防违约(e)和：
返回错误的
}
}
使用已安装的(()={
if (window.addEventListener) //旧消防
窗户。addevent侦听器( DOM鼠标滚动，preventDefault，false)；
窗户。on wheel=防止违约；//现代标准
窗户。onmousewheel=document。onmousewheel=防止默认；//旧浏览器，即
窗户。触摸移动=防止默认；//手机
窗户。触摸开始=防止默认；//手机
文档。onkeydown=preventDefaultForScrollKeys；
});
已用销毁(()={
if (window.removeEventListener)
窗户。removeeventlistener( DOM鼠标滚动，preventDefault，false)；
//firefox
窗户。addevent侦听器( DOM鼠标滚动，(e)={
e。停止传播();
},真);
窗户。onmousewheel=document。onmousewheel=null
窗户。车轮上=空；
window.touchmove=null
window.touchstart=null
document.onkeydown=null
});
}
在AppDetails.vue组件中调用它：
脚本
从导入{ preventscroll } ././hooks/防止滚动。js’；
.
导出默认值{
.
钩子(){
防止滚动()；
}
}
/脚本
小结
原文小结
某视频剪辑软件挂钩已经可以与Vue 2.x一起使用，但仍处于试验阶段。我们计划将钩住集成到Vue 3中，但是它跟反应钩还是会有所差异；
本瓜小结
钩住已经应用到Vue3了，也就是设置那一坨，但是它确实有一些不同于反应的钩住的地方；推荐阅读Vue3究竟好在哪里？（和反应钩的详细对比);
其实理解到它的设计意图了，即使不原原本本的挪用框架，自己用射流研究…原生，也能整一个类似的复用逻辑吧。把实现一个完整功能的逻辑，封装进一个函数中，就看函数名称，就知道它是干嘛的了，不用知道其内部实现，如果想知道，再到对应的钩住里面去找，至少就这一点来说，和函数式编程设计思路是一致的；
以上就是钩住之于某视频剪辑软件意义详解的详细内容，更多关于钩子某视频剪辑软件意义的资料请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。