仿照ref()API源码,新增一个enhancedRef()API

源码:

当仿照Vue 3的ref API编写新代码时，你可以考虑创建一个名为enhancedRef的新功能。这个功能将提供一些复杂、有意义并且在开发中经常使用的功能。

enhancedRef
enhancedRef是一个增强版的ref，它允许你执行诸如数据验证、自动更新相关数据或者触发回调等操作。以下是一个示例实现：


import { reactive, Ref, UnwrapRef } from 'vue';

type Validator<T> = (value: T) => boolean;

function enhancedRef<T>(initialValue: T, validator?: Validator<T>): {
  value: Ref<T>,
  isValid: Ref<boolean>,
  set: (value: T) => void,
  reset: () => void,
  onInvalid: (callback: () => void) => void
} {
  const value = reactive({
    data: initialValue,
    isValid: true
  });

  function set(newValue: T) {
    if (validator && !validator(newValue)) {
      value.isValid = false;
      // Trigger callback for invalid value
      onInvalidCallbacks.forEach(callback => callback());
    } else {
      value.data = newValue;
      value.isValid = true;
    }
  }

  function reset() {
    value.data = initialValue;
    value.isValid = true;
  }

  const onInvalidCallbacks: Array<() => void> = [];
  function onInvalid(callback: () => void) {
    onInvalidCallbacks.push(callback);
  }

  return {
    value: value.data,
    isValid: value.isValid,
    set,
    reset,
    onInvalid
  };
}
示例用法
// 基本用法
const name = enhancedRef('John');
console.log(name.value); // 输出 'John'

// 数据验证
const age = enhancedRef(25, (val) => val >= 0 && val <= 120);
age.set(130); // 触发无效值回调

age.onInvalid(() => {
  console.log("Invalid age!");
});

// 自动更新
const count = enhancedRef(0);
count.set(count.value + 1); // 自动更新值

// 重置
count.reset();
console.log(count.value); // 输出 0
以上示例展示了enhancedRef的基本用法以及其包含的功能，包括数据验证、自动更新和回调。这种类型的功能对于需要更精细控制数据流的应用程序非常有用

使用场景及用法:

// 创建一个带有数据验证的 enhancedRef
const age = enhancedRef(25, (val) => val >= 0 && val <= 120);

// 设置一个有效的年龄值
age.set(30);
console.log(age.value); // 输出 30
console.log(age.isValid); // 输出 true

// 设置一个无效的年龄值
age.set(150); // 触发无效值回调
console.log(age.value); // 输出 30（未改变）
console.log(age.isValid); // 输出 false

        我们创建了一个带有数据验证功能的 enhancedRef 变量 age。当我们尝试设置一个超出范围的值时，它会触发无效值回调，并且不会改变当前的值。这样可以确保我们的数据始终保持有效，并且可以根据需要执行相应的操作