vue3 ts 动态ref

Vue3 中的 TypeScript 动态 `ref` 是结合了 Vue 的响应式系统和 TypeScript 类型安全特性的功能。动态 `ref` 允许你在运行时创建并初始化引用值（通常为基本类型、对象或数组），并且 TypeScript 的类型系统会自动推断其类型，提供更好的代码提示和验证。

当你需要在一个组件的生命周期内根据条件或者用户输入动态地创建和管理变量时，可以使用动态 `ref`。例如：

import { ref } from 'vue';
function createRef<T>(initialValue?: T): Ref<T> {
  return ref(initialValue);
}

let nameInput = createRef('');
// 当时值改变时，nameInput.value会有相应的更新通知

if (shouldShowAge) {
  let age = createRef(0); // 只有当 shouldShowAge 为真时，age 才会被创建
}

动态 `ref` 能够保证在任何时候都有正确的类型，并且因为它是 Vue 的响应式系统的一部分，所以它支持 Vue 的计算属性、watch 和模板绑定。