一幅长文细学Vue（九）——补充说明

9 Vue的补充说明

摘要：在前面的学习中，我们或许留下了许多疑问，除此之外，Ts的迅速发展使得Vue3中不得不支持Ts，在本文中我们会略微谈及Vue3中如何使用Ts，以及对前面的疑问做出一些补充说明。如果看不懂本文，十分推荐前往第十章观看后再返回来学习。

声明：为了文章的清爽性，在文章内部的代码演示中只会附上部分演示代码，main.js文件的代码通常不贴出，如果感兴趣可以前往代码仓库获取

作者：来自ArimaMisaki创作

9.1 各种页面

9.1.1 SPA单页面应用

说明：SPA(Single-Page application)为单页面应用程序；Vue为SPA的开发提供了很好的支持；SPA的页面切换无需加载，而是通过组件的切换搭配路由来实现切换的效果；SPA一般要求后端提供API数据接口。

Vue似乎天生就是做SPA的，我们知道在平时的使用中，我们都是把index.html看做是一个容器，然后将所写的单页面组件放入该容器中。但在实际使用中，实际上有人使用Vue来搭建多页面应用程序，这个已是后话，我们后面详谈。

9.1.2 SSR全栈

说明：SPA有一定的坏处，SPA的原理是将所有组件全部加载在一个HTML页面上，如果组件的内容较为复杂，那么加载JavaScript的时间会使用户体验差。为此，Vue支持将某个vue组件渲染为一个HTML页面。

上面的操作流程我们称为服务端渲染SSR，它能够极大地改善应用在Web核心指标上的性能表现。

有些基于Vue之上的上层框架可以让我们针对此场景很好地开发应用，如NuxtJS。

9.2 搭配TypeScript使用Vue

9.2.1 使用TypeScript的好处

说明：我们前面说过JavaScript是一种动态语言，它是一门解释性语言，而TypeScript是一门静态语言，它可以通过编译后再执行，故在编译时通过静态分析检测可以提前发现很多常见的错误，这减少了生产环境的运行时错误。Vue本身就是Ts编写的，所以Vue官方库提供了Ts的开发环境，开箱即用。

9.2.2 项目配置

说明：在构建项目中推荐使用vite来构建而不是Vue-cli，使用npm init vite可以生成一个项目文件，选择vue-ts即可创建一个基于Vite创建的Ts的开发环境。

插件：对于Vue2来说，Vetur是一个非常好的插件，但是在Vue3中更推荐使用Volar；如果想要使用Volar，请记得禁用Vetur。

9.2.3 常见说明

9.2.3.1 DefineComponent

说明：为了让 TypeScript 正确地推导出组件选项内的类型，我们需要通过 defineComponent() 这个全局 API 来定义组件。

提示：无论是组合式写法还是选项式写法，个人认为DefineComponnent都是必须的，当script存在setup的简写形式时，export无法使用，正确的书写方式是将setup作为一个函数写入export的内部，这样做的方式有点类似于选项式+API的写法；这样写后，defineComponent可以看做是一个定义组件内部所有相关内容的集合体。

import { defineComponent } from 'vue'

export default defineComponent({
  // 启用了类型推导
  props: {
    name: String,
    msg: { type: String, required: true }
  },
  data() {
    return {
      count: 1
    }
  },
  mounted() {
    this.name // 类型：string | undefined
    this.msg // 类型：string
    this.count // 类型：number
  }
})

9.2.3.2 在单文件组件中的用法

说明：要在单文件组件中使用 TypeScript，需要在 <script> 标签上加上 lang="ts" 的 attribute。当 lang="ts" 存在时，所有的模板内表达式都将享受到更严格的类型检查。