Vue3项目中的hooks的使用教程

目录
  • hooks 特点
  • hooks 基本使用

今天我们稍微说一下 vue3 项目中的 hooks 的使用，其实这个 hooks 呢是和 vue2 当中的 mixin 是类似的，学习过 vue2 的小伙伴一定对 mixin 一定比较熟悉，就算没用过也一定了解过，也就是混入，通过 mixin 混入来分发 vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。而 vue2 的 hooks 函数与 mixin 混入的区别，主要是 hooks 是函数。

hooks 特点

vue3 中的 hooks 函数相当于 vue2 里面的 mixin 混入，不同在于 hooks 是函数。

vue3 中的 hooks 函数可以提高代码的复用性，能够在不同的组件当中都利用 hooks 函数。

hooks 函数可以与 mixin 连用，但是不建议。

hooks 基本使用

首先我们不管 hooks 哈，我们先写一个小功能，就是获取页面的宽高值，这个是讲解 hooks 的常用案例了，都是老演员了，我们也来整一个。

我不啰嗦了，直接写代码吧。

<template>
  <h3>hooks</h3>

  <p>页面宽度: {{screen.width}}</p>
  <p>页面高度: {{screen.height}}</p>

  <el-button @click="getWH">获取页面的宽高</el-button>
</template>
<script setup>
  import { reactive } from 'vue'

  const screen = reactive({
    width: 0,
    height: 0
  })

  const getWH = () => {
    screen.width = document.documentElement.clientWidth
    screen.height = document.documentElement.clientHeight
  }

</script>
<style scoped>

</style>

上面的代码其实很简单了就，有两个标签，显示可视页面的长度和宽度，然后有一个按钮获取最新的长宽进行显示。

这个功能是可以顺利实现的哈。如果我们需要在另一个页面也想实现这个功能的话，也很简单，在直接把上面的代码复制一下到另一个需要实现的页面就可以了。

但是

有没有发现一个问题，就是一个页面需要就复制一遍，一个页面需要就复制一遍，如果有一百个页面就复制一百遍，代码一两行还好，如果是一个超级庞大的工具类，那么在像这样实现的话，是不是就过于复杂了，而且还不好实现，那这个问题怎么解决呢？啊哈哈哈哈，没错了宝子们，就是 hooks 。

我们针对上面的案例，我们使用 hooks 简单的实现一下。

首先，我们在 src 文件夹下创建一个 hooks 文件夹。

在 hooks 文件夹下创建一个文件，名字就叫做 useScreenWh.js 文件

接下来就很简单了，我们把获取可视化界面的代码放进这个 js 文件，然后导出去，给其他页面使用就可以了。

import { reactive } from 'vue'

export default function () {  // 导出一个默认方法

  // 创建一个对象，保存宽度和高度值
  const screen = reactive({
    width: 0,
    height: 0
  })

  // 创建一个方法，获取可视化界面的宽度和高度值
  const getWH = () => {
    screen.width = document.documentElement.clientWidth
    screen.height = document.documentElement.clientHeight
  }

  return { screen, getWH }  // 方法返回宽高值
}

然后在需要使用 hooks 的文件引入就可以使用了。

<template>
  <h3>hooks</h3>

  <p>页面宽度: {{screen.width}}</p>
  <p>页面高度: {{screen.height}}</p>

  <el-button @click="getWH">获取页面的宽高</el-button>

</template>
<script setup lang="ts">

  // 导入 hooks
  import screenWH from '../hooks/useScreenWh.js'

  // 因为 screenWH 是一个导出的方法，所以需要调用一下子，然后顺便解构一下就可以在模板使用了。
  let { screen, getWH } = screenWH()

</script>
<style scoped>

</style>

好了，我们保存看一下效果。

和之前是完全一样的。

