vue3如何实现不用定时器和重绘

在 Vue 3 中，可以使用 `setup()` 函数和 `ref()` 函数来实现不使用定时器和重绘的实时更新时间显示。

以下是一个实现示例：

HTML 代码：

<div id="app">
  <div>{{ currentTime }}</div>
</div>

JavaScript 代码：

const { ref, getCurrentInstance } = Vue;

Vue.createApp({
  setup() {
    const currentTime = ref('');

    function updateTime() {
      const now = new Date();
      const year = now.getFullYear();
      const month = now.getMonth() + 1;
      const day = now.getDate();
      const hour = now.getHours();
      const minute = now.getMinutes();
      const second = now.getSeconds();
      const formattedTime = `${year}-${month}-${day}-${hour}:${minute}:${second}`;
      currentTime.value = formattedTime;

      const instance = getCurrentInstance();
      instance?.proxy?.$nextTick(updateTime); // 在下一次更新前更新时间
    }

    updateTime(); // 第一次更新时间

    return {
      currentTime,
    };
  },
}).mount('#app');

该代码将会在每次更新前更新时间显示，格式为“2023-6-10-10:53:4”。这里使用了 `getCurrentInstance()` 方法来获取当前组件实例，然后通过 `$nextTick()` 方法在下一次更新前更新时间显示。