VueUse常见方法使用

VueUse常见方法使用

---

一、安装

1、命令安装

npm i @vueuse/core

2、CDN引入

<script src="https://unpkg.com/@vueuse/shared"></script>
<script src="https://unpkg.com/@vueuse/core"></script>

二、常用方法

1、useLocalStorage、useSessionStorage、useStorage

localStorage/sessionStorage存储一个对象时，我们要自己给这个对象使用JSON.stringify进行序列化，现在使用useLocalStorage会根据我们传入的数据类型自动的给我们序列化

import { useLocalStorage } from '@vueuse/core';
const store = useLocalStorage("myStorage", {
  name: "lily",
  age: 11,
}); // 初始无值可设置为null

useStorage默认为localStorage，等同于如下

import { useStorage} from '@vueuse/core';
const store = useStorage("myStorage", {
  name: "lily",
  age: 11,
}); 

useSessionStorage：

import { useSessionStorage, useStorage} from '@vueuse/core';
const store = useSessionStorage("myStorage", {
  name: "lily",
  age: 11,
}); 
等同于
const store = useStorage('myStorage', {
  name: "lily",
  age: 11, 
}, sessionStorage)

2、useDebounceFn（防抖）

防抖是指当一个事件被触发后，在一定时间内如果该事件再次被触发，那么就会取消前一次的操作，重新开始计时。（防止在短时间内频繁触发事件导致页面性能下降）

<template>
  <div>
    <div>{{ counter }}</div>
    <button @click="addNum">add</button>
  </div>
</template>
<script lang="ts" setup>
import { useDebounceFn } from "@vueuse/core";
const counter = ref(0);
const handleAddFun = () => {
  counter.value += 1;
};
const addNum = useDebounceFn(handleAddFun, 300, { maxWait: 5000 });
</script>

3、useMouse（获取鼠标位置）

<template>
 <div>{{ x }}-{{ y }}</div>
</template>
<script lang="ts" setup>
import { useMouse } from "@vueuse/core";
const { x, y } = useMouse({
  type: "page",
  touch: true,
  resetOnTouchEnds: false,
  initialValue: {
    x: 100,
    y: 200,
  },
});
</script>

4、useFullscreen（全屏）

<template>
 <button @click="toggle">全屏</button>
</template>
<script lang="ts" setup>
const { isFullscreen, toggle } = useFullscreen();
</script>

5、useClipboard （剪切板功能）

<template>
 <div>
   <input v-model="input" type="text" />
   <button @click="copy(input)">Copy</button>
 </div>
</template>
<script lang="ts" setup>
import { useClipboard } from "@vueuse/core";
const input = ref("");
const { text, copy, isSupported } = useClipboard();
// text: 复制的内容; copy: 复制函数; isSupported: 当前的浏览器是否支持这个api
</script>

6、useColorMode（切换主题颜色）

<template>
	<div>
	  <div :class="mode" style="width: 40px; height: 40px"></div>
      <button @click="btn">切换主题色</button>
	</div>
</template>
<script lang="ts" setup>
import { useColorMode } from "@vueuse/core";
const mode = useColorMode();
const btn = () => {
  mode.value = mode.value === "light" ? "dark" : "light";
};
</script>
<style>
.light {
  background-color: #ccc;
}
.dark {
  background-color: #333;
}
</style>

7、useEventListener（监听事件）

useEventListener监听事件后，组件卸载时自动调用removeEventListener，不用担心注册多个事件而导致内存泄露的问题。

<template>
	<div>
	  div ref="element">useEventListener</div>
	</div>
</template>
<script lang="ts" setup>
import { useEventListener } from "@vueuse/core";
const element = ref(null);
useEventListener(element, "click", () => {
  console.log("监听点击事件");
});
</script>

8、useWindowSize（响应式获取窗口尺寸）

<template>
	<div>
	  <div>{{ width }}-{{ height }}</div>
	</div>
</template>
<script lang="ts" setup>
import { useWindowSize } from "@vueuse/core";
const { width, height } = useWindowSize();
</script>

9、useScriptTag（注入script标签）

<script lang="ts" setup>
import { useScriptTag } from '@vueuse/core';
import { onMounted } from 'vue';
const { load } = useScriptTag("https://api.map.baidu.com/getscript?v=3.0&ak=KSezYymXPth1DIGILRX3oYN9PxbOQQmU&services=&t=20210201100830&s=1A");
</script>
async function renderMap() {
  await load(true); // 等待地图加载完毕
  ...
}
onMounted(() => {
  renderMap();
});