vue2/vue3 Composition Api 常用工具集， @vueuse/core 之核心函数 animation 实践

useInterval

响应式计数器增加

const options = {
  controls?: false,
  immediate?: true,
  callback?: (count: number) => void,
}

<script lang="ts" setup>
import { useInterval } from '@vueuse/core'

const counter = useInterval(200)
</script>

<template>
  <div class="use-interval">
    <p>{{ counter }}</p>
  </div>
</template>

带控制器配置，controls，默认值 false

设置 true，返回控制方法，重置、暂停、开始

const { counter, reset, pause, resume } = useInterval(200, { controls: true, })

是否初始启动

const { counter, reset, pause, resume } = useInterval(200, { controls: true, immediate: false })

回调事件

const { counter, reset, pause, resume } = useInterval(200, { controls: true, immediate: true, callback: () => {
  console.log('回调事件')
}})

useIntervalFn

useInterval 包装器

<script lang="ts" setup>
import { useIntervalFn } from '@vueuse/core'
import { ref } from 'vue'

// 倒计时封装
function useCountDown() {
  const counter = ref(0)
  const { pause, resume } = useIntervalFn(() => {
    counter.value--
    if (counter.value === 0) {
      pause() // 停止定时器
    }
  }, 1000, { immediate: false })

  const start = (n) => {
    counter.value = n
    resume() // 启动定时器
  }

  return { counter, start }
}

const { counter, start } = useCountDown()
</script>

<template>
  <div class="use-interval-fn">
    <h2>验证码倒计时</h2><br />
    {{ counter }}
    <button @click="start(60)">开始</button>
  </div>
</template>

useNow

响应式获取当前 Date 实例

<script lang="ts" setup>
import { useNow } from '@vueuse/core'

const { now, pause, resume } = useNow({ controls: true })
</script>

<template>
  <div class="use-now">
    {{ now }}
    <button @click="pause">pause</button>
    <button @click="resume">resume</button>
  </div>
</template>

useRafFn

requestAnimationFrame 上调用函数，可控制暂停和恢复

<script lang="ts" setup>
import { ref } from 'vue'
import { useRafFn } from '@vueuse/core'

const counter = ref(0)
const { pause, resume } = useRafFn(() => {
  counter.value++
})
</script>

<template>
  <div class="use-raf-fn">
    <button @click="pause()">pause</button>
    <button @click="resume()">resume</button>
    <p>{{ counter }}</p>
  </div>
</template>

useTimeout

定时间更新值

<script lang="ts" setup>
import { useTimeout } from '@vueuse/core'

const { ready, start, stop } = useTimeout(1000, { controls: true })
</script>

<template>
  <dvi class="use-timeout">
    {{ ready }}
    <button @click="start">Start</button>
    <button @click="stop">Stop</button>
  </dvi>
</template>

useTimeoutFn

setTimeout 包装器

<script lang="ts" setup>
import { useTimeoutFn } from '@vueuse/core'

const { isPending, start, stop } = useTimeoutFn(() => {

}, 3000)
</script>

<template>
  <dvi class="use-timeout-fn">
    {{ isPending }}
    <button @click="start">Start</button>
    <button @click="stop">Stop</button>
  </dvi>
</template>

useTimestamp

响应式获取当前时间戳

<script lang="ts" setup>
import { useTimestamp } from '@vueuse/core'

const { timestamp, pause, resume } = useTimestamp({ controls: true })
</script>

<template>
  <div class="use-timestamp">
    {{ timestamp }}
    <button @click="pause">pause</button>
    <button @click="resume">resume</button>
  </div>
</template>

useTransition

值之间的过度

<script lang="ts" setup>
import { ref } from 'vue'
import { useTransition, TransitionPresets } from '@vueuse/core'
  
const source = ref(0)
const output = useTransition(source, {
  duration: 1000,
  transition: TransitionPresets.easeInOutCubic
})

source.value = 10000
</script>

<template>
  <div class="use-transition">
    {{ output }}
  </div>
</template>