案例：Hello Vue 3

学完本章内容后，读者应该具备了简单的 Vue 3 项目编写能力。下面我们来开发一个 Hello Vue 3 项目。

创建一个目录，在目录下新建 index.html，在 <script> 标签中引入 vue.global.js，并编写简单的 Vue 3 代码，实现的效果如图1-5所示。

image 2024 02 21 09 39 12 747
Figure 1. 图1-5　Hello Vue 3

  1. 功能描述

    当我们修改输入框内的文字时，对应上方的文字也会改变，这就是简单的双向绑定能力。

  2. 案例完整代码

    本案例完整源码在：/案例源码/Vue.js概述。

小结与练习

本章首先讲解了 Vue.js 的背景知识，包括 MVVM 模式、Vue.js 的由来、Vue.js 的安装和导入，以及 Vue.js 的 MVVM 思想，然后讲解了前端工程化和 Webpack 工具这些和 Vue.js 紧密相关的内容。

其次，本章还讲解了 Vue 3 和旧版本的一些改动和提升，包括：更快——性能上的提升，更小——资源占用的空间更小，更易于维护——源码更加高效和规范，以及很多旧版本没有的能力，并解决了一些历史遗留问题，其中包括 Composition API、新的内置组件 Teleport、Suspense 和 Fragments 片段、服务端渲染、Vite。

最后，讲解了 ES 6 语言的相关知识，主要内容包括：ES 6 的变量声明、ES 6 的模块化方案、async/await 异步函数解决方案。ES 6 语法是一个新的标准，并且会在越来越多的前端项目中使用，更多的开源框架和工具会默认采用 ES 6 语法，所以掌握好这些知识非常重要。

学完本章内容后，建议读者自行运行一下本章提供的示例代码，以便加深对所学知识的理解。同时，安装和导入 Vue.js 之后，就可以开始开发 Vue.js 相关的代码了，建议读者创建一个演示(Demo)项目，以便后面可以通过动手编写代码来熟悉 Vue.js 中的各个知识点。

下面来检验一下读者对本章内容的掌握程度：

  • MVVM 模式的特点是什么？

  • 如果要从头开发一个项目，用哪种方式安装和导入 Vue?

  • 什么是 Tree Shaking?

  • 什么是配置式 API，什么是组合式 API?

  • Vite 在生产环境中基于哪种模块打包工具？

  • 使用 let、var、const 三种方式声明变量有什么区别？

  • 对于箭头函数 let sum = (num) => num+1，如果采用 ES 5 的写法，该如何写？

  • 在 ES 6 模块化方案中，export 和 export default 有什么区别？

  • async/await 主要用来解决什么问题？