为组件的 props 标注类型

使用 <script setup>

当使用 <script setup> 时，defineProps() 宏函数支持从它的参数中推导类型：

<script setup lang="ts">
const props = defineProps({
  foo: {
    type: String,
    required: true,
  },
  bar: Number,
})

props.foo // string
props.bar // number | undefined
</script>

Vue 本身就是用 TypeScript 编写的，所有的 Vue 官方库都自带了类型声明文件，开箱即用。

配置 tsconfig.json

通过 create-vue 搭建的项目包含了预先配置好的 tsconfig.json。其底层配置抽象于 @vue/tsconfig 包中。

手动配置 tsconfig.json 时，请留意以下选项：

• compilerOptions.isolatedModules 应当设置为 true，因为 Vite 使用 esbuild 来转译 TypeScript，并受限于单文件转译的限制。

• 如果你正在使用选项式 API，需要将 compilerOptions.strict 设置为 true (或者至少开启 compilerOptions.noImplicitThis，它是 strict 模式的一部分)，才可以获得对组件选项中 this 的类型检查。否则 this 会被认为是 any。

• 如果你在构建工具中配置了路径解析别名，例如 @/\* 这个别名被默认配置在了 create-vue 项目中，你需要通过 compilerOptions.paths 选项为 TypeScript 再配置一遍。

声明响应式状态

我们可以使用 reactive() 函数创建一个响应式对象或数组：

<script setup>

在 setup() 函数中手动暴露大量的状态和方法非常繁琐。幸运的是，我们可以通过使用构建工具来简化该操作。
当使用单文件组件（SFC）时，我们可以使用 <script setup> 来大幅度地简化代码。

DOM 更新时机

当你更改响应式状态后，DOM 会自动更新。然而，你得注意 DOM 的更新并不是同步的。
相反，Vue 将缓冲它们直到更新周期的 “下个时机” 以确保无论你进行了多少次状态更改，每个组件都只更新一次。

文本插值

<span>
Message: {{ msg }}
</span>

基于 CSS class 的动画

对于那些不是正在进入或离开 DOM 的元素，我们可以通过给它们动态添加 CSS class 来触发动画：

状态驱动的动画

有些过渡效果可以通过动态地插值来实现，例如，在交互时动态地绑定样式到元素，以这个例子为例：

带侦听器的动画

在一些动画创意里，我们可以根据一些数字状态，使用侦听器将任何东西做成动画。例如，我们可以将数字本身变成动画：

响应性语法糖目前是一个实验性功能，默认是禁用的，需要显式选择使用。

Vue 的响应性语法糖是一个编译时的转换过程，使我们可以像这样书写代码：

ref vs. 响应式变量

这里的这个 $ref() 方法是一个编译时的宏命令：它不是一个真实的、在运行时会调用的方法。
而是用作 Vue 编译器的标记，表明最终的 count 变量需要是一个响应式变量。

每一个会返回 ref 的响应性 API 都有一个相对应的、以 $ 为前缀的宏函数。包括以下这些 API：

什么是组合式 API？

组合式 API 是一系列 API 的集合，使我们可以使用函数而不是声明式选项的方式来书写 Vue 组件。
它包含以下 API:

• 响应式 API: 例如 ref() 和 reactive()，使我们可以直接创建响应式状态、计算属性和侦听器。
• 生命周期钩子: 例如，onMounted() 和 onUnmounted(), 使我们可以在组件的各个生命周期阶段添加逻辑。
• 依赖注入: 例如 privide() 和 inject()，使我们可以在使用响应性 API 时，利用 Vue 的依赖注入系统。

在绝大多数情况下，Vue 推荐使用模板语法来搭建 HTML。然而在某些使用场景下，我们真的需要用到 JavaScript 完全的编程能力。这时渲染函数就派上用场了。

基本用法

创建 VNodes

Vue 提供了一个 h() 函数用于创建 vnodes:

import { h } from 'vue'

const vnode = h(
  'div', // type
  { id: 'foo', class: 'bar' }, // props
  [
    // children
  ]
)