这是我参与「 第五届青训营 」伴学笔记创作活动的第 13 天。
前言
今天是 2023 年 1 月 27 日星期五，癸卯年正月初六。
依然祝大家兔年快乐🐰
今天我还是继续写一些关于 Vue 框架的学习笔记。Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。Vue 只关注视图层，采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
生命周期
对于生命周期来说，Vue3 与 Vue2 整体上变化不大，只是大部分生命周期钩子名称上 + “on”，功能上是类似的。不过有一点需要注意，Vue3 在组合式API（Composition API，下面展开）中使用生命周期钩子时需要先引入，而 Vue2 在选项API（Options API）中可以直接调用生命周期钩子，如下所示。
// vue3
<script setup>
import { onMounted } from 'vue'; // 使用前需引入生命周期钩子
onMounted(() => {
// ...
});
// 可将不同的逻辑拆开成多个onMounted，依然按顺序执行，不会被覆盖
onMounted(() => {
// ...
});
</script>
// vue2
<script>
export default { mounted() { // 直接调用生命周期钩子
// ...
}, }
</script>
多根节点
Vue2 如果在模板中如果使用多个根节点时会报错。Vue3 支持多个根节点，也就是 fragment。即以下多根节点的写法是被允许的：
<template>
<header></header>
<main></main>
<footer></footer>
</template>
Composition API
Vue2 是选项API（Options API），一个逻辑会散乱在文件不同位置（data、props、computed、watch、生命周期钩子等），导致代码的可读性变差。当需要修改某个逻辑时，需要上下来回跳转文件位置。
Vue3 组合式API（Composition API）则很好地解决了这个问题，可将同一逻辑的内容写到一起，增强了代码的可读性、内聚性，其还提供了较为完美的逻辑复用性方案。
异步组件 Suspense
Vue3 提供 Suspense 组件，允许程序在等待异步组件加载完成前渲染兜底的内容，如 loading ，使用户的体验更平滑。使用它，需在模板中声明，并包括两个命名插槽：default 和 fallback。Suspense 确保加载完异步内容时显示默认插槽，并将 fallback 插槽用作加载状态。
<tempalte>
<suspense>
<template #default>
<List />
</template>
<template #fallback>
<div>
Loading... </div>
</template>
</suspense>
</template>
