0%

2021-08-23 为什么推荐使用 TypeScript 开发 Vue3

为什么推荐使用 TypeScript 开发 Vue3

参考:Vue 第二波 ref 语法提案来袭,这次会进入到标准吗?

在掘金上看到了这篇文章,基于此,笔者再来谈谈为什么推荐使用 TypeScript 开发 Vue3。

在 Vue2 中,由于并非采用 TypeScript 开发的,所以 Vue2 对 TypeScript 的支持存在先天不足。尽管官方也提供了类型声明文件,可以在一定程度上利用起 TypeScript 的类型提示,但终究还是有所不足。

故,在 Vue3 中,官方全面采用 TypeScript 进行开发,极大的增强了对 TypeScript 的支持,Vue3 可以说是先天就支持类型提示,和 Vue2 相比好了太多。更加优秀的类型提示也意味着,是时候迁移到 TypeScript 了!

reactive 与 ref 之争

先来看下 Vue3 中的一个经典争论,在开发中,我们该使用 reactive 还是 ref

以下是一个 reactive 和 ref 的经典用法,两者极其相似,都可以提供响应式变量,那么,谁更适合在日常开发中呢?

1
2
3
4
5
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>

1
2
3
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()

1
2
3
4
5
6
7
<script setup>
// setup 语法
import { ref, computed } from 'vue'

const num = ref(1)
const num_10 = computed(() => num.value * 10)
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<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://blog.cmyr.ltd/archives/7f656ec0.html
版权声明:转载请注明出处!

坚持原创技术分享,您的支持将鼓励我继续创作!