七、【Vue3】——自定义hook函数

最新推荐文章于 2024-05-05 14:30:03 发布
最新推荐文章于 2024-05-05 14:30:03 发布
阅读量5.1k 收藏 19
点赞数 6
分类专栏： Vue3 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yifei1234567/article/details/123983092
版权

前言：自定义hook函数类似与封装一个可复用的组件，只不过它是一个函数，封装的是一个可复用的函数功能，与Vue2中的mixin类似。下面通过一个例子就可以很好理解它了。

  • 什么是hook？—— 本质是一个函数，把setup函数中使用的Composition API进行了封装。

  • 类似于vue2.x中的mixin。

  • 自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。

    • 注意1:hook函数可以使用Vue3中的组合式API；
    • 注意2:hook函数在组件中使用时，相当于函数中的API方法都移动到相关组件中

通过以下例子进行简单分析：

  1. 在src目录下创建一个hooks目录，专门放相关的hook函数方法，我在此处放了一个usePoint.js文件

2. 在usePoint.js文件中写相应公共函数方法，我此处写的是点击鼠标查看相关坐标值，注意要将函数暴露出去，外部才能使用

import {onBeforeMount, onBefo
最低0.47元/天 解锁文章
YIFEI132
关注
  • 6
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue3中的hook
jieyucx的博客
07-11 7548
Vue3中的hook通常被称为，是Vue.js框架中的一个重要特性。它们的是一些可以在，这些函数能够让你在不影响组件逻辑的情况下，增强和扩展组件的功能。Hook的是。举个例子，如果你有一个处理异步请求和管理请求状态的功能，那么你可能会在多个组件中需要这个功能。在Vue2.x中，你可能需要使用mixins或者HOC（高阶组件）来抽象和重用这些逻辑，但这通常会导致命名冲突和逻辑混乱。而使用Vue3中的或者说，就无需担心上述问题。你可以通过调用useFetch这样的自定义hook。
vue3中的自定义hook函数
weixin_43613849的博客
09-13 4477
1、介绍 什么是hook？—— 本质是一个函数，把setup函数中使用的Composition API进行了封装。 类似于vue2.x中的mixin。 自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。 2、使用 例如：给组件添加一个监听事件获取鼠标点击事件并复用 ①如果不复用的话：（注意，如果不把这个函数单写成savePoint会报错） ②如果需要复用 ，可以进行了封装成hook导出，然后再需要复用的组件中引用就好了。 代码： us
vue3中 Hook详解 Hook结合自定义指令
最新发布
weixin_44166849的博客
05-05 1141
vue3中 Hook详解 Hook结合自定义指令
Vue3 — 自定义hook函数
m0_48942526的博客
05-19 566
自定义hook函数 使用Vue3的组合API封装的可复用的功能函数 自定义hook的作用类似于vue2中的mixin技术 自定义Hook的优势: 很清楚复用功能代码的来源, 更清楚易懂 需求1: 收集用户鼠标点击的页面坐标 普通写法：只能在该组件中使用 <template> <h2>x:{{x}}, y:{{y}}</h2> </template> <script lang="ts"> import { defineComponen
vue3.0 自定义hook
qq_46582421的博客
01-14 268
自定义hook函数 什么是hook?——本质是一个函数，把setup函数中使用的Composition API进行了封装。。类似于vue2.x中的mixin。 自定义hook的优势:复用代码,让setup中的逻辑更清楚易懂。 文件目录： Demo.vue代码： <template> <h2>当前求和为：{{sum}}</h2> <button @click="sum++">点我+1</button> <hr&gt
自定义hooks函数
qq_42980244的博客
10-07 314
2、在vue文件中使用useXX函数。1、js文件中定义useXX函数。3、useAdd自定义hooks。
vue自定义全局共用函数详解
10-18
今天小编就为大家分享一篇vue自定义全局共用函数详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue自定义指令封装节流函数的方法示例
08-27
Vue自定义指令封装节流函数的方法示例 今天，我们来讨论 Vue 自定义指令封装节流函数的方法示例。节流函数是一种常用的前端开发技术，用于避免过多的性能消耗。在《JavaScript高级程序设计》一书中，就有一个典型的...
Vue3自定义组件库，Vue3项目
08-17
Vue3自定义组件库，Vue3项目
vue props对象validator自定义函数实例
10-15
以下是一个Vue props对象中`validator`自定义函数的实例： ```javascript props: { propA: Number, // 只接受Number类型 propB: [String, Number], // 接受String或Number类型 propC: { // 必填的String类型 ...
Vue组件之自定义事件的功能图解
08-28
Vue组件之自定义事件的功能图解 Vue组件自定义事件是指在Vue应用程序中，组件之间可以通过自定义事件来实现通信和交互的功能。在本文中，我们将通过图文并茂的形式来介绍Vue组件之自定义事件的功能和使用方法。 一...
【Vue3】学习笔记-自定义hook函数
德仔
07-03 297
本质是一个函数，把setup函数中使用的Composition API进行了封装。类似于vue2.x中的mixin。(但是mixins会组件的配置项覆盖。vue3使用了自定义hooks替代mixnins，hooks本质上是函数，引入调用。
Vue3 的 hook函数
mon_star°的博客
07-10 322
Vue3 的 hook函数 可以帮助我们提高代码的复用性, 让我们能在不同的组件中都利用 hooks 函数；Vue3 的 hook函数 相当于 vue2 的 mixin, 不同在于 hooks 是函数；其实就是代码的复用，可以用到外部的数据，生命钩子函数...，具体怎么用直接看代码，
React Hooks
ShirleyXuMM的博客
07-19 151
1. 什么是react hooks? React Hooks 它是react16.8版本有的 React Hooks是可以让我们在函数式组件中定义 state , 和使用React中的一些特性 2. React Hooks 有哪些中间件？ useState : 让我们可以在函数式组件中定义状态 和 事件处理程序 useEffect : 让我们可以在函数式组件中使用类似生命周期钩子函数 ...
Vue3.0（正式版）核心技术精讲
04-07
工作一两年，还在做静态页面，能力停滞不前？只接过简单的功能需求，没机会用Vue做完整项目？
Vue3.0（alpha），2020前端必修，50分钟掌握vue@next全家桶
03-19
Vue3.0（alpha）环境搭建，响应原理（Proxy、Reflect）及核心知识点（setup，reactive，props，生命周期等）讲解。vue-router（alpha）及vuex（alpha）的使用。
【React Hook】深入了解自定义Hook
Milk~每天分享一点点，技术进步一点点
08-11 578
自定义 Hook 通过自定义 Hook，可以将组件逻辑提取到可重用的函数中。 例子：聊天程序中的组件，该组件用于显示好友的在线状态 import React, { useState, useEffect } from 'react'; function FriendStatus(props) { const [isOnline, setIsOnline] = useState(null); useEffect(() => { function handleStatusChange(s
[Vue3学习笔记]Vue3生命周期和自定义hook函数
あなたの可愛い41
12-15 1907
Vue3学习笔记Vue2和Vue3生命周期的区别自定义hook函数获取鼠标位置封装axios的hook如果我们要加一个监听呢？ Vue2和Vue3生命周期的区别 两变：最直观的是两个名称的改变 Vue2 Vue3 beforeDestory beforeUnmount Destoryed unmounted 两删：created和beforeCreate被删掉了，因为有setup了 加一个on：其他的都是加上了一个on，比如mounted---> onMounted，当然
Vue3 - 自定义hook函数请求数据
weixin_46398446的博客
05-09 1686
<template> <div id="nav"> <h2>坐标为：</h2> <h3>x:{{x}},y:{{y}}</h3> <h3 v-if="loading">正在加载中</h3> <h3 v-else-if="errorMsg">错误信息：{{errorMsg}}</h3> <!-- <ul v-else&
vue3自定义hook函数如何实现
03-26
Vue3中的自定义hook函数可以通过使用`composable`函数进行实现。下面是一个简单的示例： ```javascript import { ref } from 'vue' export default function useCounter() { const count = ref(0) function increment() { count.value++ } return { count, increment } } ``` 在上面的代码中，我们定义了一个`useCounter`函数，返回一个包含`count`和`increment`的对象。`count`使用了Vue3的响应式系统进行了封装，`increment`则是普通的函数。我们可以在组件中使用`useCounter`创建一个计数器： ```javascript import { defineComponent } from 'vue' import useCounter from './useCounter' export default defineComponent({ setup() { const { count, increment } = useCounter() return { count, increment, } }, }) ``` 在上面的代码中，我们在`setup`函数中使用`useCounter`创建了一个计数器，然后将计数器的`count`和`increment`分别暴露出来供组件使用。 封装一些常用的行为，可以让我们更高效的开发Vue3应用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值