vue3中的hook简单封装
目录
- vue3的hook封装
- vue3的hooks总结
- 下面总结一下如何去书写hooks
- 计数器的hook
vue3的hook封装
vue3最新鲜的就是组合式API了,通过组合式API我们可以把一些复杂的逻辑或一些常用的逻辑封装成一个个hook来进行调用,这样的方式也更易于维护。
使用
import useTest from "../../hooks/useTest"; export default defineComponent({ name: "vue3Test", setup: () => { let refTest = ref(111); // 单个值用ref const { testHook } = useTest({ value: refTest }); return { refTest, testHook }; } });
useTest
import { Ref, ref, reactive, watch } from "vue"; export default function ({ value }: { value: Ref<number> }) { let testHook = ref(1000); let testReactiveHook = reactive({ name: "234567i", }); watch(value, () => { testHook.value = testHook.value + value.value; testReactiveHook.name = "343453453453434"; }); return { testHook, testReactiveHook, }; }
简单的封装了一个hook进行学习,vue3的hook和react的hook差别并不大因此对比react上手vue3还是比较快的
vue3的hooks总结
vue3中的hooks其实是函数的写法,就是将文件的一些单独功能的js代码进行抽离出来,放到单独的js文件中。这样其实和我们在vue2中学的mixin比较像。
下面总结一下如何去书写hooks
首先应该先建立一个hooks文件夹:其目的是为了存放hook文件。
建立相关的hook文件:一般使用use开头。
计数器的hook
useTitle的hooks
useScrollPostion用来监测浏览器页面的滚动情况
useMousemove监听鼠标位置的hook
useLocalStorage可以本地存储
以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
vue-router的hooks用法详解
虽然Vue 3还没有正式发布,但是热爱新技术的我早已按捺不住自己的内心,开始尝试在小项目中使用它了. 根据这篇<今日凌晨Vue3 beta版震撼发布,竟然公开支持脚手架项目!>我搭建了一个Vue 3的脚手架项目,用这种方式搭建的脚手架项目不仅仅只有vue是新版的,就连vue-router.vuex都是最新的. 给大家截一下package.json的图: 可以看到vue-router和vuex都已经开启4.0时代啦! 不过其实我并没有去了解过vue-router 4.0的新用法什么的,因为我觉得
-
vue-cli创建的项目中的gitHooks原理解析
前言 在使用 vue create my-app 创建项目的时候,Vue 会自动帮我们做好一些预配置,你可以不使用它,但是一旦需要的时候,突然发现,咦~原来它已经帮我做好准备工作了,只需要按自己的需求配置一下就可以了,就会觉得 vue-cli 很贴心啊,帮我们节省了很多时间. 在 package.json 文件中会发现 gitHooks . lint-staged 等字段,不难看出它是在我们执行 git 命令的时候会自动执行的一些额外的操作,比如语法提示.错误提示等. 这个完整的过程是怎样的呢?
-
详解Vue源码学习之callHook钩子函数
Vue实例在不同的生命周期阶段,都调用了callHook方法.比如在实例初始化(_init)的时候调用callHook(vm, 'beforeCreate')和callHook(vm, 'created'). 这里的"beforeCreate","created"状态并非随意定义,而是来自于Vue内部的定义的生命周期钩子. var LIFECYCLE_HOOKS = [ 'beforeCreate', 'created', 'beforeMount', 'mount
-
vue3使用自定义hooks获取dom元素的问题说明
目录 使用自定义hooks获取dom元素问题 分享下楼主自己的观点 vue获取/操作组件的dom元素 下面是我的代码内容(非全部内容) 最后总结 使用自定义hooks获取dom元素问题 在自定义hooks的onMounted事件里面 获取ref元素,组件调用hooks的时候必须要传递响应式对象. 分享下楼主自己的观点 代码如下 <script> // demo.vue import { defineComponent, ref } from 'vue' import useBars from
-
深度了解vue.js中hooks的相关知识
背景 最近研究了vue3.0的最新进展,发现变动很大,总体上看,vue也开始向hooks靠拢,而且vue作者本人也称vue3.0的特性吸取了很多hooks的灵感.所以趁着vue3.0未正式发布前,抓紧时间研究一下hooks相关的东西. 源码地址:vue-hooks-poc 为什么要用hooks? 首先从class-component/vue-options说起: 跨组件代码难以复用 大组件,维护困难,颗粒度不好控制,细粒度划分时,组件嵌套存层次太深-影响性能 类组件,this不可控,逻辑分散,不
-
vue-hook-form使用详解
vue-hook-form 用于处理form请求,获取formData.以便于将form请求转成ajax/fetch请求 安装 npm install vue-hook-form 使用 VUE版本:1.x 必须在vue-cli生成的webpack模板环境中使用 一.注册&配置组件 // 这里使用在main.js中全局注册来示例 import vue from 'vue' import hookForm from 'vue-hook-form' // 配置全局form表单序列化之前的hook ho
-
vue3的自定义hook函数使用
目录 自定义hook函数使用 vue3 hooks函数示例 官方示例代码---封装前 使用hooks函数封装后 hooks函数 自定义hook函数使用 使用Vue3的组合API封装的可复用的功能函数 自定义hook的作用类似于vue2中的mixin技术 自定义Hook的优势: 很清楚复用功能代码的来源, 更清楚易懂 需求1: 收集用户鼠标点击的页面坐标 这里先看一下大体项目结构: 这里的hooks下的文件是示例代码,public内的是测试数据 在启动项目后,测试public的data文件内的数据
-
vue3中的hook简单封装
目录 vue3的hook封装 vue3的hooks总结 下面总结一下如何去书写hooks 计数器的hook vue3的hook封装 vue3最新鲜的就是组合式API了,通过组合式API我们可以把一些复杂的逻辑或一些常用的逻辑封装成一个个hook来进行调用,这样的方式也更易于维护. 使用 import useTest from "../../hooks/useTest"; export default defineComponent({ name: "vue3Test&qu
-
Android中网络框架简单封装的实例方法
Android中网络框架的简单封装 前言 Android作为一款主要应用在移动终端的操作系统,访问网络是必不可少的功能.访问网络,最基本的接口有:HttpUrlConnection,HttpClient,而在后续的发展中,出现了Volley,OkHttp,Retrofit等网络封装库.由于各种原因,在实际的项目开发中,我们可能会需要在项目的版本迭代中,切换网络框架.如果对于网络框架没有好的封装,那么当需要切换网络框架时,可能就会有大量的迁移工作要做. 封装网络框架 在架构设计中,面向接口和抽象,
-
vue3中的抽离封装方法实现
目录 vue3的抽离封装方法: 1.新建公共utils/publicModule文件 2.vue组件页面中引入使用 vue3的抽离封装方法: vue3中的任何一个组合式api都可以单独抽离出去在另一个文件,最后只需要回归到setup()中即可. 1.新建公共utils/publicModule文件 // 公共的数据和方法 import { reactive } from "vue" const publicModule = ()=>{ const res = reactive({
-
php中钩子(hook)的原理与简单应用demo示例
本文实例讲述了php中钩子(hook)的原理与简单应用.分享给大家供大家参考,具体如下: 我们先来回顾下原本的开发流程; 产品汪搞出了一堆需求; 当用户注册成功后需要发送短信.发送邮件等等; 然后聪明机智勇敢的程序猿们就一扑而上; 把这些需求转换成代码扔在 用户注册成功 和 跳转到首页 之间; 没有什么能够阻挡;充满创造力的猿们; <?php class Test{ public function index(){ // 用户注册成功 /* 此处是一堆发送短信的代码 */ /* 此处是一堆发送邮
-
vue3中如何用threejs画一些简单的几何体
目录 前言 threejs简述 依赖包版本 vue3操作DOM 创建场景,相机,渲染器本节及后续都在initThree方法中写 立方体 球体 圆柱体 坐标系 点光源 鼠标操作旋转,缩放 球体,立方体自动旋转 initThree完整代码 总结 前言 在vue3中使用threejs画了几个最简单的几何体,自动旋转的立方体,圆柱体,球体,并且加入了光照,几何体影阴部分即光没照到的地方,成果如下,感兴趣的可以看看具体实现过程~ threejs简述 Three.js是基于原生WebGL封装运行的三维引擎
-
vue3学习笔记简单封装axios示例实现
目录 简介 openapi 基本配置 拦截器 api请求 数据渲染 简介 axios是一个基于promise的网络请求库,管理后台使用的场景通常 获取后端api数据,然后交给页面渲染 还是在前面的示例项目上操作,安装axios最新0.27.2版本 cd HELLO-WORLD npm install axios 复制代码 openapi 在网上找到一个开放的openapi地址,免费且无需认证就可以使用 方便开发时模拟接口数据,但不能使用在生产环境中 该openapi返回json数据,比较符合我们
-
Vue3中使用echarts的简单七个步骤(易懂,附紧急避坑)
目录 前言 一.Echars官网地址 二.Echars的创建步骤(Vue3中使用Vue2的写法) 第一步:安装echars 第二步:导入echarts 第三步:创建Dom结构 第四步:ref获取创建的Dom结构 第五步:初始化图表 第六步:配置对应的option数据 第七步:setOption方法进行数据的设置 三.完整代码如下(包含父组件中的传值,Vue3中Vue2的分写法) 四.Vue3的写法完整写法如下(setup篇) 总结 前言 提示:vue3中使用echars的七步骤如下:其中第5-7
-
iOS中视频播放器的简单封装详解
前言 如果仅仅是播放视频两者的使用都非常简单,但是相比MediaPlayer,AVPlayer对于视频播放的可控制性更强一些,可以通过自定义的一些控件来实现视频的播放暂停等等.因此这里使用AVPlayer的视频播放. 视频播放器布局 首先使用xib创建CLAVPlayerView继承UIView用来承载播放器,这样我们在外部使用的时候,直接在控制器View或者Cell上添加CLAVPlayerView即可,至于播放器播放或者暂停等操作交给CLAVPlayerView来管理.下面来看一下CLAVP
-
vue中如何简单封装axios浅析
把axios注入到Vue中 import axios from 'axios'; Vue.prototype.$axios = axios; import axios from 'axios' axios.defaults.timeout = 5000; //响应时间 axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'; //配置请求头 axios.defaults.withCredenti
-
vue3简单封装input组件和统一表单数据详解
目录 前言 准备工作 用原生 input 封装 Input 封装表单数据 使用表单数据 总结 前言 vue3 支持用 jsx 实现组件,摆脱了 vue 文件式的组件,不再需要额外的指令,写法非常接近 React,减少记忆负担. 本文简单的练习,用 vue3 组件封装 input 组件和统一表单数据. 准备工作 用vue create example创建项目,参数大概如下: 用原生 input 原生的 input,主要是 value 和 change,数据在 change 的时候需要同步. App
随机推荐
- Lua字符串库(string库)学习笔记
- 超强图片数量上传无限制
- javascript 进度条 实现代码
- php实现购物车功能(上)
- Android自定义控件LinearLayout实例讲解
- SQLite不支持Right Join的解决办法GROUP BY
- jQuery实现在最后一个元素之前插入新元素的方法
- javascript新手语法小结
- node.js中的dns.getServers方法使用说明
- xmapp环境搭建注意事项说明
- 在Mac OS系统上安装Python的Pillow库的教程
- java读取某个文件夹下的所有文件实例代码
- 实例解析Python中的__new__特殊方法
- php简单随机字符串生成方法示例
- iOS开发之获取LaunchImage启动图的实例
- Python模块文件结构代码详解
- vue 路由页面之间实现用手指进行滑动的方法
- vue init webpack 建vue项目报错的解决方法
- 通过pycharm使用git的步骤(图文详解)
- MyBatis批量插入数据过程解析