vue3【自定义hook】

已于 2022-01-27 16:33:10 修改
阅读量6.8k 收藏 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
版权

什么是hook?

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

类似于vue2.x中的mixin

自定义hook的优势：

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

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

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

方法：主要是通过在组件挂载时调用window.addEventListener事件监听方法获取点击事件的坐标。

demo.vue

<template>
    <h2>当前求和为
了解本专栏 订阅专栏 解锁全文 超级会员免费看
suoh's Blog
关注
  • 12
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
七、【Vue3】——自定义hook函数
yifei1234567的博客
04-06 5130
自定义hook函数类似与封装一个可复用的组件，只不过它是一个函数，封装的是一个可复用的函数功能，与Vue2中的mixin类似。下面通过一个例子就可以很好理解它了
vue2-editor：使用Vue.js和Quill的文本编辑器
02-06
Vue2编辑器 由Quill.js和Vue.js支持的易于使用但功能强大且可自定义的RTF编辑器 安装 您可以使用Yarn或NPM npm install vue2-editor 要么 yarn add vue2-editor 用法 // Basic Use - Covers most scenarios import { VueEditor } from "vue2-editor" ; // Advanced Use - Hook into Quill's API for Custom Functionality import { VueEditor , Quill } from "
让你30分钟快速掌握vue3教程
01-18
经过了漫长的迭代，Vue 3.0终于在上2020-09-18发布了，带了翻天覆地的变化，使用了Typescript 进行了大规模的重构，带来了Composition API RFC版本，类似React Hook 一样的写Vue，可以自定义自己的hook ，让使用者更加的灵活，接下来总结一下vue 3.0 带来的部分新特性。 setup() ref() reactive() isRef() toRefs() computed() watch() LifeCycle Hooks(新的生命周期) Template refs globalProperties
vue3中 Hook详解 Hook结合自定义指令
最新发布
weixin_44166849的博客
05-05 1075
vue3中 Hook详解 Hook结合自定义指令
vue-extensions:简单但多功能的 Vue.js 扩展系统
05-30
vue-扩展 这个库是一个 Vue 插件，它提供了一个作为扩展点的自定义元素，带有一个名为“hook”的元素。 然后，您的应用程序的插件可以为此扩展点提供“扩展”组件，这些组件会自动找到并呈现以替换扩展点。 这适用于您需要在一个地方拥有不同外观组件的“列表”，每个组件都由插件提供。 如果你只需要一个相同组件的列表，只是有不同的数据，不要使用vue-extensions只需使用v-for指令。 安装 在你的项目中安装这个库的最简单方法是使用相应的 Vue CLI 插件。 它将为您做所有的魔术： # vue add extensions 这会自动将您需要的一切添加到您的项目中。 只要确保runtimeCompiler: true在启用vue.config.js -在Vue公司使用的模板字符串。 如果您选择手动安装所有内容，请参阅。 扩展 扩展是导出带有hooks属性的默认对象的模块
vue3-hook:关于vue3 Composition API的一些有用的演示
05-26
vue3-hook 开发文档: Feature useRequest用于统一管理网络请求相关状态，而无需在每次网络请求中重复处理loading、error等逻辑 useEventBus实现了在组件卸载时自动取消当前组件监听的事件，无需重复编写onUnmounted代码，这个思路也可以用于DOM事件、定时器、网络请求等注册和取消 useModel实现了在多个组件共享同一个hook状态，展示了一种除vuex、provide/inject函数之外跨组件共享数据的方案 useReducer利用hook实现了一个简易版的redux，并且利用useModel实现了全局的store useDebounce与useThrottle，实现了去抖和节流，并思考了hook化的代码风格与常规的util代码风格，以及是否有必要将所有的东西都hook化 ...
Vue-Wysiwyg
02-09
Vue2编辑器 # Basic Node.JS installation meteor npm install agile-wysiwyg@https://github.com/skwerlzu/vue-wysiwyg.git 由Quill.js和Vue.js支持的易于使用但功能强大且可自定义的RTF编辑器 安装 您可以使用Yarn或NPM npm install vue2-editor 要么 yarn add vue2-editor 用法 // Basic Use - Covers most scenarios import { VueEditor } from "vue2-editor" ; // Advanced Use - Hook into Quill's API for Custom Functionality import { VueEditor , Quill }
Vue3中自定义hook
richest_qi的博客
03-18 2361
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 4469
1、介绍 什么是hook？—— 本质是一个函数，把setup函数中使用的Composition API进行了封装。 类似于vue2.x中的mixin。 自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。 2、使用 例如：给组件添加一个监听事件获取鼠标点击事件并复用 ①如果不复用的话：（注意，如果不把这个函数单写成savePoint会报错） ②如果需要复用 ，可以进行了封装成hook导出，然后再需要复用的组件中引用就好了。 代码： us
Vue3中的hook
jieyucx的博客
07-11 7396
Vue3中的hook通常被称为，是Vue.js框架中的一个重要特性。它们的是一些可以在，这些函数能够让你在不影响组件逻辑的情况下，增强和扩展组件的功能。Hook的是。举个例子，如果你有一个处理异步请求和管理请求状态的功能，那么你可能会在多个组件中需要这个功能。在Vue2.x中，你可能需要使用mixins或者HOC（高阶组件）来抽象和重用这些逻辑，但这通常会导致命名冲突和逻辑混乱。而使用Vue3中的或者说，就无需担心上述问题。你可以通过调用useFetch这样的自定义hook。
Vue3 — 自定义hook函数
m0_48942526的博客
05-19 565
自定义hook函数 使用Vue3的组合API封装的可复用的功能函数 自定义hook的作用类似于vue2中的mixin技术 自定义Hook的优势: 很清楚复用功能代码的来源, 更清楚易懂 需求1: 收集用户鼠标点击的页面坐标 普通写法：只能在该组件中使用 <template> <h2>x:{{x}}, y:{{y}}</h2> </template> <script lang="ts"> import { defineComponen
vue-dynamic-form:vue+antd实现的动态表单，可拖拽，可响应式，完全自定义布局
05-02
form-builder 技术栈： 基于VUE2.x + ant-design-vue 1.6.2 + sortable.js(拖拽) 实现的动态表单功能，支持编辑模式，表格模式，详情模式 代码按单元组件模块式划分，结构清晰、维护简单 （2核1G服务器，请勿攻击） 欢迎有兴趣的同学star，如有问题请提issues 或者联系： 以下为截图： Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build Customize configuration See Configuration Reference.
深度理解Vue3中的hooks以及为什么要使用hooks
程序猿的傻白甜
08-22 2257
一般来说，我们开发中会自动抽象出逻辑函数放在utils中，utils中放的纯逻辑，不存在属于组件的东西，例如methods中定义的纯函数等。而hooks就是在utils的基础上再包一层组件级别的东西(钩子函数等)。例如：我们每次点击button都会弹出一个弹窗，自动显示当前日期。
最前端｜一文详解Vue3.x 中 hooks 函数封装和使用
在数字化道路无限探索
10-17 2751
轻松封装复用功能，提升开发效率
vue3中hooks用法详解
DZQ1223的博客
08-02 2612
hook是钩子的意思，看到“钩子”是不是就想到了钩子函数？事实上，hooks还真是函数的一种写法。vue3借鉴开发出了，所以也就意味着也能进行自定义封装hooks。vue3中的hooks就是函数的一种写法，就是将文件的一些单独功能的js代码进行抽离出来，放到单独的js文件中，或者说是一些可以复用的公共方法/功能。其实hooks和vue2中的mixin有点类似，但是相对mixins而言，hooks更清楚复用功能代码的来源, 更清晰易懂。
vue3-Hook
Wu_whiteHyacinth的博客
11-02 4825
vue3-hook
Vue3 自定义hook函数
且听风吟的博客
05-16 1280
什么是hook？—— 本质是一个函数，把setup函数中使用的Composition API进行了封装。
深度解析:在vue3中使用自定义Hooks
九仞山的专栏
06-11 6335
详细介绍了vue3中如何使用自定义Hooks
vue3自定义hook
09-08
Vue 3中可以通过自定义钩子来扩展和重用组件逻辑。以下是创建自定义钩子的步骤： 1. 创建一个函数，该函数将作为自定义钩子的入口。可以将其放在一个单独的文件中，以便在多个组件中共享。 2. 在函数中定义你的逻辑。这可以包括任何你需要在组件中重复使用的代码，如数据处理、异步请求、订阅等。 3. 返回一个对象，该对象包含你想要暴露给组件使用的属性和方法。这些属性和方法可以在组件中通过解构赋值的方式进行使用。 下面是一个简单的例子，展示了如何创建一个名为'useDarkMode'的自定义钩子，用于在组件中添加暗黑模式功能： ```javascript // useDarkMode.js import { ref, watch } from 'vue'; export default function useDarkMode() { const isDarkMode = ref(false); // 监听isDarkMode的变化，当其值改变时执行回调函数 watch(isDarkMode, (newValue) => { // 在这里可以根据newValue的值来切换暗黑模式样式 // 例如，切换一个CSS class或者调用其他相关逻辑 document.body.classList.toggle('dark-mode', newValue); }); // 提供一个方法来切换暗黑模式的状态 function toggleDarkMode() { isDarkMode.value = !isDarkMode.value; } // 返回需要暴露给组件的属性和方法 return { isDarkMode, toggleDarkMode, }; } ``` 然后，在你的组件中可以使用这个自定义钩子： ```javascript // MyComponent.vue <script> import useDarkMode from './useDarkMode'; export default { setup() { const { isDarkMode, toggleDarkMode } = useDarkMode(); return { isDarkMode, toggleDarkMode, }; }, }; </script> <template> <div> <button @click="toggleDarkMode">{{ isDarkMode ? '关闭' : '开启' }}暗黑模式</button> <p v-if="isDarkMode">当前处于暗黑模式</p> <p v-else>当前处于亮色模式</p> </div> </template> ``` 这样，你就可以在多个组件中重复使用`useDarkMode`钩子，从而实现暗黑模式的切换。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

suoh's Blog

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

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

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

打赏作者

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

抵扣说明：

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

余额充值