zqy233的前端学习笔记详细请查看官方文档https://vueuse.org/guide/
仅记录个人常用的hooks
useDark/useToggle
useDark
html是否有dark这个class类名，返回一个boolean变量
useToggle
切换一个boolean变量的值，结合useDark可以实现切换html的dark类名
js
<script setup>
const isDark = useDark()
const toggleDark = useToggle(isDark)
</script>
<template>
<div @click="toggleDark()">
切换主题
</div>
</template>
<script setup>
const isDark = useDark()
const toggleDark = useToggle(isDark)
</script>
<template>
<div @click="toggleDark()">
切换主题
</div>
</template>
useNow/useDateFormat
定时获取当前时间，并格式化
js
<script setup lang="ts">
import { useNow, useDateFormat } from '@vueuse/core'
const formatted = useDateFormat(useNow(), 'YYYY-MM-DD HH:mm:ss')
</script>
<template>
<div>{{ formatted }}</div>
</template>
<script setup lang="ts">
import { useNow, useDateFormat } from '@vueuse/core'
const formatted = useDateFormat(useNow(), 'YYYY-MM-DD HH:mm:ss')
</script>
<template>
<div>{{ formatted }}</div>
</template>
useStorage
存储localStorage的响应式变量
js
const flag = useStorage('my-flag', true)
const flag = useStorage('my-flag', true)