深入理解 Vue 3 中的自定义 ref：customRef

在 Vue 3 中，ref 是一个非常强大的工具，用于创建响应式数据。然而，Vue 3 还提供了一个更强大的功能——customRef，它允许我们自定义响应式数据的行为。通过 customRef，我们可以实现更复杂的逻辑，例如延迟更新、数据验证、网络请求等。本文将通过具体的场景和代码示例，深入探讨 customRef 的使用方法和特点。

一、场景引入：自定义响应式数据的行为

在实际开发中，我们经常会遇到需要自定义响应式数据行为的场景。例如，我们可能希望在用户输入数据后，延迟一段时间再更新视图，或者在数据变化时发送网络请求。这些需求无法通过普通的 ref 或 reactive 实现，但可以通过 customRef 来实现。

二、customRef：自定义响应式数据

（一）基本概念

customRef 是一个用于创建自定义响应式数据的 API。它允许我们定义自己的 get 和 set 方法，从而控制数据的读取和设置行为。customRef 返回一个对象，该对象包含 get 和 set 方法，以及一个初始值。

（二）使用方法

我们先来看一个简单的例子。假设我们有一个响应式数据 message，我们希望在用户输入数据后，延迟 1 秒再更新视图。

import { customRef } from 'vue';

function useDelayedRef(value, delay = 1000) {
  let timer;
  return customRef((track, trigger) => {
    return {
      get() {
        track(); // 告诉 Vue 这个数据很重要，需要持续关注
        return value;
      },
      set(newValue) {
        clearTimeout(timer);
        timer = setTimeout(() => {
          value = newValue;
          trigger(); // 告诉 Vue 数据已经更新
        }, delay);
      }
    };
  });
}

const message = useDelayedRef('你好', 1000);

在这个例子中，useDelayedRef 是一个自定义的 ref 函数，它接受一个初始值和一个延迟时间。customRef 的 get 方法返回当前值，并调用 track 函数，告诉 Vue 这个数据很重要，需要持续关注。set 方法设置新值，并在延迟后调用 trigger 函数，告诉 Vue 数据已经更新。

（三）实际应用

假设我们有一个表单应用，用户输入的数据需要延迟 1 秒后才更新视图。我们可以使用 customRef 来实现这一点。

<template>
  <div>
    <h2>输入内容：</h2>
    <input v-model="message" />
    <h2>显示内容：</h2>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { customRef } from 'vue';

function useDelayedRef(value, delay = 1000) {
  let timer;
  return customRef((track, trigger) => {
    return {
      get() {
        track(); // 告诉 Vue 这个数据很重要，需要持续关注
        return value;
      },
      set(newValue) {
        clearTimeout(timer);
        timer = setTimeout(() => {
          value = newValue;
          trigger(); // 告诉 Vue 数据已经更新
        }, delay);
      }
    };
  });
}

export default {
  setup() {
    const message = useDelayedRef('你好', 1000);
    return { message };
  }
};
</script>

在这个例子中，message 是一个自定义的响应式数据，它使用了 useDelayedRef 函数。用户在输入框中输入内容后，延迟 1 秒后视图才会更新。

三、track 和 trigger 的作用

（一）track：告诉 Vue 数据很重要

track 是一个函数，用于告诉 Vue 当前数据很重要，需要持续关注。当 get 方法被调用时，调用 track 函数可以让 Vue 知道这个数据需要被跟踪。

（二）trigger：告诉 Vue 数据已经更新

trigger 是一个函数，用于告诉 Vue 数据已经更新。当 set 方法被调用时，调用 trigger 函数可以让 Vue 知道数据已经变化，需要更新视图。

（三）为什么需要 track 和 trigger

• track：如果没有调用 track，Vue 不会知道这个数据需要被跟踪，因此不会更新视图。

• trigger：如果没有调用 trigger，Vue 不会知道数据已经更新，因此不会更新视图。

四、封装自定义 ref

为了方便使用，我们可以将 customRef 封装成一个通用的函数。例如，我们可以封装一个 useDelayedRef 函数，用于创建延迟更新的响应式数据。

import { customRef } from 'vue';

function useDelayedRef(value, delay = 1000) {
  let timer;
  return customRef((track, trigger) => {
    return {
      get() {
        track(); // 告诉 Vue 这个数据很重要，需要持续关注
        return value;
      },
      set(newValue) {
        clearTimeout(timer);
        timer = setTimeout(() => {
          value = newValue;
          trigger(); // 告诉 Vue 数据已经更新
        }, delay);
      }
    };
  });
}

这样，我们可以在任何地方使用 useDelayedRef 来创建延迟更新的响应式数据。

五、实际应用案例

（一）延迟更新

假设我们有一个表单应用，用户输入的数据需要延迟 1 秒后才更新视图。我们可以使用 useDelayedRef 来实现这一点。

（二）数据验证

假设我们有一个表单应用，用户输入的数据需要进行验证。如果数据不符合要求，我们可以在 set 方法中进行拦截。

import { customRef } from 'vue';

function useValidatedRef(value, validator) {
  return customRef((track, trigger) => {
    return {
      get() {
        track(); // 告诉 Vue 这个数据很重要，需要持续关注
        return value;
      },
      set(newValue) {
        if (validator(newValue)) {
          value = newValue;
          trigger(); // 告诉 Vue 数据已经更新
        } else {
          console.error('数据验证失败');
        }
      }
    };
  });
}

const message = useValidatedRef('你好', (value) => value.length > 3);

在这个例子中，message 是一个自定义的响应式数据，它使用了 useValidatedRef 函数。用户在输入框中输入内容后，只有当输入的内容长度大于 3 时，数据才会更新。

六、总结

customRef 是 Vue 3 中一个非常强大的 API，它允许我们自定义响应式数据的行为。通过 customRef，我们可以实现延迟更新、数据验证、网络请求等复杂逻辑。track 和 trigger 是 customRef 的两个核心函数，分别用于告诉 Vue 数据很重要和数据已经更新。在实际开发中，我们可以将 customRef 封装成通用的函数，方便在多个地方使用。