const loginUser = reactive<LoginUser | object>({}); const loginUser = ref<LoginUser | object>({}); const loginUser = reactive<LoginUser>(); const loginUser = reactive<LoginUser>(null);
用 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 了。当然在使用的时候需要注意先判非空,好在有可选链运算符 (?.
),用起来倒也不是很麻烦。
<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>>({} );
第一个问题:
https://juejin.cn/post/7235118809605308471
第二个问题:
{} 方便
ts在Vue3中实战过程中的问题?
ref
来接收后端接口数据,因为ref
提供了更灵活的数据绑定和响应式系统。undefined
。如果需要定义默认值,可以使用reactive
或ref
提供的默认值函数。例如:const loginUser = reactive<LoginUser>({ username: 'default_username', email: 'default_email@example.com'});
这不是都找到类型了吗?这个报错是什么意思?如何解决呢? 消除错误
为什么用 > 或 < 判断就要报错啊
Vue3+Ts开发中 .vue 文件不声明 lang=ts 无代码提示,不知道怎么解决
这是我写的html ipv6地址的时候,前面的图标显示的特别小 应该怎么解决这个问题了?
表格和el-row的布局突然报这个ts错误是什么原因 之前好好的,今天突然就报了 怎么解决?