在掘金上看到了这篇文章,基于此,笔者再来谈谈为什么推荐使用 TypeScript 开发 Vue3。
在 Vue2 中,由于并非采用 TypeScript 开发的,所以 Vue2 对 TypeScript 的支持存在先天不足。尽管官方也提供了类型声明文件,可以在一定程度上利用起 TypeScript 的类型提示,但终究还是有所不足。
故,在 Vue3 中,官方全面采用 TypeScript 进行开发,极大的增强了对 TypeScript 的支持,Vue3 可以说是先天就支持类型提示,和 Vue2 相比好了太多。更加优秀的类型提示也意味着,是时候迁移到 TypeScript 了!
reactive 与 ref 之争
先来看下 Vue3 中的一个经典争论,在开发中,我们该使用 reactive
还是 ref
?
以下是一个 reactive 和 ref 的经典用法,两者极其相似,都可以提供响应式变量,那么,谁更适合在日常开发中呢?
const obj = reactive({ count: 0 })
console.log(obj.count) // 0
const count = ref(0)
console.log(count.value) // 0
笔者的回答是:ref!
为什么呢?原因在于 类型提示!
拿同样的代码举例,我们对其进行类型推断,可以发现,obj 的类型是 { count: number }
,而 count 的类型是Ref<number>
!
const obj = reactive({ count: 0 }) // obj 的类型是 { count: number }
const count = ref(0) // count 的类型是 Ref<number>
注意到了吗?对于 obj
而言,是否为响应式,在类型上完全无法体现!此时就需要对变量名称进行处理,比如说改写成 objRef
这样来解决普通变量和响应式变量的混淆问题。
而对于 count
而言,通过其类型 Ref<number>
,我们可以很轻松的就判断出这是一个响应式变量!所以也就不存在普通变量和响应式变量的混淆问题!
故,在开发中,我们该使用 reactive
还是 ref
?笔者的回答是:ref!
也推荐各位读者朋友使用 ref
进行开发。
有人说,这样一来就要经常写 .value
了。
是的没错,但是,朋友们,代码的简洁性和可读性有时候就是矛盾的,如果要让代码更加可读,逻辑更加清晰,那么多一些冗余是有必要的。
如果过于追求简洁,就像尤雨溪大大一直追求去除 .value
,可是他是否有想过, .value
本身就是有存在的意义的呢?固然 .value
最初是为了解决变量存在基础类型和引用类型两种情况的问题,但现在,就结果而言,Ref<T>
的类型本身,也是起到了很大的作用,可以避免混淆普通变量和响应式变量,可以说还解决了一个额外的问题。
所以笔者并不看好新的 ref 语法糖,笔者的建议还是使用一般的写法。
至于 <script setup>
,说实话也不看好,还不如原先的在配置式的基础上使用 setup()
<script setup>
// setup 语法
import { ref, computed } from 'vue'
const num = ref(1)
const num_10 = computed(() => num.value * 10)
</script>
<template>
<div>{{ collectionName }}: {{ readersNumber }} {{ book.title }}</div>
</template>
<script>
// 笔者还是推荐使用经典写法,这样可以同时调用 组合式 API 和配置式API。
import { ref, reactive } from 'vue'
export default {
props: {
collectionName: String
},
setup(props) {
const readersNumber = ref(0)
const book = reactive({ title: 'Vue 3 Guide' })
// 暴露给 template
return {
readersNumber,
book
}
}
}
</script>
- 本文链接: https://wp.cmyr.ltd/archives/why-is-typescript-recommended-for-developing-vue-3
- 版权声明: 本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
欢迎关注我的其它发布渠道
发表回复
要发表评论,您必须先登录。