1. useStorage(key, value): 响应式的LocalStorage

   // 初始化 useLocalStorage，传入 key 和默认值
   const storedValue = useStorage('my-key', 'default-value');// 监听存储值的变化
   watch(storedValue, (newValue, oldValue) => {console.log('存储值从', oldValue, '变更为', newValue);
   });
   

2. 获取当前聚焦的元素

   const activeElement = useActiveElement()watch(activeElement, (el) => {console.log('当前活动元素是', el)
   })
   

3. 记录Ref的变化，并且可以撤销和重做

   const counter = ref(0)
   const { history, undo, redo } = useRefHistory(counter)
   

4. 监听页面显示隐藏

   const visibility = useDocumentVisibility()
   watch(visibility, (newValue, oldValue) => {console.log('文档可见性从', oldValue, '变更为', newValue)
   })
   

5. 监听具体元素的拖动

   const el = ref<HTMLElement | null>(null)// `style` 将作为 `left: ?px; top: ?px;` 的辅助计算属性
   const { x, y, style } = useDraggable(el, {initialValue: { x: 40, y: 40 },
   })
   

6. 检测目标元素的可见性。

   const target = ref(null)const { stop } = useIntersectionObserver(target,([{ isIntersecting }], observerElement) => {if (isIntersecting ) {// 可见} else {// 不可见}},
   )
   

7. 监听鼠标事件

   const target = ref(null)const { x, y, isOutside } = useMouseInElement(target)
   

8. 获取当前的响应式窗口大小

   const { width, height } = useWindowSize()
   

9. 获取蓝牙API

   const {isSupported,isConnected,device,requestDevice,server,
   } = useBluetooth({acceptAllDevices: true,
   })
   

10. 剪贴板：useClipboard
11. 打开取色器：

    const { isSupported, open, sRGBHex } = useEyeDropper()
    

12. 插入div和样式

    const {id,css,load,unload,isLoaded,
    } = useStyleTag('.foo { margin-top: 32px; }')
    

13. 根据内容自动更新 textarea 的高度。

    <script setup lang="ts">
    const { textarea, input } = useTextareaAutosize()
    </script><template><textarearef="textarea"v-model="input"class="resize-none"placeholder="想说点什么？"/>
    </template>
    

14. 设备震动

    // 这会让设备振动 300 毫秒
    // 然后在振动设备另外 300 毫秒之前暂停 100 毫秒：
    const { vibrate, stop, isSupported } = useVibrate({ pattern: [300, 100, 300] })// 开始振动，当模式完成时，它将自动停止：
    vibrate()// 但是如果你想停止它，你可以：
    stop()
    

15. 监听点击事件

const target = ref(null)onClickOutside(target, event => console.log(event))

16. 监听键盘

onKeyStroke('ArrowDown', (e) => {e.preventDefault()
})

17. 监听长按事件：onLongPress