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 的经典用法，两者极其相似，都可以提供响应式变量，那么，谁更适合在日常开发中呢？

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://blog.cmyr.ltd/archives/7f656ec0.html
版权声明：转载请注明出处！