Vue中的时间基响应性（Time-Based Reactivity）：利用`performance.now()`实现状态依赖于时间流逝

Vue 中的时间基响应性：利用 performance.now() 实现状态依赖于时间流逝

各位同学，今天我们来聊聊一个比较有趣的 Vue 响应式编程的进阶话题：时间基响应性。 很多时候，我们的应用不仅仅需要对用户的交互事件或者后端数据的变化做出响应，还需要能够根据时间的流逝来动态地更新界面或者执行某些逻辑。 传统的 Vue 响应式系统主要依赖于数据驱动，而时间基响应性则将时间的维度引入到状态管理中，赋予了应用更强的动态表现力。

我们今天主要会探讨以下几个方面：

1. 为什么需要时间基响应性？ 常见的应用场景分析。
2. performance.now() 的作用： 精准的时间戳获取。
3. Vue 实现时间基响应性的几种方法：
   • setInterval + ref。
   • requestAnimationFrame + ref。
   • useNow 组合式函数。
4. 复杂动画与状态同步： 如何控制动画的进度与状态。
5. 性能优化： 避免不必要的渲染。
6. 注意事项与最佳实践。

1. 为什么需要时间基响应性？

在传统的 Vue 应用开发中，我们通常通过用户交互（如点击、输入）或者后端数据更新来触发状态的改变，进而更新 UI。 但是，有些场景下，我们需要 UI 的变化与时间本身相关联。 举几个例子：

• 进度条： 一个文件上传的进度条，需要随着时间的推移而增长，即使没有新的数据传输。
• 倒计时： 一个活动倒计时，需要实时显示剩余时间。
• 动画： 某些动画效果（如淡入淡出、位移）需要根据时间来控制动画的进度和状态。
• 游戏： 游戏中的角色移动、动画播放、时间限制等都依赖于时间流逝。
• 数据可视化： 实时数据图表，数据的更新频率是固定的，需要定时刷新图表。

以上这些场景，都需要我们能够获取当前时间，并根据时间的变化来更新 Vue 的响应式状态。 时间基响应性的核心在于，它允许我们创建一个与时间同步的状态，这个状态的变化会触发 Vue 的响应式更新，从而实现动态的 UI 效果。

2. performance.now() 的作用：精准的时间戳获取

在 JavaScript 中，我们通常使用 Date.now() 来获取当前时间戳。 但是，Date.now() 的精度较低，通常只有几毫秒的精度，这对于需要高精度的时间基动画或者游戏来说是不够的。

performance.now() 方法返回一个高精度的时间戳，它表示从页面加载开始到当前时刻所经过的时间，单位是毫秒。 performance.now() 的精度通常在微秒级别，比 Date.now() 更高，更适合用于时间基动画和游戏开发。

// 获取当前时间戳 (Date.now)
const now1 = Date.now();
console.log("Date.now():", now1);

// 获取当前时间戳 (performance.now)
const now2 = performance.now();
console.log("performance.now():", now2);

// 测量代码执行时间
const start = performance.now();
for (let i = 0; i < 1000000; i++) {
    // 一些计算
}
const end = performance.now();
console.log(`循环执行时间: ${end - start} ms`);

performance.now() 的优点：

• 高精度： 提供微秒级别的时间精度。
• 单调递增： 保证时间戳是单调递增的，即使系统时间被调整，也不会影响 performance.now() 的结果。
• 相对时间： 返回的是相对于页面加载开始的时间，避免了时区和日期变化的影响。

在后面的代码示例中，我们都会使用 performance.now() 来获取时间戳，以保证时间的精度。

3. Vue 实现时间基响应性的几种方法

接下来，我们来探讨几种在 Vue 中实现时间基响应性的方法。

3.1. setInterval + ref

这是最简单直接的方法，使用 setInterval 定时器来更新一个 ref 变量，然后将这个 ref 变量绑定到 UI 上。

<template>
  <div>
    <p>Current time: {{ currentTime }}</p>
    <p>Elapsed time: {{ elapsedTime }} ms</p>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const currentTime = ref(new Date().toLocaleTimeString());
const startTime = performance.now();
const elapsedTime = ref(0);
let intervalId;

onMounted(() => {
  intervalId = setInterval(() => {
    currentTime.value = new Date().toLocaleTimeString();
    elapsedTime.value = Math.floor(performance.now() - startTime);
  }, 100); // 每 100 毫秒更新一次
});

