在 Vue.js 3 中巧妙更新时间，焕然一新的动态显示

2024-01-28 08:45:24

前言

随着 Vue.js 3 的问世，一批令人振奋的新功能和特性闪亮登场。其中，组合式 API 的出现备受瞩目，因为它为组件创建提供了更加灵活和高效的方式。在本文中，我们将探索如何利用 Vue.js 3 的组合式 API 来实现时间实时更新，从而构建出更加生动、响应迅速的应用程序。

watchEffect：时间监视器

watchEffect 是 Vue.js 3 中引入的一个响应式函数，它允许我们监听一个或多个响应式值的变化，并在变化发生时执行特定的回调函数。在我们的案例中，我们将使用 watchEffect 来监听时间的变化，并在变化时更新组件中的时间显示。

ref：可变引用

ref 是 Vue.js 中的一个函数，它允许我们创建响应式引用值。在我们的案例中，我们将使用 ref 来创建一个响应式时间对象，该对象将存储当前时间。

Date API：时间的主人

JavaScript 中的 Date API 提供了广泛的方法和属性来操作和格式化日期和时间。我们将使用 Date 对象来获取当前时间并将其格式化为我们需要的格式。

实现

以下是使用 watchEffect、ref 和 Date API 在 Vue.js 3 中更新时间的示例代码：

<template>
  <div>
    <p>{{ formattedTime }}</p>
  </div>
</template>

<script>
import { ref, watchEffect } from 'vue'

export default {
  setup() {
    const time = ref(new Date())

    watchEffect(() => {
      time.value = new Date()
      formattedTime = time.value.toLocaleTimeString()
    })

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