Vue3 – customRef 应用

简介

customRef 是Vue3提供的一种自定义设置响应式数据的组合式API，它允许用户自定义封装响应式数据。

customRef 的定义

customRef() 方法提供两个参数，分别是 track 和 trigger. 它们分别用于追踪和通知。

基本概念：

ref 响应式数据的原理是把一个普通的数据进行封装，当这个数据被访问时，Vue能检测到被访问的操作，从而实现某种功能。而当数据被改写时，Vue也能检测到被改写的操作，同样实现某种功能。

而 customRef 则把访问和改写被检测到之后的【某种功能】提供给用户自由定制。

实例代码如下：实现数据的延迟响应

import {customRef} from "vue";

export default {
  name: 'App',

  setup() {

    /**
     * 定义一个自定义Ref响应式方法
     * @constructor
     * @value 自定义Ref传来的数据
     */
    const MyRef = (value) => {
      /**
       * 我们把value 传给 MyRef 之后需要它返回一个封装后响应式数据
       * 而 customRef 则是Vue3提供的封装响应式数据的方法
       * @track 这个参数是用于 get() 方法在被访问时，允许被访问，否则不允许被访问
       * @trigger 这个参数是用于 set() 方法当数据发生改变时，应该要通知模板重新访问取数据
       */
      return customRef((track, trigger) => {
        let time;
        return {
          get() {
            console.log("数据被访问了=> ", value);
            // 当有人进来访问时，应该给它访问
            track();
            return value;
          },
          set(newValue) {
            console.log("数据被改写了=>", newValue);
            /**
             * 实现廷迟功能
             * 我们可以改写之前，设置一个定时期，延迟500毫秒后再操作
             * 但是在设置之前，必须先把上一次创建的定时器关闭掉
             * @type {T}
             */
            clearTimeout(time);
            time = setTimeout(() => {
              value = newValue;
              // 在数据被改写后，应该要通知模板重新访问取得新数据，否则数据改了页面不改
              trigger();
            }, 500);

          }
        }
      })
    }

    /**
     * 使用自定义的Ref响应式方法
     */
    let keyword = MyRef("hello");


    return {
      keyword
    }
  }
}