onUnmounted(() => {
  clearInterval(intervalId); // 组件卸载时清除定时器
});
</script>

这个例子中，我们使用 setInterval 每 100 毫秒更新一次 currentTime 和 elapsedTime 两个 ref 变量。 currentTime 显示当前时间，elapsedTime 显示从组件挂载到当前时刻所经过的时间。

优点：

• 简单易懂，容易上手。

缺点：

• 精度不高，setInterval 的定时器精度受到浏览器和系统调度的影响，实际执行时间可能不准确。
• 可能会出现卡顿，当浏览器繁忙时，setInterval 的回调函数可能会被延迟执行，导致 UI 出现卡顿。
• 需要手动清除定时器，否则可能会导致内存泄漏。

适用场景：

• 对时间精度要求不高，且 UI 更新频率较低的场景。

3.2. requestAnimationFrame + ref

requestAnimationFrame 是浏览器提供的一个 API，用于在浏览器下一次重绘之前执行一个回调函数。 requestAnimationFrame 的优点是，它会自动与浏览器的刷新频率同步，可以保证动画的流畅性，避免卡顿。

<template>
  <div>
    <p>Current time: {{ currentTime }}</p>
    <p>Elapsed time: {{ elapsedTime }} ms</p>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const currentTime = ref(new Date().toLocaleTimeString());
const startTime = performance.now();
const elapsedTime = ref(0);
let animationFrameId;

function updateTime() {
  currentTime.value = new Date().toLocaleTimeString();
  elapsedTime.value = Math.floor(performance.now() - startTime);
  animationFrameId = requestAnimationFrame(updateTime);
}

onMounted(() => {
  animationFrameId = requestAnimationFrame(updateTime);
});

onUnmounted(() => {
  cancelAnimationFrame(animationFrameId); // 组件卸载时取消动画帧
});
</script>

这个例子中，我们使用 requestAnimationFrame 来循环调用 updateTime 函数。 updateTime 函数会更新 currentTime 和 elapsedTime 两个 ref 变量，并再次调用 requestAnimationFrame 来注册下一次更新。

优点：

• 精度较高，与浏览器刷新频率同步，动画流畅。
• 避免了 setInterval 的卡顿问题。
• 不需要手动控制定时器，由浏览器自动管理。

缺点：

• 代码相对 setInterval 来说稍微复杂一些。

适用场景：

• 需要较高的时间精度和流畅的动画效果的场景。

3.3. useNow 组合式函数

为了更好地复用和管理时间基响应性的逻辑，我们可以将其封装成一个组合式函数 useNow。

// useNow.js
import { ref, onMounted, onUnmounted } from 'vue';

export function useNow() {
  const now = ref(performance.now());
  let animationFrameId;

  function updateNow() {
    now.value = performance.now();
    animationFrameId = requestAnimationFrame(updateNow);
  }

  onMounted(() => {
    updateNow();
  });

  onUnmounted(() => {
    cancelAnimationFrame(animationFrameId);
  });

  return now;
}

这个 useNow 函数返回一个 ref 变量 now，它会随着时间的推移而更新。 我们可以将 now 变量导入到任何 Vue 组件中使用。

<template>
  <div>
    <p>Current time: {{ formattedTime }}</p>
    <p>Elapsed time: {{ elapsedTime }} ms</p>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { useNow } from './useNow.js';

const now = useNow();
const startTime = performance.now();

const formattedTime = computed(() => {
  return new Date(now.value).toLocaleTimeString();
});

const elapsedTime = computed(() => {
  return Math.floor(now.value - startTime);
});
</script>

这个例子中，我们使用 useNow 函数获取当前时间，并将其格式化为 formattedTime 显示在 UI 上。 elapsedTime 的计算也依赖于 now 变量。

优点：

• 代码复用性高，可以将时间基响应性的逻辑封装成一个独立的模块。
• 组件代码更简洁，易于维护。

缺点：

• 需要额外创建一个 useNow 文件。

适用场景：

• 需要在多个组件中使用时间基响应性的场景。

4. 复杂动画与状态同步

时间基响应性不仅仅可以用于简单的计时器，还可以用于控制复杂的动画和状态同步。 比如，我们可以使用时间基响应性来实现一个平滑的动画效果。