到此这篇关于Vue3项目中的hooks的使用教程的文章就介绍到这了,更多相关Vue3 hooks内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Hooks对于Vue作用意义详解

    Hooks对于Vue作用意义详解

    目录 前言 问题背景 Vue Hooks 传递状态 来源清晰 小结 前言 本篇主体译自:https://css-tricks.com/what-hooks-mean-for-vue/ 作者:Sarah Drasner OS:虽然这是一篇 19 年 4 月的文章,但是对于 Hooks 说的非常清晰,作者也是请到尤大进行了原文的订正,对于了解 Vue Hooks 的设计及发展,还是有很好的阅读性的. 本文要谈到的 Hooks,不同于 Lifecycle Hooks(生命周期钩子),它是在 v16.7

  • Vue3编程流畅技巧自定义Hooks

    Vue3编程流畅技巧自定义Hooks

    目录 Vue3自定义Hooks让写Vue3更畅快 Vue3自定义Hooks定义: 为什么Vue3要用自定义Hook?: 写Vue3请摆脱Vue2无脑this的思想: 几张动图复习Composition Api的好 Composition Api解耦Vue2 Option Api实现低耦合高内聚 定义一下Vue3的自定义Hook: 实例: Vue3自定义Hooks和Vue2时代Mixin关系: 1.Mixin难以追溯的方法与属性 2.无法向Mixin传递参数来改变逻辑 3.Mixin同名变量会被覆

  • 深度了解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不可控,逻辑分散,不

  • vue3-HOOKS模块化处理方式

    目录 vue3模块化处理 vue hooks理解与使用 demo源码示意 vue3模块化处理 vue3版本的更新,就是能搞更好的重用机制,可以把想要得模块独立出去 eg:显示一个当前时间的工能,在多个页面需要调用的时候不用重复的调用 可以在src目录下,新建一个文件夹hooks(所有抽离出来的功能模块都可以放到这个文件夹里), 然后再新建一个文件useNowTime.js,这里使用use开头是一个使用习惯,代表是一个抽离出来的模块 import { ref } from "vue";

  • vue3自定义hooks/可组合函数方式

    目录 自定义hooks/可组合函数 1.mixins方式的痛点 2.传统mixins方式示例 3.自定义hooks方式示例 vue3(hooks) 自定义hooks/可组合函数 vue3 composition api下mixins的替代方式(自定义hooks / 可组合函数) 传统方式下封装的mixins在引入文件里都是通过this来调用属性或方法, 而在vue3的composition API下this是undefined,实际上这两者就是冲突的, 只能封装一套全新的方式来使用类似mixin

  • vue3中的hooks总结

    vue3中的hooks总结

    目录 vue3的hooks总结 计数器的hook vue3自定义hooks vue3的hooks总结 vue3中的hooks其实是函数的写法,就是将文件的一些单独功能的js代码进行抽离出来,放到单独的js文件中.这样其实和我们在vue2中学的mixin比较像.下面我们总结一下如何去书写hooks. 首先应该先建立一个hooks文件夹:其目的是为了存放hook文件. 建立相关的hook文件:一般使用use开头. 计数器的hook useTitle的hooks useScrollPostion用来监

  • Vue3项目中的hooks的使用教程

    Vue3项目中的hooks的使用教程

    目录 hooks 特点 hooks 基本使用 今天我们稍微说一下 vue3 项目中的 hooks 的使用,其实这个 hooks 呢是和 vue2 当中的 mixin 是类似的,学习过 vue2 的小伙伴一定对 mixin 一定比较熟悉,就算没用过也一定了解过,也就是混入,通过 mixin 混入来分发 vue 组件中的可复用功能.一个混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项.而 vue2 的 hooks 函数与 mixin 混入的区别,

  • vue3项目中引入ts的详细图文教程

    vue3项目中引入ts的详细图文教程

    目录 1.基于脚手架的情况下创建 vue3项目 2.启动未引入ts的vue3项目 3.在页面中(HomeView.vue)引入ts 4.配置vue3+ts项目 5.其他配置 6.在HomeView.vue 使用Ts语法 总结 提示:文章是基于vue3的项目基础上引入ts 1.基于脚手架的情况下创建 vue3项目 vue create vue3-ts 选择自定义预设,ts设置未选中状态 选择yarn与npm启动项目(根据个人,在这里我选择yarn) 2.启动未引入ts的vue3项目 3.在页面中(

  • Vue3项目中优雅实现微信授权登录的方法

    Vue3项目中优雅实现微信授权登录的方法

    目录 前言 准备 实现思路 上代码 总结 前言 微信授权登录是做微信公众号开发一直绕不开的话题,而且整个授权登录流程的实现,是需要前后端配合一起完成的.在过去前后端还未分离的年代,也许我们前端并不需要太过关心授权的具体实现.然而现在都2021年了,前后端分离的架构大行其道,如何在前后端分离的情况下实现微信授权登录就成了今天要探讨的重点问题. 准备 首先,我们还是需要先梳理下微信授权整个流程是怎样的,这里我就直接将官方文档搬来: 如果用户在微信客户端中访问第三方网页,公众号可以通过微信网页授权机制

  • 最新MySql8.27主从复制及SpringBoot项目中的读写分离实战教程

    最新MySql8.27主从复制及SpringBoot项目中的读写分离实战教程

    目录 最新MySql8.27主从复制以及SpringBoot项目中的读写分离实战 1.MySql主从复制 2.配置-主库Master 3.配置-从库Slave 3.主从复制测试 4.读写分离案例 4.1.Sharding-JDBC框架介绍 最新MySql8.27主从复制以及SpringBoot项目中的读写分离实战 1.MySql主从复制 MySQL主从复制是一个异步的复制过程,底层是基于MySQL1数据库自带的二进制日志功能.就是一台或多台MySQL数据库(slave,即从库)从另一台ySQL数

  • vue3项目中代码出现红色波浪线的问题及解决

    vue3项目中代码出现红色波浪线的问题及解决

    目录 vue3项目代码出现红色波浪线 vue3没有语法错误但一直有红色波浪线报错,以及解决eslint黄色警告 vue3项目代码出现红色波浪线 最近换电脑改成了vue3,导致代码规则有些地方和之前不一样. 因为是导入的jeecg项目,打开了eslint,所以有很多地方代码的写法不一样,之前是在vue.config.js文件中,加上lintOnSave: false就可以避免报错.现在设置了false,代码不规范的地方还是会有红色波浪线. 可以打开文件-首选项-设置,搜索eslint 然后把两个打

  • React中的Hooks进阶理解教程

    目录 Hooks进阶 useState - 回调函数的参数 useEffect - 清理副作用 useEffect - 发送网络请求 useRef useContext Hooks进阶 useState - 回调函数的参数 使用场景 参数只会在组件的初始渲染中起作用,后续渲染时会被忽略.如果初始 state 需要通过计算才能获得,则可以传入一个函数,在函数中计算并返回初始的 state,此函数只在初始渲染时被调用 语法 const [name, setName] = useState(()=>{

  • vue项目中使用AvueJs的详细教程

    目录 一.背景 二.项目中的运用 1.引入 2.table(avue-crud)的使用 三.使用想法 Avue是基于Vue.js和element的快速开发框架 它的核心是数据驱动UI的思想,让我们从繁琐的crud开发中解脱出来,它的写法类似easyUI,但是写起来比easyui更容易,因为它是基础数据双向绑定以及其他vue的特性.同时不知局限于crud,它还有我们经常用的一些组件例如,表单,数据展示卡,人物展示卡等,更多的组件还在开发. Avue.js是基于现有的element-ui库进行的二次

  • iOS App项目中引入SQLite数据库的教程

    iOS App项目中引入SQLite数据库的教程

    引入SQLite sqlite是纯C实现的,所以注定了它是一个跨平台利器,在Android与IOS下均能使用,而且完全可以写出通用的代码,方便我们移植.当然Android和IOS下都有封装过的sqlite给开发者使用,不过这样子一个是不方便移植,另一个是封装后的效率咋样我们也不知道,所以还是原生态的最健康.最后一个重要的原因就是原生的使用也是相当简单.我将在接下来的教程中为您一一讲解. 首先最重要的一点是在工程中导入sqlite,苹果的SDK已经给你包含进来了,所以只要导入一个叫 libsqli

  • Vue3项目中引用TS语法的实例讲解

    Vue3项目中引用TS语法的实例讲解

    目录 基础语法 vue-router vuex##### elementPlus axios setup script 基础语法 定义data  //script标签上 **lang="ts"** <script lang="ts"> import { defineComponent, reactive, ref, toRefs } from 'vue'; //定义一个类型type或者接口interface来约束data type Todo = {  

  • vue cli3 项目中如何使用axios发送post请求

    vue cli3 项目中如何使用axios发送post请求

    目录 使用axios发送post请求 首先需要安装对应的第三方包 发送post请求 发送get请求将index.js中再添加如下代码 vue使用axios的踩坑记录 axios跨域 解决方法 axios发起post请求后端无法接收数据 使用axios发送post请求 react  同样适用 首先需要安装对应的第三方包 cnpm  i  -S axios cnpm  i  -S lodash 然后在做下边的 在vue 项目中创建一个这样的文件目录 发送post请求 index.js中的文件内容是:

随机推荐