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可以本地存储

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解Vue源码学习之callHook钩子函数

    Vue实例在不同的生命周期阶段,都调用了callHook方法.比如在实例初始化(_init)的时候调用callHook(vm, 'beforeCreate')和callHook(vm, 'created'). 这里的"beforeCreate","created"状态并非随意定义,而是来自于Vue内部的定义的生命周期钩子. var LIFECYCLE_HOOKS = [ 'beforeCreate', 'created', 'beforeMount', 'mount

  • vue-router的hooks用法详解

    虽然Vue 3还没有正式发布,但是热爱新技术的我早已按捺不住自己的内心,开始尝试在小项目中使用它了. 根据这篇<今日凌晨Vue3 beta版震撼发布,竟然公开支持脚手架项目!>我搭建了一个Vue 3的脚手架项目,用这种方式搭建的脚手架项目不仅仅只有vue是新版的,就连vue-router.vuex都是最新的. 给大家截一下package.json的图: 可以看到vue-router和vuex都已经开启4.0时代啦! 不过其实我并没有去了解过vue-router 4.0的新用法什么的,因为我觉得

  • 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的相关知识

    深度了解vue.js中hooks的相关知识

    背景 最近研究了vue3.0的最新进展,发现变动很大,总体上看,vue也开始向hooks靠拢,而且vue作者本人也称vue3.0的特性吸取了很多hooks的灵感.所以趁着vue3.0未正式发布前,抓紧时间研究一下hooks相关的东西. 源码地址:vue-hooks-poc 为什么要用hooks? 首先从class-component/vue-options说起: 跨组件代码难以复用 大组件,维护困难,颗粒度不好控制,细粒度划分时,组件嵌套存层次太深-影响性能 类组件,this不可控,逻辑分散,不

  • vue-cli创建的项目中的gitHooks原理解析

    前言 在使用 vue create my-app 创建项目的时候,Vue 会自动帮我们做好一些预配置,你可以不使用它,但是一旦需要的时候,突然发现,咦~原来它已经帮我做好准备工作了,只需要按自己的需求配置一下就可以了,就会觉得 vue-cli 很贴心啊,帮我们节省了很多时间. 在 package.json 文件中会发现 gitHooks . lint-staged 等字段,不难看出它是在我们执行 git 命令的时候会自动执行的一些额外的操作,比如语法提示.错误提示等. 这个完整的过程是怎样的呢?

  • vue3的自定义hook函数使用

    vue3的自定义hook函数使用

    目录 自定义hook函数使用 vue3 hooks函数示例 官方示例代码---封装前 使用hooks函数封装后 hooks函数 自定义hook函数使用 使用Vue3的组合API封装的可复用的功能函数 自定义hook的作用类似于vue2中的mixin技术 自定义Hook的优势: 很清楚复用功能代码的来源, 更清楚易懂 需求1: 收集用户鼠标点击的页面坐标 这里先看一下大体项目结构: 这里的hooks下的文件是示例代码,public内的是测试数据 在启动项目后,测试public的data文件内的数据

  • 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简单封装

    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中的抽离封装方法实现

    目录 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画一些简单的几何体

    vue3中如何用threejs画一些简单的几何体

    目录 前言 threejs简述 依赖包版本 vue3操作DOM 创建场景,相机,渲染器本节及后续都在initThree方法中写 立方体 球体 圆柱体 坐标系 点光源 鼠标操作旋转,缩放 球体,立方体自动旋转 initThree完整代码 总结 前言 在vue3中使用threejs画了几个最简单的几何体,自动旋转的立方体,圆柱体,球体,并且加入了光照,几何体影阴部分即光没照到的地方,成果如下,感兴趣的可以看看具体实现过程~ threejs简述 Three.js是基于原生WebGL封装运行的三维引擎

  • vue3学习笔记简单封装axios示例实现

    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中视频播放器的简单封装详解

    iOS中视频播放器的简单封装详解

    前言 如果仅仅是播放视频两者的使用都非常简单,但是相比MediaPlayer,AVPlayer对于视频播放的可控制性更强一些,可以通过自定义的一些控件来实现视频的播放暂停等等.因此这里使用AVPlayer的视频播放. 视频播放器布局 首先使用xib创建CLAVPlayerView继承UIView用来承载播放器,这样我们在外部使用的时候,直接在控制器View或者Cell上添加CLAVPlayerView即可,至于播放器播放或者暂停等操作交给CLAVPlayerView来管理.下面来看一下CLAVP

  • vue中如何简单封装axios浅析

    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组件和统一表单数据详解

    vue3简单封装input组件和统一表单数据详解

    目录 前言 准备工作 用原生 input 封装 Input 封装表单数据 使用表单数据 总结 前言 vue3 支持用 jsx 实现组件,摆脱了 vue 文件式的组件,不再需要额外的指令,写法非常接近 React,减少记忆负担. 本文简单的练习,用 vue3 组件封装 input 组件和统一表单数据. 准备工作 用vue create example创建项目,参数大概如下: 用原生 input 原生的 input,主要是 value 和 change,数据在 change 的时候需要同步. App

随机推荐