<template>
  <div
    :style="{
      transform: `translateX(${x}px)`,
    }"
    class="box"
  ></div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useNow } from './useNow.js';

const duration = 2000; // 动画持续时间 (ms)
const startX = 0;       // 起始位置
const endX = 200;       // 结束位置

const now = useNow();
const startTime = performance.now();

const x = computed(() => {
  const elapsedTime = now.value - startTime;
  const progress = Math.min(elapsedTime / duration, 1); // 动画进度 (0-1)

  // 使用缓动函数，让动画更自然
  const easedProgress = easeInOutQuad(progress);

  return startX + (endX - startX) * easedProgress;
});

// 缓动函数 (easeInOutQuad)
function easeInOutQuad(t) {
  return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
}
</script>

<style scoped>
.box {
  width: 50px;
  height: 50px;
  background-color: red;
  position: relative;
}
</style>

这个例子中，我们使用 useNow 函数获取当前时间，并根据时间计算出 x 坐标，从而实现一个水平移动的动画效果。 我们还使用了缓动函数 easeInOutQuad 来让动画更自然。

关键点：

• 动画进度： 通过计算 elapsedTime / duration 得到动画的进度，范围是 0 到 1。
• 缓动函数： 使用缓动函数来改变动画的进度曲线，让动画效果更自然。 常见的缓动函数有 linear, easeInQuad, easeOutQuad, easeInOutQuad 等。
• 状态同步： 可以将动画的进度与 Vue 的状态同步，例如，当动画完成时，可以改变某个状态，触发其他操作。

5. 性能优化

时间基响应性可能会导致频繁的 UI 更新，从而影响应用的性能。 为了避免不必要的渲染，我们可以采取以下措施：

• 减少更新频率： 如果 UI 更新频率过高，可以适当降低更新频率，例如，将 setInterval 的间隔时间设置为 50 毫秒或 100 毫秒。
• 使用 computed 缓存计算结果： 如果某个计算结果依赖于时间，但是只需要在特定的时间范围内更新，可以使用 computed 来缓存计算结果，避免重复计算。
• 使用 shouldComponentUpdate 或 memo (React)： 在 React 中，可以使用 shouldComponentUpdate 或 memo 来避免不必要的组件渲染。 Vue 中可以通过 v-memo 指令来缓存组件。
• 避免在 requestAnimationFrame 回调函数中执行耗时操作： requestAnimationFrame 的回调函数应该尽可能快地执行，避免阻塞浏览器的渲染线程。 如果需要执行耗时操作，可以将其放到 Web Worker 中执行。

6. 注意事项与最佳实践

• 避免过度使用： 时间基响应性适用于需要根据时间来动态更新 UI 的场景，但是不应该过度使用。 如果 UI 的变化与时间无关，应该尽量使用传统的 Vue 响应式系统。
• 注意兼容性： performance.now() 在一些旧版本的浏览器中可能不支持，需要进行兼容性处理。
• 及时清除定时器或取消动画帧： 在组件卸载时，一定要及时清除定时器或取消动画帧，避免内存泄漏。
• 使用组合式函数封装逻辑： 为了更好地复用和管理时间基响应性的逻辑，可以将其封装成一个组合式函数。

总的来说，时间基响应性是一种强大的技术，可以让我们创建更动态、更具交互性的 Vue 应用。 但是，在使用时间基响应性时，需要注意性能优化和兼容性问题，并遵循最佳实践。

核心在于将时间作为状态来源

时间基响应性允许我们创建基于时间流逝而变化的状态，这为动画、倒计时和实时数据展示等功能提供了强大的支持。 通过 performance.now() 和 requestAnimationFrame，我们可以构建出流畅且高效的动态用户界面。

组合式函数增强代码可维护性

将时间相关的逻辑封装成 useNow 这样的组合式函数，可以提高代码的复用性和可维护性，避免在多个组件中重复编写相同的代码。 此外，合理地利用 computed 可以缓存计算结果，减少不必要的更新，从而提升应用的性能。

性能优化和兼容性是关键

在使用时间基响应性时，务必关注性能优化，避免频繁的 UI 更新导致卡顿。 同时，要考虑 performance.now() 在不同浏览器中的兼容性问题，并采取相应的处理措施。 只有这样，才能充分发挥时间基响应性的优势，构建出高质量的 Vue 应用。

更多IT精英技术系列讲座，到智猿学院