【愚公系列】《循序渐进Vue.js 3.x前端开发实践》004-走进 Vue 3的新世界：小结与上机演练

🚀前言

在深入学习 Vue 框架之前,我们首先需要熟练掌握前端开发的三个基本技术：HTML、CSS和JavaScript。同时，通过对Vue的初步体验，相信读者已经感受到了它在开发过程中带来的便利和效率。现在，尝试通过解答下列问题来检验读者在本章的学习成果吧!如果对每个问题都有了清晰的答案，那么恭喜你，可以进入下一章进行学习了。

🚀一、小结与上机演练

🔎1.在网页开发中，HTML、CSS和JavaScript分别扮演了什么角色?

1. HTML（超文本标记语言，HyperText Markup Language）：
   HTML 是网页的骨架和内容载体，用于定义网页的基本结构和内容。它通过一系列标签（如 <h1>、<p>、<div> 等）来组织和显示文本、图片、视频、表格、链接等各种元素。简单来说，HTML 确定了网页上要显示什么内容及这些内容的层次关系。

2. CSS（层叠样式表，Cascading Style Sheets）：
   CSS 是网页的“外观设计师”，负责网页的样式和布局。它定义了 HTML 元素的视觉表现，包括颜色、字体、排版、间距、背景、动画效果等。通过使用 CSS，开发者可以让网页更具吸引力和美观，同时可以实现响应式布局，以适应不同设备的屏幕尺寸。

3. JavaScript：
   JavaScript 是网页的“行为控制器”，为网页添加交互功能。它使网页从静态的内容转变为动态和交互式的应用。JavaScript 可以处理用户的点击、输入、滚动等事件，实现动态内容更新、数据验证、动画效果、网络请求等功能。通过 JavaScript，网页不仅可以响应用户的操作，还可以与服务器进行数据交互，增强用户体验。

🦋1.1 总结

• HTML 定义了网页的结构和内容。
• CSS 负责网页的样式和布局。
• JavaScript 处理网页的行为和交互。

这三者共同构成了现代网页开发的核心技术，分别承担不同的职责，并协同工作，实现完整的用户体验。

🔎2.Vue3版本相较于之前的版本有哪些显著的改进?

Vue 3 相较于之前的 Vue 2 版本，带来了许多显著的改进和优化，以下是其中几个关键的改进点：

🦋2.1 Composition API

Vue 3 引入了全新的 Composition API，与 Vue 2 的 Options API 相比，Composition API 提供了更灵活的方式来组织代码和逻辑。其主要优势包括：

• 代码复用性更高：可以将功能逻辑更方便地抽离成独立的函数，便于复用和维护。
• 逻辑更加清晰：对复杂组件中的逻辑分离和组合更加自然，减少了代码的分散和重复。
• 更好地支持 TypeScript：Composition API 的设计使得与 TypeScript 的集成更加顺畅。

🦋2.2 更小的体积和更快的性能

Vue 3 在性能和体积上都得到了显著优化：

• 树形拆解（Tree-shaking）：Vue 3 的核心模块是按需加载的，使用时只加载必要的功能，未使用的部分不会被打包到最终的项目中，减小了打包后的体积。
• 更快的渲染性能：虚拟 DOM 的性能得到了改进，Vue 3 对比 Vue 2 在大规模数据渲染场景下有更高的效率。

🦋2.3 Fragments、Teleport 和 Suspense 支持

• Fragments：在 Vue 2 中，一个组件只能有一个根元素。Vue 3 中支持组件返回多个根元素，消除了对不必要的 div 包裹的需求。
• Teleport：允许开发者将某个组件的 DOM 渲染到应用外部的指定位置，例如模态框或通知等组件，不再局限于父组件的 DOM 层次中。
• Suspense：用于处理异步组件的加载，类似于 React 的 Suspense，可以在异步操作完成前渲染占位符内容，大幅提升异步加载的用户体验。

🦋2.4 更好的 TypeScript 支持

Vue 3 对 TypeScript 的支持更加完善，核心代码完全用 TypeScript 编写，类型推断更智能。开发者可以更容易地使用 TypeScript 构建 Vue 应用，享受到更好的类型安全性和代码提示功能。

🦋2.5 新编译器与优化

Vue 3 的编译器得到了重写和优化，尤其是在静态内容处理方面，极大地减少了不必要的重渲染。新编译器具备以下特点：

• 静态提升：在编译过程中，将不会发生变化的部分提升到组件外部，避免重复计算和渲染。
• 缓存事件处理函数：对事件处理函数进行缓存，避免每次重新渲染时重新创建事件处理器，减少性能开销。

🦋2.6 自定义渲染 API（Custom Renderer API）

Vue 3 提供了自定义渲染 API，开发者可以用它来扩展 Vue 的渲染功能，将 Vue 应用渲染到不同的目标，例如 canvas、WebGL 或其他环境。这极大地拓展了 Vue 的应用场景，提升了灵活性。

🦋2.7 改进的 Reactivity 系统

Vue 3 对响应式系统进行了重构，基于 Proxy 实现响应式数据。相比 Vue 2 的 Object.defineProperty 实现，Vue 3 的 Proxy 优势在于：

• 完全支持数组和对象的所有属性：解决了 Vue 2 中无法侦听对象新增属性和数组下标变化的问题。
• 更好的性能：Vue 3 的响应式系统整体性能得到了提升，尤其是在大型应用中更为明显。

🦋2.8 Vite 和 Vue CLI 集成

Vue 3 更加推荐使用 Vite 作为开发工具。Vite 是一个更快速、现代的构建工具，采用 ES modules 并支持热模块替换（HMR），极大地提升了开发体验和构建速度。

🦋2.9 其他改进

• 增强的 v-model：Vue 3 中的 v-model 支持双向绑定多个值，且具备更灵活的语法。
• 更友好的 SSR（服务端渲染）支持：Vue 3 中的服务端渲染改进了 API 设计，减少了开发复杂度并提升了性能。
• 开发工具升级：Vue 3 的开发工具 Vue DevTools 提供了更好的调试体验，尤其是在 Composition API 相关功能上。

Vue 3 相比 Vue 2 有诸多显著的改进，特别是在代码组织、性能优化、类型支持和开发体验等方面。通过 Composition API、Proxy-based 响应式系统、Fragments 等新特性，Vue 3 为开发者提