Vue3 第二十五篇：VueUse

1.安装

npm i @vueuse/core

2.VueUse 中的大多数函数都会返回一个refs 对象，您可以使用ES6 的对象解构语法来获取您需要的内容{} ，如果觉得refs对象需要x.value，太麻烦，就用reactive()包裹一下

import { useMouse } from '@vueuse/core'

// "x" and "y" are refs
const { x, y } = useMouse()

console.log(x.value)

const mouse = useMouse()

console.log(mouse.x.value)

import { reactive } from 'vue'
import { useMouse } from '@vueuse/core'

const mouse = reactive(useMouse())

// "x" and "y" will be auto unwrapped, no `.value` needed
console.log(mouse.x)
import { reactive } from 'vue'
import { useMouse } from '@vueuse/core'

const mouse = reactive(useMouse())

// "x" and "y" will be auto unwrapped, no `.value` needed
console.log(mouse.x)

 

3.使用示例：实时检测鼠标坐标

import { useLocalStorage, useMouse, usePreferredDark } from '@vueuse/core'

const { x, y } = useMouse()



const Page = () => {
    return (
        <>
            <div>
                <h1>X坐标：{x.value}</h1>
                <h1>Y坐标：{y.value}</h1>
            </div>
        </>

    )
}
export default Page