「这是我参与2022首次更文挑战的第1天，活动详情查看：2022首次更文挑战」

前言

-- 最近在使用 Vue3.2+ 开发demo项目, 其中多次使用到了 VueUse 中的方法, 然后忍不住向大家推荐它了

-- VueUse 是一个基于 Composition API 的实用函数集, 与 Composition API 的配合相得益彰

-- VueUse 的作者是 Anthony Fu , Core team member of Vue, Nuxt and Vite.

摘要

-- 本文主要介绍, 我在开发过程中, 用到的几个赞不绝口的方法. 同时也可以帮大家了解掌握 VueUse的使用方法.

-- 当然这篇文章也会持续更新的

-- 如果大家想了解更多, 请移步 VueUse 官方文档

进入主题

useTitle

作用: 修改项目的标题

它可以帮助你, 随时随地修改项目的标题

import { useTitle } from '@vueuse/core'

const title = useTitle()
console.log(title.value) // 拿到当前的标题
title.value = 'Hello' // 修改项目的标题

useVModels

作用: 优化父子组件数据的双向绑定

// 可以很好的实现父子组件数据的双向绑定
// 原用法
const emit = defineEmits(['update:modelValue', 'update:age'])
const changeInfo = () => {
// 触发父组件值更新
 emit('update:modelValue', 'Tom')
 emit('update:age', 30)
}


// 升级版
const { foo, bar } = useVModels(props)

console.log(foo.value) // props.foo
foo.value = 'foo' // emit('update:foo', 'foo')

useWindowScroll

作用: 你可以拿到响应式的滚动距离

import { useWindowScroll } from '@vueuse/core'

const { x, y } = useWindowScroll() // 拿到的 x, y都是响应式的

useIntersectionObserver

作用: 判断一个元素是否在视口(viewport)中; 或者说 判断一个元素是否在可见区域

关键点: stop -- 可以停止观测, target -- 被观测的元素, isIntersecting -- 表示是否可见, 第二个参数是回调方法

应用: 懒加载

// stop 是一个函数，可以停止观察
const { stop } = useIntersectionObserver(
      // 第一个参数是 target， 为要监听的元素
      target,
      // 第二个参数是回调方法，isIntersecting 表示是否可见
      ([{ isIntersecting }]) => {
        console.log(isIntersecting ? '可见' : '不可见')
      },
}

useIntervalFn

作用: 定时器的优化

import { useIntervalFn } from '@vueuse/core'

const { pause, resume, isActive } = useIntervalFn(() => {
  /* your function */
}, 1000)

// pause 停止定时器
// resume 开启定时器
// isActive 定时器是否在进行中, 在进行中为 true, 反之 false

demo 你可以很简单的实现一个倒计时组件

<template> 
<span
   class="code"
   v-if="!isActive"
   @click="sendCode"
   >发送验证码</span
  >
  <span class="code" v-else>{{ time }} 秒后可再次发送</span>
</template> 

<script setup>
import { ref, watch } from 'vue'
import { useIntervalFn } from '@vueuse/core'

// 倒计时组件
const time = ref(10)

const { pause, resume, isActive } = useIntervalFn(() => {
  time.value--
}, 1000)

// -初始化组件时关闭
pause()

// -何时关闭
watch(time, () => {
  if (time.value === 0) {
    pause()
  }
})

// -点击开始
const sendCode = () => {
  resume()
}
</script>