vue3【自定义hook】

已于 2022-01-27 16:33:10 修改
阅读量7k 收藏 16
点赞数 12
分类专栏： ❤️❤️--vue3核心技术栈 文章标签： vue.js vue3中自定义hook
于 2022-01-27 16:32:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41579104/article/details/122718672
版权
本文通过实例讲解Vue3中自定义Hook的创建和使用，通过封装获取鼠标点击坐标的函数，展示了如何在组件卸载时移除监听事件，以及如何在多个组件间复用代码，提高代码组织的清晰度。
摘要由CSDN通过智能技术生成

什么是hook?

本质是一个函数，把setup函数中使用的Composition API（组合式api）进行了封装

类似于vue2.x中的mixin

自定义hook的优势：

复用代码，让setup中的逻辑更清楚易懂

举个例子，通过在页面获取鼠标点击的坐标为例，来说明一下自定义hook的作用

（1）首先我们写一个这样的页面，获取鼠标点击页面的鼠标，并显示在页面上</

了解本专栏 订阅专栏 解锁全文 超级会员免费看
七、【Vue3】——自定义hook函数
yifei1234567的博客
04-06 5262
自定义hook函数类似与封装一个可复用的组件，只不过它是一个函数，封装的是一个可复用的函数功能，与Vue2中的mixin类似。下面通过一个例子就可以很好理解它了
Vue3 自定义hook函数
且听风吟的博客
05-16 1376
什么是hook？—— 本质是一个函数，把setup函数中使用的Composition API进行了封装。
vue3中hooks的介绍及用法
热门推荐
一只爱吃糖的小羊
09-30 3万+
今天这篇文章是介绍一下vue3中的hooks以及它的用法。本文内容主要有以下两点： 什么是hooks vue3中hooks的使用方法
学习笔记-Vue3中Hook函数
零正催照
05-11 2531
在这类框架中，如果一个变量的变化不会引起视图变化，则为普通变量，如果一个变量已经被框架注册为状态，那么这个变量的变化就会引起视图变化，我们称之为响应式变量。这时，如果多个页面都同时需要的话，你复制这段代码跑来跑去，而且，你要知道的是，每个页面中的onMounted跟onUnmounted都不一定是空的，并且，变量的命名上，都有可能出现重复的情况发生。但在以往，在前端原生开发中，我们所封装的函数，大多数是"无状态"的，不能够建立数据与视图之间的联系。是，这也是我在学习过程中很疑惑的点，来看看下面的解释吧！
【Vue3】hooks
最新发布
票票的博客
09-12 400
Vue3：hooks
Vue3中自定义hook
richest_qi的博客
03-18 2427
hook，本质是一个函数。自定义hook，就是将setup中使用过的组合式函数进行封装，实现代码复用。 看个具体的例子吧。 main.js import { createApp } from 'vue' import App from './App.vue' createApp(App).mount('#app') App.vue <template> <button @click="isShowDemo = !isShowDemo">切换（隐藏/显示）</bu
vue3中的自定义hook函数
weixin_43613849的博客
09-13 4558
1、介绍 什么是hook？—— 本质是一个函数，把setup函数中使用的Composition API进行了封装。 类似于vue2.x中的mixin。 自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。 2、使用 例如：给组件添加一个监听事件获取鼠标点击事件并复用 ①如果不复用的话：（注意，如果不把这个函数单写成savePoint会报错） ②如果需要复用 ，可以进行了封装成hook导出，然后再需要复用的组件中引用就好了。 代码： us
Vue3自定义Hooks
热爱WebGIS的博客
02-21 3082
Vue3-自定义Hooks
vue3中 Hook详解 Hook结合自定义指令
weixin_44166849的博客
05-05 3879
vue3中 Hook详解 Hook结合自定义指令
Vue3——自定义hook函数、toRef和toRefs
mantou_riji的博客
07-25 986
什么是hook?——本质是一个函数，把setup函数中使用的进行了封装。类似于vue2.x中的mixin。就是把setup中具有一定逻辑功能的代码提取出去，放在hooks的函数中，以后哪个组件需要使用该功能，就直接调用该hook函数即可。hook函数一般放在src文件夹下的hooks中。eghooks/usePoint.js（定义hooks函数获取鼠标点击坐标）import{//实现鼠标打点的数据letpoint=reactive({x0,y...
vue3自定义hook
09-08
Vue 3中可以通过自定义钩子来扩展和重用组件逻辑。以下是创建自定义钩子的步骤： 1. 创建一个函数，该函数将作为自定义钩子的入口。可以将其放在一个单独的文件中，以便在多个组件中共享。 2. 在函数中定义你的...
vue3自定义hook函数如何实现
03-26
Vue3中的自定义hook函数可以通过使用`composable`函数进行实现。下面是一个简单的示例： ```javascript import { ref } from 'vue' export default function useCounter() { const count = ref(0) function ...
Vue3中的hook
jieyucx的博客
07-11 8276
Vue3中的hook通常被称为，是Vue.js框架中的一个重要特性。它们的是一些可以在，这些函数能够让你在不影响组件逻辑的情况下，增强和扩展组件的功能。Hook的是。举个例子，如果你有一个处理异步请求和管理请求状态的功能，那么你可能会在多个组件中需要这个功能。在Vue2.x中，你可能需要使用mixins或者HOC（高阶组件）来抽象和重用这些逻辑，但这通常会导致命名冲突和逻辑混乱。而使用Vue3中的或者说，就无需担心上述问题。你可以通过调用useFetch这样的自定义hook。
Vue3 — 自定义hook函数
m0_48942526的博客
05-19 622
自定义hook函数 使用Vue3的组合API封装的可复用的功能函数 自定义hook的作用类似于vue2中的mixin技术 自定义Hook的优势: 很清楚复用功能代码的来源, 更清楚易懂 需求1: 收集用户鼠标点击的页面坐标 普通写法：只能在该组件中使用 <template> <h2>x:{{x}}, y:{{y}}</h2> </template> <script lang="ts"> import { defineComponen
vue3-Hook
Wu_whiteHyacinth的博客
11-02 4922
vue3-hook
Vue3自定义hook用法
m0_56219678的博客
02-12 3752
Vue3自定义hook用法，封装功能多处复用
深度解析:在vue3中使用自定义Hooks
九仞山的专栏
06-11 6723
详细介绍了vue3中如何使用自定义Hooks
vue3 中 自定义hooks
WZH15075051915的博客
04-01 1175
Hooks技术最早是由React团队的Sophie Alpert和Abramov在2018年提出来的，最初是为了解决React类组件中状态逻辑复用的问题而提出来的。在React使用类组件时，为了复用状态逻辑，需要使用高阶组件或者Render Props等方式，这些方式会增加代码的复杂度和维护成本。而Hooks技术是使用特定函数来“钩到”React的state和生命周期等特性的技术。它可以让我们在函数组件中使用state以及其他的React特性，代替传统的类组件或高阶组件等方式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

suoh's Blog

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值