customRef 函数

创建一个自定义的 ref ，并对其依赖项跟踪和更新触发进行显示控制

import { customRef } from "vue";
export default {
  setup() {
    //自定义一个ref
    function aRef(value) {
      //custom 函数必须传入一个函数
      return customRef((track, trigger) => {
        //必须返回一个对象，需要设置 get、set 函数
        return {
          //当读取数据时，触发 get 函数，get 函数返回值为读取的结果值
          get() {
            //开启追踪效果，当vue重新解析模板时，允许通过 get 获取值
            track();
            return value;
          },
          //当修改数据时，可以接受最新设置的值
          set(newValue) {
            //利用闭包修改最开始 aRef 接收到的形参值
            //并且让 get 函数返回值为最新值
            value = newValue;
            //通知vue重新进行模板解析更新
            trigger();
          },
        };
      });
    }
    //使用自定义的 ref 函数
    let a = aRef(2);
  },
};

此处，调用 aRef 自定义 ref 函数时，传入一个初始值。 aRef 函数调用并返回 customRef 函数的执行结果。customRef 函数必须传入一个函数，并且这个函数可以接收到 track、trigger 两个方法。

customRef 函数必须返回一个对象，并且对象中需要包含 get、set 方法，用于初始接收到的 value 被读取和修改时进行调用。在 set 方法中使用接收到的 trigger 方法，可以在数据被修改时，通知 vue 对页面的 DOM 进行更新。vue 重新解析模板中使用到的 aRef 定义的数据。当需要获取到最新设置的值时，需要再次调用 get 方法获取值，当 get 方法中使用了 track 方法时，代表此时允许获取最新值，否则页面 DOM 不会进行数据的更新。