目录
hooks 特点
hooks 基本使用
首页 web前端 Vue.js Vue3项目中的hooks如何使用

Vue3项目中的hooks如何使用

May 14, 2023 am 11:01 AM
vue3 hooks

hooks 特点

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

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

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

hooks 基本使用

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

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

<template>
  <h4>hooks</h4>

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

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

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

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

</script>
<style scoped>

</style>
登录后复制

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

Vue3项目中的hooks如何使用

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

但是

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

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

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

Vue3项目中的hooks如何使用

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

Vue3项目中的hooks如何使用

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

import { reactive } from &#39;vue&#39;

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>
  <h4>hooks</h4>

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

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

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

  // 导入 hooks 
  import screenWH from &#39;../hooks/useScreenWh.js&#39;

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

</script>
<style scoped>

</style>
登录后复制

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

Vue3项目中的hooks如何使用

以上是Vue3项目中的hooks如何使用的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

vue3项目中怎么使用tinymce vue3项目中怎么使用tinymce May 19, 2023 pm 08:40 PM

tinymce是一个功能齐全的富文本编辑器插件,但在vue中引入tinymce并不像别的Vue富文本插件一样那么顺利,tinymce本身并不适配Vue,还需要引入@tinymce/tinymce-vue,并且它是国外的富文本插件,没有通过中文版本,需要在其官网下载翻译包(可能需要翻墙)。1、安装相关依赖npminstalltinymce-Snpminstall@tinymce/tinymce-vue-S2、下载中文包3.引入皮肤和汉化包在项目public文件夹下新建tinymce文件夹,将下载的

vue3+vite:src使用require动态导入图片报错怎么解决 vue3+vite:src使用require动态导入图片报错怎么解决 May 21, 2023 pm 03:16 PM

vue3+vite:src使用require动态导入图片报错和解决方法vue3+vite动态的导入多张图片vue3如果使用的是typescript开发,就会出现require引入图片报错,requireisnotdefined不能像使用vue2这样imgUrl:require(’…/assets/test.png’)导入,是因为typescript不支持require所以用import导入,下面介绍如何解决:使用awaitimport

Vue3如何实现刷新页面局部内容 Vue3如何实现刷新页面局部内容 May 26, 2023 pm 05:31 PM

想要实现页面的局部刷新,我们只需要实现局部组件(dom)的重新渲染。在Vue中,想要实现这一效果最简便的方式方法就是使用v-if指令。在Vue2中我们除了使用v-if指令让局部dom的重新渲染,也可以新建一个空白组件,需要刷新局部页面时跳转至这个空白组件页面,然后在空白组件内的beforeRouteEnter守卫中又跳转回原来的页面。如下图所示,如何在Vue3.X中实现点击刷新按钮实现红框范围内的dom重新加载,并展示对应的加载状态。由于Vue3.X中scriptsetup语法中组件内守卫只有o

Vue3怎么解析markdown并实现代码高亮显示 Vue3怎么解析markdown并实现代码高亮显示 May 20, 2023 pm 04:16 PM

Vue实现博客前端,需要实现markdown的解析,如果有代码则需要实现代码的高亮。Vue的markdown解析库有很多,如markdown-it、vue-markdown-loader、marked、vue-markdown等。这些库都大同小异。这里选用的是marked,代码高亮的库选用的是highlight.js。具体实现步骤如下:一、安装依赖库在vue项目下打开命令窗口,并输入以下命令npminstallmarked-save//marked用于将markdown转换成htmlnpmins

怎么使用vue3+ts+axios+pinia实现无感刷新 怎么使用vue3+ts+axios+pinia实现无感刷新 May 25, 2023 pm 03:37 PM

vue3+ts+axios+pinia实现无感刷新1.先在项目中下载aiXos和pinianpmipinia--savenpminstallaxios--save2.封装axios请求-----下载js-cookienpmiJS-cookie-s//引入aixosimporttype{AxiosRequestConfig,AxiosResponse}from"axios";importaxiosfrom'axios';import{ElMess

Vue3复用组件怎么使用 Vue3复用组件怎么使用 May 20, 2023 pm 07:25 PM

前言无论是vue还是react,当遇到多处重复代码的时候,我们都会想着如何复用这些代码,而不是一个文件里充斥着一堆冗余代码。实际上,vue和react都可以通过抽组件的方式来达到复用,但如果遇到一些很小的代码片段,你又不想抽到另外一个文件的情况下,相比而言,react可以在相同文件里面声明对应的小组件,或者通过renderfunction来实现,如:constDemo:FC=({msg})=>{returndemomsgis{msg}}constApp:FC=()=>{return(

Vue3中怎么实现选取头像并裁剪 Vue3中怎么实现选取头像并裁剪 May 29, 2023 am 10:22 AM

最终效果安装VueCropper组件yarnaddvue-cropper@next上面的安装值针对Vue3的,如果时Vue2或者想使用其他的方式引用,请访问它的npm官方地址:官方教程。在组件中引用使用时也很简单,只需要引入对应的组件和它的样式文件,我这里没有在全局引用,只在我的组件文件中引入import{userInfoByRequest}from'../js/api'import{VueCropper}from'vue-cropper&

vue3项目打包发布到服务器后访问页面显示空白怎么解决 vue3项目打包发布到服务器后访问页面显示空白怎么解决 May 17, 2023 am 08:19 AM

vue3项目打包发布到服务器后访问页面显示空白1、处理vue.config.js文件中的publicPath处理如下:const{defineConfig}=require('@vue/cli-service')module.exports=defineConfig({publicPath:process.env.NODE_ENV==='production'?'./':'/&

See all articles