vue新玩法VueUse工具库具体用法@vueuse/core详解
作者：渣男语录 发布时间：2023-07-02 16:55:44
VueUse官方链接
一、什么是VueUse
VueUse不是Vue.use，它是为Vue 2和3服务的一套Vue Composition API的常用工具集，是目前世界上Star最高的同类型库之一。它的初衷就是将一切原本并不支持响应式的JS API变得支持响应式，省去程序员自己写相关代码。
VueUse 是一个基于 Composition API 的实用函数集合。通俗的来说，这就是一个工具函数包支持了更好的逻辑分离，它可以帮助你快速实现一些常见的功能，免得你自己去写，解决重复的工作内容。以及进行了机遇 Composition API 的封装。
VueUse不是Vue.use ！！！它是一个基于 Composition API 的实用函数集合，下面是具体的一些用法
二、如何引入
import { 具体方法 } from ‘@vueuse/core’
三、下面来看看一些具体的用法
1、useMouse：监听当前鼠标坐标的一个方法，他会实时的获取鼠标的当前的位置
2、usePreferredDark：判断用户是否喜欢深色的方法，他会实时的判断用户是否喜欢深色的主题
3、useLocalStorage：数据持久化到本地存储中 例子：
useLocalStorage(
‘my-storage',
{
name: ‘author',
},
)
4、throttleFilter：节流 throttleFilter(100)
5、debounceFilter：防抖 debounceFilter(100)
6、OnClickOutside：在点击元素外部时触发一个回调函数
**注意：**这里的 OnClickOutside 函数是一个组件，不是一个函数。需要package.json 中安装了 @vueuse/components。
import { OnClickOutside } from '@vueuse/components'
function close () {
/* ... */
}
</script>
<template>
<OnClickOutside @trigger="close">
<div>
Click Outside of Me
</div>
</OnClickOutside>
</template>
7、全局状态共享的函数
createGlobalState
useStorage
8、其他具体的方法可以看文档：例如 until 等的运用
来源：https://blog.csdn.net/qq_37174991/article/details/124092020
0
投稿猜你喜欢
时间序列是指在一段时间内发生的任何可量化的度量或事件。尽管这听起来微不足道，但几乎任何东西都可以被认为是时间序列。一个月里你每小时的平均心率- 用户输入1、使用input来等待用户输入。如 username = input('username:') password
- 方法一 <％dim total(7,3) total(1,0)="ASP之家"&n
- 网上资料结合自己的操作整理出的一套靠谱的彻底卸载Oracle 11g的步骤！（Win7），具体内容详情如下所示：1：停掉所有Oracle相关
- 本文讲述了Symfony核心类。分享给大家供大家参考，具体如下：Symfony的核心类Symfony的MVC方式使用了一些你以后会经常碰到的
- 问题描述： echarts柱状堆叠图，是很常用的图表，官网的例子很简单 。图例（legend），x轴（xAxis）都是
- jQuery的选择器是CSS 1-3，XPath的结合物。jQuery提取这二种查询语言最好的部分，融合后创造出了最终的jQuery表达式查
- 在IE下测试，发现最大值是：18014398509481984（0x40000000000000）另外发现一个奇怪的问题：JS世界居然不存在
- 1 DataFramePandas=panel+data+analysis专门用于数据挖掘的开源Python库以Numpy为基础，借力Num
- 为什么需要协程协程的本质是将一段数据的运行状态进行打包，可以在线程之间调度，所以协程就是在单线程的环境下实现的应用程序级别的并发，就是把本来
- 这篇文章主要介绍了如何使用python3获取当前路径及os.path.dirname的使用,文中通过示例代码介绍的非常详细，对大家的学习或者
- 前言Go 1.3 的sync包中加入一个新特性：Pool。这个类设计的目的是用来保存和复用临时对象，以减少内存分配，降低CG压力。type
- 我们对 DataFrame 进行选择，大抵从这三个层次考虑：行列、区域、单元格。其对应使用的方法如下：一. 行，列 --> df[]二
- 1. Map 使用时需要注意哪些问题?Map 的键必须是可比较的类型，如整数、字符串和指针等，但是切片、函数和结构体等类型是不可比较的，因此
- 前言多表查询，也称为关联查询，指两个或更多个表一起完成查询操作。前提条件：这些一起查询的表之间是有关系的（一对一、一对多），它们之间一定是有
- 1-删除模型变量del model_define2-清空CUDA cachetorch.cuda.empty_cache()3-步骤2（异步
- pytorch读取图像数据转成opencv格式方法：先转成numpy通用的格式，再将其转换成opencv格式。pytorch读取的数据使用l
- 一、数字类型。数字类型按照我的分类方法分为三类：整数类、小数类和数字类。 我所谓的“数字类”，就是指DECIMAL和NUMERIC，它们是同
- WTForms 是用于web开发的灵活的表单验证和呈现库，它可以与您选择的任何web框架和模板引擎一起工作，并支持数据验证、CSRF保护、国
- Flask数据模型和连接数据库flask是基于MTV的结构，其中M指的就是模型，即数据模型，在项目中对应的是数据库。flask与数据库建立联
