vue3使用中的笔记（自用）

常用的一些api总会忘记，在此记录方便查找

@vueuse/core

import {useClipboard} from "@vueuse/core"

1. useState 状态管理 创建和管理局部状态。
2. useStorage：在 localStorage 或 sessionStorage 中存储和同步状态。
3. useMouse：获取鼠标位置  

       const {x,y} = useMouse(); //获取到该点的x y坐标

4. useTitle：动态设置文档标题。
5. useFavicon：动态设置网页的 favicon。
6. useFetch：进行 HTTP 请求。
7. useWebSocket：使用 WebSocket 进行实时通信。
8. useInterval：定时器
9. useTimeout：延时器。
10. useTransition：处理过渡效果。
11. useSpring：实现弹簧动画。
12. useDebounce：防抖函数。
13. useThrottle：节流函数。
14. 监听鼠标按下 useMousePressed()

    <script setup>
    const { pressed } = useMousePressed()
    </script>
    
    <template>
      <p>{{ pressed }}</p>
    </template>

15. 获取鼠标选择的文字 useTextSelection() 

    <script setup>
    const state = useTextSelection()
    </script>
    
    <template>
      <p>一段供鼠标选择的文字</p>
      <p>被鼠标选择的文字是：{{ state.text }}</p>
    </template>

16. // 获取滚动条坐标 const { x, y } = useWindowScroll({ behavior: 'smooth' })
17. 元素滚动条 useScroll()  const el = ref<HTMLElement | null>(null) const { x, y, isScrolling, arrivedState, directions } = useScroll(el)
18. useClipboard  //复制到剪贴板 

    <script setup lang="ts">
    const { copy, copied, isSupported, text } = useClipboard()
    //copy 复制的方法
    //copied 是否完成复制
    //isSupported 浏览器是否支持复制到剪贴板
    //text 复制到剪贴板的内容
    
    let msg = '你好'
    
    async function doCopy() {
      copy(msg)
    
      if (copied) {
        alert('已复制到剪贴板！')
      }
    }
    </script>
    
    <template>
      <div class="p-20">
        <p>{{ msg }}</p>
        <p v-if="text">已复制到剪贴板的内容：{{ text }}</p>
        <button v-if="isSupported" @click="doCopy">复制</button>
      </div>
    </template>

19. 暂停代码执行 promiseTimeout 

    import { promiseTimeout } from '@vueuse/core'
    async function print() {
      // 开启 console 的默认计时器
      console.time()
    
      // 打印当前 console默认计时器 的时间
      console.timeLog()
    
      // 等待1s后执行
      await promiseTimeout(1000)
    
      // 打印当前 console默认计时器 的时间
      console.timeLog()
    }
    print()

20. 获取联网信息 useNetwork()  

    const { isOnline, offlineAt, downlink, downlinkMax, effectiveType, saveData, type } = useNetwork()

21. 判断是否联网 useOnline() 

    const online = useOnline()