下载掌阅APP，畅读海量书库
立即打开
尤雨溪在2020年9月18日发布Vue3后，其相较于Vue2推出了很多新的功能与特性，并且历经了2～3年的稳定与完善，Vue3已经逐步成了Vue技术体系的新主流。值得一提的是，自2022年2月7日起，Vue3已经成为项目开发的默认安装版本。
Vue2是以JavaScript为开发基础的，而Vue3是从0开始重构的，将开发基础切换为TypeScript，不仅可以满足中小型项目的开发，还更适合中大型项目的构建，而且Vue3为开发人员带来了许多新功能和新变化，所有这些都旨在帮助开发者更好地开发项目和提高框架的整体稳定性、速度和可维护性。
Vue3借鉴了其他框架和库的功能与优势，迸发出了自己的创新灵感，成功实现了API的高度抽象，这样做的目的是使Vue3能够适应更多的应用场景，满足更多的开发群体。现在除前端开发人员以外，后端开发人员也能够快速适应并掌握与应用它了。
那么Vue3具体有哪些显著的改进呢？它又添加了哪些新的功能与特性呢？这里抽取一些具有代表性的特性，进行简单罗列与说明。
Vue3并不是简单的版本与功能升级，而是进行了新版本的重构，它不仅采用了浏览器中的一些新特性，像Proxy与Reflect等，还选择了更适合团队项目开发的TypeScript作为基础，更是将数据响应式的实现从defineProperty更替为了Proxy。Vue的技术团队预测到TypeScript在未来的企业与项目中将有大的发展，因此果断采用这一新程序语言，将弱类型程序语言开发转向强类型程序语言开发。
在Vue2时代，想在项目中集成与应用TypeScript并不是一件容易的事，需要额外安装像vue-property-decorator这种第三方辅助插件，在类型约束与代码提示结合应用时，还不能够实现完美契合。而Vue3默认已经实现TypeScript的完美支撑，开发人员可以利用该开发工具实现强大的语法提示，以及全方位的类型约束，这并不需要第三方的辅助，一切都已内置，从而进行更好的维护与更高效的开发。
虽然Vue3的内在核心发生了翻天覆地的变化，但是其外表并没有改变很多，这也能让原来Vue的开发人员无缝衔接。也就是说，Vue3对于Vue2的功能与语法结构绝大多数是支持的，只是在Vue2的语法结构上再次升级，提供了新的语法结构与功能特性而已。这就让原来的Vue开发人员可以快速学习并且很容易地接纳版本升级后的Vue，甚至Vue3不强制要求开发人员使用TypeScript，开发人员依然可以使用JavaScript进行项目的开发，从而提高项目的性能与开发效率。
Vue3底层的渲染引擎就被做了改进，并且采用新的虚拟DOM算法。渲染方法默认被框架引擎暴露，可以通过函数的引入方式进行调用执行，轻松替代原来旧的渲染引擎操作。而新引擎中的模板编译则是被重新打造的，其使用了更为高效的缓存技术管理与操作渲染的元素内容。这种新的方式可以更好地控制虚拟DOM算法，并且可以利用属性计算的方式进行动态元素的生成处理。
Vue3添加了一些新的内置组件，开发人员可以利用它们来解决一些常见的问题，虽然这些组件的功能在Vue2中也同样可以实现，但一般是以第三方插件进行应用的，而Vue3核心团队已经将其添加到新版本的核心框架中。下面简单罗列一些新添加的内置组件。
1.Fragment
在Vue2中，单文件组件的模板中有且只能有一个根标签来包裹多个子标签，对于下面的代码，div元素则不能省略，否则就会有多个根标签，但从页面显示效果来看，如果外层的div元素不包含自定义样式，那么div元素是没有存在的意义的，因此，Vue2的限制导致组件的页面产生了一层标签嵌套。
Vue3提供了Fragment组件来减少组件外层不必要的根标签，我们可以在组件的模板中使用Fragment组件标签来包裹多个子标签，而在组件最终生成的页面中是不包含Fragment组件标签的，示例代码如下。
Vue3提供了对应的简洁语法，可以使用<></>包裹多个子标签来简化代码，示例代码如下。
在Vue3的组件中，还可以进一步简化代码，其允许用户在模板中直接编写多个根标签，示例代码如下。
2.Teleport
Teleport是瞬移组件，也称为传送门组件，顾名思义，它是一个可以使元素从一个组件转到另一个组件的组件。乍一看这个组件的功能似乎很奇怪，但它有很多的应用场景，如对话框、自定义菜单、警告提示、徽章，以及许多其他需要出现在特殊位置的自定义UI组件。假设现在页面中有两个元素，分别为div元素和button按钮元素，在当前页面中这两个元素是并列元素，代码如下。
但如果想要将button按钮元素放置于div这一目标元素下，则可以直接利用Teleport组件，将button按钮元素内容瞬间移动至目标元素下。例如，设置to属性为“.target-portal”，那么button按钮元素就成了div元素的嵌套子元素，它们不再是并列关系，而是嵌套结构，代码结构如下。
3.Suspense
当等待数据的时间比开发人员希望的时间要长时，应该如何显示为用户定制的加载器呢？在Vue3中无须自定义代码即可实现，只需要通过Suspense组件管理这一过程。该组件除了可以给定默认加载数据后的渲染视图，还可以设置加载数据时的应急视图。例如，在数据加载过程中，会先显示fallback中加载数据时的应急装置组件；在数据加载完毕后，再显示default中默认的渲染视图组件，代码结构如下。也就是说，在Vue3中，开发人员并不需要关心数据加载的状态，新的Vue组合式API将了解组件的当前状态，而且它能够区分组件是正在加载还是已准备好显示。
为了让Vue3的开发更加简洁，开发人员在Vue3中进行了一些API的修改，其中一部分内容是中断式更新，另一部分内容则是添加。不过Vue2的对象化开发方式仍旧被相对完好地保留下来，因此Vue2的语法结构仍旧可以使用，这也是众多开发人员选择Vue而不是其他框架的原因。
Vue3中的变化主要体现在3个方面，分别是新添加了一些语法，比如组合式API（ref、reactive）、初始化应用createApp等；删除了一些API，比如将过滤器替换为计算属性或者函数、事件总线相关API$on和$off替换为第三方库mitt等；更新了一些API，比如v-for和v-of的优先级、v-model等。
接下来简单地介绍一些Vue3的变化，读者可以快速对它们有一个了解，后面章节会进行深入讲解。
1.组合式API
组合式API是Vue3中最为重大的一个升级内容。它提供了一种全新的组件创建方式，使用最为优化的代码编写方式开发项目，而且在组合式API创建的组件中，也完美支持TypeScript类型检查。不仅如此，用户还可以将接口的可重复部分及其功能提取到可重用的代码段中，实现高度代码重用目标。仅此一项就可以使用户的应用程序在可维护性和灵活性方面走得更远。组合式API通常会与<script setup>搭配使用，其中，setup属性是一个标识，用于告知Vue在编译时要进行的一些处理，让用户可以更简洁地使用组合式API。
比如，<script setup>中的导入、顶层变量和函数都能够在模板中被直接使用。下面是使用组合式API与<script setup>创建的组件代码结构。
值得注意的是，Vue3虽然提供了组合式API的新功能，但并不代表传统的选项式API被抛弃了，对于开发人员来说，两种方式的支持可以为其提供更多组件创建方式的选择。
2.filter过滤器的摒弃
Vue2中经常使用的filter过滤器功能，在Vue3中已经不再提供，而是利用一般方法进行数据的过滤筛选操作。
在Vue2中可以使用过滤器，代码如下。
在Vue3中只需要定义一个方法来进行与上面对等的操作，代码如下。
3.bus总线的移除
在Vue2中，通常会给当前的Vue实例添加一个属性，该属性的内容是一个全新的Vue实例对象，利用该实例对象的属性内容可实现任意组件之间的通信操作。正是因为Vue2有$on、$once、$emit、$off等实例方法，所以利用订阅与发布模式的应用方式可以实现任何层次结构之间的消息订阅与事件发布操作。
但是随着业务内容的增多，众多组件之间都需要订阅-发布、发布-订阅，那么整个bus总线的代码结构将会变得非常混乱，甚至可能成为蜘蛛网状的结构，因此在Vue3中移除了这种操作模式。如果在Vue3的项目开发过程中，开发人员仍旧想使用订阅发布模式处理消息，那么官方推荐使用mitt这样的第三方插件进行支撑。
4.不再有全局Vue实例的$mount方法
在Vue2中，我们通常导入整个Vue，并在挂载应用前给全局Vue添加插件、过滤器、混入、指令、组件、路由器和Vuex仓库等，最终对Vue实例进行挂载操作，代码如下。
但在Vue3中，其挂载模式发生了改变，我们需要逐一使用插件、组件、路由器和Vuex仓库等内容，最终实现挂载操作，通常可以采用链式写法，代码如下。
利用这种代码模式，开发人员可以在一个全局应用程序中创建不同的Vue应用，插件、组件、路由器与Vuex仓库等内容在各个Vue应用中都不会产生冲突。
5.v-model
在Vue2中，可以在子组件标签上用v-model来实现父子组件之间的双向通信，它的本质是“v-bind：value”与“v-on：input”的结合。这也就意味着一个子组件标签上只能有一个v-model，如果想绑定其他属性和自定义事件的组合，就需要用.sync修饰符来实现。在Vue3中去除了.sync语法，将v-model语法设计为可以绑定任意属性和任意自定义事件的组合，这样在一个子组件标签上就可以使用多个v-model了。下面展示了v-model的v-bind与v-on的拆解代码。
Vue3将v-model的设计原理进行了改造，v-model不再单纯是“v-bind：value”与“v-on：input”的结合，已经演化为“v-bind：modelValue”与“v-on：['update：modelValue']”的结合，直接绑定modelValue并且监听update：modelValue就可以实现v-model双向数据绑定的操作。因此，原来Vue2中v-model的绑定代码将转化成如下代码。
为什么Vue3需要进行如此的改进与设计呢？因为Vue2中的v-model只能双向绑定一个数据，而Vue3直接改造成了modelValue与update：modelValue的形式，并且可以自定义其他动态属性和事件，所以可以进行多个值的拆解与绑定处理。比如，在一个组件中接收多个属性与事件的发射可以使用下方代码。
那么在组件调用的时候，则可以进行多次v-model的双向数据绑定处理。
如此一来还可以将原来Vue2中的.sync操作模式进行移除处理。
6.样式的强化
在Vue2中操作样式主要包括全局样式、局部作用域样式，以及具有穿透功能的深度样式，而在Vue3中，操作样式还增加了组件作用域样式中的深度作用域选择器、全局选择器、插槽选择器，以及样式模块化与动态样式绑定几个方面，让开发人员在进行页面操作与样式处理时，可以有更多选择。