vue钩子函数详解,vue自定义指令的钩子函数
这篇文章主要为大家介绍了十个vue。j中有用的自定义钩子，让我们的代码更加好看。文中的示例代码讲解详细，感兴趣的小伙伴可以了解一下
目录
usewindowresizeusestorageusenetworkstatus secopytolipboardusethemeusepagevisibility useviewportuseonclickoutsideusescrolltobottomusetimervue是我使用的第一个射流研究…框架。可以说，Vue是我进入Java脚本语言世界的第一道门之一。目前，Vue仍然是一个很棒的框架。随着组合应用程序接口的出现，Vue只会有更大的发展。在这篇文章中，我将介绍10 个有用的自定义钩子，让我们的代码更加好看。
useWindowResize
这是一个基本的钩子，因为它被用在很多项目中。
从“vue”导入{ ref，onMounted，on unmounted }。
导出函数useWindowResize() {
const width=ref(窗口。内部宽度)；
const height=ref(窗口。内高)；
const handleResize=()={
宽度。值=窗口。内部宽度；
身高。值=窗口。内部高度；
}
onMounted(()={
窗户。addevent侦听器( resize ，handleResize)
});
未安装(()={
窗户。removeeventlistener( resize ，handleResize)
})
返回{
宽度，
高度
}
}
使用就更简单了，只需要调用这个钩子就可以获得窗户的宽度和高度。
setup() {
const { width，height }=useWindowResize()；
}
useStorage
你想通过在会话存储或局部存储器中存储数据的值来持久化数据，并将该值绑定到视图？有了一个简单的钩子-使用存储，这将变得非常容易。我们只需要创建一个钩子来返回从存储空间得到的数据，以及一个函数来在我们想要改变数据时将其存储在存储空间。下面是我的钩子。
从“vue”导入{ ref }；
const getItem=(key，storage)={
让价值=存储。getitem(key)；
如果(!值){
返回空
}
尝试{
返回JSON.parse(值)
} catch(错误){
返回值；
}
}
export const useStorage=(key，type=session)={
设存储=空
开关（类型){
案例"会话":
存储=会话存储
打破；
案例"本地":
存储=本地存储
打破；
默认值：
返回空
}
const value=ref(getItem(key，storage))；
const setItem=(存储)={
return (newValue)={
value.value=newValue
storage.setItem(key，JSON。stringify(新值))；
}
}
返回[
值，
设置项目（存储)
]
}
在我的代码中，我使用JSON.parse **和JSON.stringify**来格式化数据。如果你不想格式化它，你可以删除它。下面是一个如何使用这个钩子的例子。
const [token，setToken]=使用存储( token )；
setToken( new token )；
useNetworkStatus
这是一个有用的钩子，支持检查网络连接的状态。为了实现这个钩子，我们需要为事件在线和离线添加事件监听器。在事件中，我们只是调用一个回调函数，参数为网络状态。下面是我的代码。
从“vue”导入{已安装，未安装}。
export const useNetworkStatus=(callback=()={ })={
const updateOnlineStatus=()={
const status=navigator.onLine？"联机":"脱机";
回拨（状态);
}
onMounted(()={
窗户。addevent侦听器( online ，updateOnlineStatus)；
窗户。addevent侦听器( offline ，updateOnlineStatus)；
});
未安装(()={
窗户。removeeventlistener( online ，updateOnlineStatus)；
窗户。removeeventlistener( offline ，updateOnlineStatus)；
})
}
调用方式：
使用网络状态((状态)={
console . log(` o您的网络状态为$ { status } `)；
}
useCopyToClipboard
剪切板是一个比较常见的功能，我们也可以将它封装成钩子，代码如下所示：
函数copyToClipboard(文本){
让输入=文档。createelement(“input”)；
input.setAttribute(value ，text)；
document.body.appendChild(输入);
输入。select()；
让结果=文档。exec命令(“copy”)；
document.body.removeChild(输入);
返回结果；
}
导出常量useCopyToClipboard=()={
return (text)={
if(type of text=== string type of text== number ){
返回copyToClipboard(文本);
}
返回错误的
}
}
使用如下：
const copyToClipboard=useCopyToClipboard()；
copyToClipboard(只是复制);
useTheme
只是一个简短的钩子来改变网站的主题。它可以帮助我们轻松地切换网站的主题，只需用主题名称调用这个钩子。下面是一个我用来定义主题变量的半铸钢钢性铸铁(铸造半钢)代码例子。
html[theme=dark] {
-颜色：# FFF；
-背景：# 333;
}
html[theme=default]，html {
-颜色：# 333;
-背景：# FFF；
}
要改变主题，只需要做一个自定义的钩子，它返回一个函数来通过主题名称改变主题。代码如下：
导出常量useTheme=(key=)={
返回(主题)={
文档。文档元素。设置属性(key，theme)；
}
}
使用如下：
const更改主题=使用主题()；
changeTheme("黑暗");
usePageVisibility
有时，当客户不专注于我们的网站时，我们需要做一些事情。要做到这一点，我们需要一些东西，让我们知道用户是否在关注。这是一个自定义的钩子。我把它叫做页面可见性，代码如下：
从“vue”导入{已安装，未安装}。
export const usePageVisibility=(callback=()={ })={
让隐藏，可见性改变；
如果(文档类型。隐藏！==未定义){
hidden= hidden
能见度变化=能见度变化；
} else if(文档类型。ms hidden！==未定义){
hidden= msHidden
可见性更改= msvisibilitychange
} else if(文档类型。WebKit隐藏！==未定义){
hidden= webkitHidden
可见性更改= webkitvisibilitychange
}
const handleVisibilityChange=()={
回调（文档[隐藏]);
}
onMounted(()={
文档。add event listener(visibility change，handleVisibilityChange，false)；
});
未安装(()={
文档。removeeventlistener(visibilityChange，handleVisibilityChange)；
});
}
用法如下：
usePageVisibility((隐藏)={
console . log(` o用户是$ {隐藏？不是“:”}关注你的网站`);
});
useViewport
有时我们会用宽度来检测当前的用户设备，这样我们就可以根据设备来处理对应的内容。这种场景，我们也可以封装成一个钩子，代码如下：
从“vue”导入{ ref，onMounted，on unmounted }。
导出const MOBILE=MOBILE
出口const TABLET=TABLET
导出常量桌面=桌面
export const use viewport=(config={ })={
const { mobile=null，tablet=null }=配置
让mobileWidth=移动？移动：768;
设tabletWidth=平板？平板：922;
let device=ref(获取设备(窗口。内宽))；
函数获取设备（宽度){
如果(宽度移动宽度){
归还手机；
} else if(宽度表格宽度){
返回平板电脑；
}
返回桌面；
}
const handleResize=()={
设备。值=获取设备(窗口。内部宽度)；
}
onMounted(()={
窗户。addevent侦听器( resize ，handle resize)；
});
未安装(()={
窗户。removeeventlistener( resize ，handle resize)；
});
返回{
设备
}
}
使用如下：
const { device }=use viewport({ mobile:700，table:900 })；
useOnClickOutside
当模型框弹出时，我们希望能点击其它区域关闭它，这个可以使用单击外部，这种场景我们也可以封装成钩子，代码如下：
从“vue”导入{已安装，未安装}。
export const useOnClickOutside=(ref=null，callback=()={})={
函数句柄单击外部(事件){
如果(引用值！引用值。包含（事件。目标)){
回调()
}
}
onMounted(()={
文档。addevent侦听器( mousedown ，handleClickOutside)；
})
未安装(()={
文档。removeeventlistener( mousedown ，handleClickOutside)；
});
}
用法如下：
模板
div ref=容器视图/div
/模板
脚本
从“vue”导入{ ref }；
导出默认值{
setup() {
常数容器=ref(null)；
useOnClickOutside(container，()={
console.log(在外部单击);
})
}
}
/脚本
useScrollToBottom
除了分页列表，加载更多（或懒惰加载)是一种友好的加载数据的方式。特别是对于移动设备，几乎所有运行在移动设备上的应用程序都在其用户界面中应用了多装一些。要做到这一点，我们需要检测用户滚动到列表底部，并为该事件触发一个回调。
使用滚动按钮是一个有用的钩子，支持你这样做。代码如下：
从“vue”导入{已安装，未安装}。
export const useScrollToBottom=(callback=()={ })={
const handleScrolling=()={
如果((窗口。内部高度窗口。scrolly)=文档。身体。滚动高度){
回调();
}
}
onMounted(()={
窗户。addevent侦听器( scroll ，处理滚动)；
});
未安装(()={
窗户。removeeventlistener( scroll ，句柄滚动)；
});
}
用法如下：
useScrollToBottom(()={ console。日志(滚动到底部)})
useTimer
使用计时器的代码比其他钩子要长一些使用定时器支持运行一个带有一些选项的定时器，如开始、暂停/恢复、停止。要做到这一点，我们需要使用设置间隔方法。在这里，我们需要检查定时器的暂停状态。如果定时器没有暂停，我们只需要调用一个回调函数，该函数由用户作为参数传递。为了支持用户了解该定时器当前的暂停状态，除了动作使用计时器之外，还要给他们一个变量我被激怒了，其值为该定时器的暂停状态。代码如下：
从“vue”导入{ ref，在卸载时}；
导出常量useTimer=(callback=()={ }，step=1000)={
设timerVariableId=null
设次数=0;
const被暂停=ref(false)；
常量停止=()={
if (timerVariableId) {
清除间隔(timerVariableId)；
timerVariableId=null
resume()；
}
}
const start=()={
stop()；
如果(!timerVariableId) {
次数=0;
timerVariableId=setInterval(()={
如果(!isPaused.value) {
时代；
回调（次，步*次);
}
},步骤)
}
}
常量暂停=()={
isPaused.value=true
}
const resume=()={
isPaused.value=false
}
未安装(()={
if (timerVariableId) {
清除间隔(timerVariableId)；
}
})
返回{
开始，
停下来，
暂停，
简历，
是否暂停
}
}
用法如下：
函数handleTimer(圆形){
round number . value=0四舍五入；
}
常数{
开始，
停下来，
暂停，
简历，
是否暂停
}=使用定时器(手柄定时器)；
以上就是十个有用的自定义某视频剪辑软件钩子函数总结的详细内容，更多关于某视频剪辑软件钩子函数的资料请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。