标签:hooks screen vue3 height width mixin 使用 页面
vue3 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>
好了,我们保存看一下效果。
和之前是完全一样的。
好了这就是 hooks 的基本使用,注意啊,是基本使用,hooks 相关的东西很多,这里只是简单的是用,剩下的我们慢慢说。
今天到这儿,打卡收工!
标签:hooks,screen,vue3,height,width,mixin,使用,页面
来源: https://www.cnblogs.com/wjw1014/p/16539524.html
本站声明:
1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。