1.2.4 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中，操作样式还增加了组件作用域样式中的深度作用域选择器、全局选择器、插槽选择器，以及样式模块化与动态样式绑定几个方面，让开发人员在进行页面操作与样式处理时，可以有更多选择。