vue组合式写显示现在时间

可以使用 Vue 3 的组合式 API 来实现显示当前时间的功能。首先，我们需要在组合式 API 中使用 `ref` 来创建响应式的当前时间数据：

import { ref } from 'vue'

export default function useCurrentTime() {
  const currentTime = ref(new Date())

  setInterval(() => {
    currentTime.value = new Date()
  }, 1000)

  return {
    currentTime,
  }
}

然后，在组件中使用 `useCurrentTime` 组合函数来获取当前时间数据，并显示到页面上：

<template>
  <div>
    <p>当前时间：{{ currentTime }}</p>
  </div>
</template>

<script>
import { useCurrentTime } from '@/composables/useCurrentTime'

export default {
  setup() {
    const { currentTime } = useCurrentTime()

    return {
      currentTime,
    }
  },
}
</script>

这样，页面就可以实时显示当前时间了。需要注意的是，由于我们使用了 `setInterval` 来更新当前时间数据，所以在组件销毁时需要清除定时器，否则会造成内存泄漏。可以通过 `onUnmounted` 钩子函数来实现：

import { ref, onUnmounted } from 'vue'

export default function useCurrentTime() {
  const currentTime = ref(new Date())

  const timer = setInterval(() => {
    currentTime.value = new Date()
  }, 1000)

  onUnmounted(() => {
    clearInterval(timer)
  })

  return {
    currentTime,
  }
}