06

使用customRef自定义Hooks

在前几节中我们提到了customRef，并进行了简单的介绍，下面拿一些例子来说明如何使用customRef自定义Hooks

创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。它需要一个工厂函数，该函数接收 track 和 trigger 函数作为参数，并且应该返回一个带有 get 和 set 的对象。

下面展示一个最简单的例子myRef

function myRef(value) {
  return customRef((track, trigger) => {
    return {
      get() {
        track(); //告诉Vue这个数据时需要追踪变化的
        console.log("getvalue", value);
        return value;
      },
      set(newValue) {
        console.log("set", newValue);
        value = newValue;
        trigger(); //告诉Vue触发界面更新
      },
    };
  });

然后我们结合实际情况举一个案例

考虑一个通常情况下会出现的场景，我们需要读取另一个文件里的数据，而这个过程是异步的。

首先是数据，它放在 public 文件夹里：data.json

[
    {
        "id": 1,
        "name": "鲁班"
    },
    {
        "id": 2,
        "name": "张三"
    },
    {
        "id": 3,
        "name": "李四"
    },
    {
        "id": 4,
        "name": "玩儿"
    }
]

如果我们并未使用 customRef 来执行自定义:

如果我们使用customRef ：

在这个方案中，我将 获取数据的方案 封装存储在 自定义ref 中，在初始化的时候，会在获取数据之后执行 trigger 进行视图层的变化

注意点：

不能在get中发送网络请求渲染界面 -> 调用get方法 -> 发送网络请求保存数据 -> 更新界面 -> 调用get