ts在Vue3中实战过程中的问题?

Question

1. 接收后端接口数据用ref定义变量比较合适还是用reactive比较合适？
2. 类型的默认值怎么处理？ undefined？null？{}

  const loginUser = reactive<LoginUser | object>({});
  const loginUser = ref<LoginUser | object>({});
  const loginUser = reactive<LoginUser>();
  const loginUser = reactive<LoginUser>(null);

Answer 1

第一个问题:

https://juejin.cn/post/7235118809605308471

第二个问题:
{} 方便

Answer 2

<script setup lang="ts">
import { ref } from 'vue'

interface User {
  name:string
}
//方案一
const loginUser = ref<User>({} as unknown as User);
//方案二
const loginUser1 = ref<Partial<User>>({} );

Answer 3

用 ref 还是 reactive 好像没有太大的区别，一般 ref 用于单值（基本类型），reactive 用于对象和数组。但实际上我发现 ref(obj) 也会把 obj 处理成响应式对象。不过 ref 和 reactive 在封装对象的时候还是有一点不同，使用 ref 封装的需要使用 .value 来取值，但 reactive 的不需要，貌似直接就是一个代理对象。

除此之外，我觉得更需要研究的是使用 ref 还是使用 shallowRef，后者封装的对象是非响应式的，换句话说对对象属性的变更不会触发响应。

---

默认值用哪个，取决于你的数值类型，以及你希望怎么用。undefined 和 null 的区别在于，undefined 表示数值不存在，而 null 表示对象不存在。实际上在 TypeScript 这两个值区别不是很大，只是 TypeScript 有 ? 语法对 undefined 支持得更好，而且可选参数没传的时候也都是 undefined。

要不要使用 {} 取决于你的类型定义中，属性是否都可选。如果所有属性都可选，那么 {} 就是一个合法的对象，使用它作为默认值比使用 undefined 或 null 更好，至少可以避免使用前空判断。但如果对象类型不允许所有属性都可选，那 {} 就不是合法对象（有语法错误），这时候想快速初始化，或简单地赋初值，就只能使用 undefined 或 null 了。当然在使用的时候需要注意先判非空，好在有可选链运算符 (?.)，用起来倒也不是很麻烦。