Vu基础及其开发8

第六章Vue进阶学习目标熟悉Vue中全局API、选项式API、组合式API和响应式编程的使用了解Vue中的虚拟DOM及其算法介绍熟悉Vue中过渡和动画的使用通过案例熟练掌握Vue的使用技巧Vue的学习除了其基础的应用知识，如实例、指令和组件等核心基础知识外，如果想要更全面地了解Vue,还需要从其提供的API入手。在本章中，我们将深入学习Vue的各种API使用，以及其数据驱动的底层技术虚拟DOM的介绍。此外，我们还将探讨在开发中更多实用的Vue功能。全局API12选项式API3组合式API4过渡和动画5虚拟DOM介绍6案例：图书管理页面的改造全局APIApplicationProgrammingInterface简称API，表示应用程序编程接口。一般来说，API是指一套有明确定义的软件之间通信和数据交换的方法。在Vue中我们可以理解为，Vue定义了一套丰富的API方法，通过这些API可以实现Vue的各种功能。全局API指的是挂载在Vue上的方法或对象，这些API可以直接在Vue中使用或者通过app实例进行调用。之前的章节中，我们使用的createApp()、app.mount()、ponent()等都是全局API。全局API分为应用实例API和通用API两种。

全局APIAPI说明createApp()创建应用实例createSSRApp()以服务端渲染SSR激活模式创建一个应用实例app.mount()挂载应用实例app.unmount()卸载应用实例vide()全局提供一个值，可以在应用的任何后代组件中使用ponent()注册一个全局组件app.directive()注册一个全局指令app.use()安装一个插件。app.mixin()应用一个全局mixin混入的数据（Vue3中推荐使用组合式API代替mixin）app.version提供当前应用所使用的Vue版本号app.config应用的配置对象app.config.errorHandler全局错误处理函数app.config.warnHandlerVue运行时警告处理函数app.config.performance在浏览器开发工具的“性能/时间线”页中启用对组件初始化、编译、渲染和修补的性能表现追踪pilerOptions配置运行时编译器的选项。app.config.globalProperties一个用于注册能够被应用内所有组件实例访问到的全局属性的对象。app.config.optionMergeStrategies一个用于定义自定义组件选项的合并策略的对象。应用实例API：全局API通用API：API说明version暴露当前所使用的Vue版本。nextTick()等待下一次DOM更新刷新的工具方法。defineComponent()在定义Vue组件时提供类型推导的辅助函数。defineAsyncComponent()定义一个异步组件defineCustomElement()和defineComponent接受的参数相同，不同的是会返回一个原生自定义元素类的构造器。在上述表中，除了带有app.前缀的API是需要创建应用实例后才能调用的，其他的API都可以直接通过从Vue中引用来使用。下面我们就来讲解一些常用的全局API的使用。全局API1．createApp()创建一个应用实例。createApp()方法需要传入两个参数：第一个参数是根组件,第二个参数为可选的根组件属性。它会返回一个创建的app的应用实例对象。

2．app.mount()通过createApp()方法创建应用实例后，我们可以使用该实例对象调用mount()函数将应用实例挂载到一个DOM容器元素上。只有将应用实例挂载到对应的#appDOM元素上，才能实现Vue的响应式等操作。App.mount()方法调用后会返回一个根组件对象，我们可以使用该根组件对象来获取或更新根组件的一些状态。需要注意的是，每个应用实例只能调用一次mount()方法。全局API3．app.unmount()卸载应用实例，卸载一个应用会触发该应用组件树内所有组件的卸载生命周期钩子，比如unmounted()钩子。

上述代码中，通过设置一个延迟3秒的计时任务，再执行卸载应用实例操作。待3秒后会执行unmounted钩子函数。卸载应用实例后，#app元素内绑定的内容也会被清空。全局API4．Vue插件和app.use()插件(Plugins)是一种能为Vue添加全局功能的工具代码。插件都是带install(app,options)方法的对象，install()方法中第一个参数为应用实例对象，第二个参数为安装插件传入的参数。这里以一个反转字符串内容的插件为例。

定义好插件后，就可以在全局使用。app.use()方法负责安装插件，只有安装后才能在全局使用。app.use(plugin,options)函数接收两个参数：要安装的插件对象和可选的options参数。运行上述代码，就可以在浏览器中看到$revese方法中的内容被反转了过来。需要注意的是，若app.use()对同一个插件多次调用，该插件只会被安装一次。全局API5．app.mixin()混入(mixin)是Vue2中的一个可以让组件逻辑复用非常灵活的功能，一个混入对象可以包含任意组件选项，当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项，而app.mixin()表示全局混入，全局混入的选项可以在任意组件中使用。

代码中，通过app.mixin()全局混入了data和mounted钩子函数，可以发现mixins是可以实现逻辑复用的。除了可以使用app.mixin()全局混入外，还可以通过在组件中定义mixins选项实现局部的混入。全局API通过mixin混入的选项会存在多个混入时命名冲突、依赖不好追溯、排除问题麻烦难以维护等缺陷，所以在Vue3中并不推荐使用mixin，而是推荐使用组合式API方式实现逻辑的复用。当然Vue3中依然保留了mixin的功能，主要是为了向后兼容，因为生态中有许多库使用到了mixin。全局API6．app.config.globalProperties在Vue2中，通过使用Vtotype来定义Vue实例的原型属性的方式，可以创建被所有组件实例访问的属性。然而，在Vue3中，这种写法已被移除，并且使用app.config.globalProperties来代替Vtotype。通过在全局属性中定义属性之后，你可以像在组件的data中定义的属性一样使用它们。

温馨提示如果全局属性与组件自身属性存在命名冲突，按照就近原则，组件定义的属性将具有更高的优先级。这意味着，在访问属性时，组件内部定义的属性将覆盖全局属性。全局API7．nextTick()在Vue中，当我们更改响应式状态时，DOM的最终更新并不会立即生效，而是由Vue将这些更新缓存在一个队列中，直到下一个“tick”计时任务触发时才一起执行。这样做的目的是为了确保每个组件在发生多次状态改变时只执行一次更新操作，从而避免频繁的渲染，提高渲染效率。然而，如果我们希望在响应式数据状态改变后立即使用更新后的DOM进行操作，可以使用nextTick()回调函数来完成。

代码中，我们在mounted钩子函数中调用了getMsg()方法。在getMsg()方法中，我们修改了msg的状态，并通过日志打印了#msg元素的文本内容，以判断是否成功获取到更新后的DOM元素内容。全局API运行代码后，可以观察到在nextTick()函数调用之前，获取到的仍然是未更新的msg状态，但是在nextTick()函数中，我们可以获取到已经更新后的DOM内容。如图所示。

全局API如果在异步任务中（如网络请求等），也可以在nextTick()回调中获取到更新的DOM。全局API12选项式API3组合式API4过渡和动画5虚拟DOM介绍6案例：图书管理页面的改造选项式API选项式API是指在组件中可选择设置的API。它包括了一系列可以用来定义组件行为的选项，例如data、watch、computed、methods、props、template以及生命周期函数等。下面我们介绍几个常用选项式API的使用。1．data()data()方法用于声明组件初始化的响应式状态（数据），其返回值为一个JavaScript对象。在data()函数中声明的属性会被Vue创建setter和getter，并转换为响应式数据。通常，在组件创建后，可以通过`this.$data`访问data()返回的响应式对象。由于组件实例会代理组件的data对象的所有属性，因此可以直接使用`this`访问这些属性。在开发中，不推荐在data()中动态添加属性。开发者应提前将要使用的属性声明在data()中，它们的初始值可以设为`undefined`或`null`。此外，需要注意的是，在命名data()对象中的属性时，应尽量避免以`_`或`$`开头，因为这样的属性不会被Vue代理，也就意味着不能直接使用`this`来调用它们。其实_或$开头的属性大多数是Vue内置属性或API的命名，为了避免冲突所以开发者命名时尽量避开_或$，如果使用了_或$开头命名需要使用this.$data._property访问它们。

选项式API2．extendsextends用于表示一个组件选项继承自另一个组件，包括data、methods等选项。与mixins不同，mixins是基于组合实现选项的复用，但依赖关系不够清晰；而extends关注的是明确的继承关系，依赖层次也更加清晰。在上述代码中，组件MyCom继承了BaseCom，因此在MyCom组件中可以使用从BaseCom继承下来的title属性。然而，如果MyCom组件中存在与BaseCom中相同的属性或方法，则遵循就近原则，优先使用MyCom组件自身的选项。

选项式API3．namename选项用于为组件声明一个名称。组件的名称主要用于在组件模板中递归引用自身、在Vue开发者工具中的组件树中显示，以及在抛出警告的追踪信息中使用。在单文件组件开发中，Vue会根据文件的名称为组件自动分配名称，因此在大多数情况下无需手动声明name。然而，在HTML文件中使用组件时，我们需要手动声明name属性。比如<keep-alive>组件需要根据组件的name进行include和exclude操作等。

选项式API4．组件实例选项API任何组件实例上都会暴露一些内置的属性和方法，它们都是以$开头的API。如表所示。

API说明$data获取data选项中返回的对象$props获取组件当前已解析的props对象。$el获取组件的DOM根节点$options获取已解析的用于实例化当前组件的组件选项。$parent获取父组件实例，如果是顶层组件则返回null$root获取当前组件树的根组件实例。如果当前实例没有父组件，那么这个值就是它自己。$slots获取父组件所传入插槽的对象$refs获取一个通过模板注册的包含DOM元素和组件实例的对象$attrs一个包含了组件所有透传attributes的对象。$watch()用于命令式地创建侦听器的API。$emit()在当前组件触发一个自定义事件。$forceUpdate()强制该组件重新渲染$nextTick()绑定在实例上的nextTick()函数。表中的大部分

API可通过说明来了解其用法。下面我们将详细介绍$refs的使用。选项式API虽然Vue的声明性渲染模型为我们抽象了大部分对DOM的直接操作，但在某些情况下，我们仍然需要直接访问底层DOM元素进行操作。然而，在Vue中并不推荐直接访问DOM进行操作，因为这样可能导致无法得知DOM的状态、增加DOM节点操作的开支和性能损耗等缺点。在Vue中推荐使用ref属性来实现DOM操作。当我们给DOM元素或组件添加了ref属性后，它允许我们在特定的元素或子组件实例挂载后，获取对它的直接引用。通过这个引用，我们可以对DOM元素或组件进行操作。在使用选项式API定义组件时，当组件挂载后，引用将会被注册在组件的this.$refs对象中。我们可以使用this.$refs对象来访问并操作DOM元素。选项式APIref也可以用在带有v-for的元素上，用于获取一组DOM元素，如程序所示。

ref引用同样可以用于子组件上。如果在选项式API中使用ref，那么通过this.$refs获取的将是子组件的实例。在这种情况下，父组件可以通过ref的方式完全访问子组件的每个属性和方法。换句话说，父组件可以像访问子组件的this一样使用this.$refs。

然而，需要注意的是，在父组件和子组件之间的数据传递中，只在绝对需要时才使用组件引用。在大多数情况下，应优先使用标准的props和emit接口来实现父子组件之间的交互。这样可以更好地遵循单向数据流的原则，使组件之间的通信更加清晰和可维护。全局API12选项式API3组合式API4过渡和动画5虚拟DOM介绍6案例：图书管理页面的改造组合式API1．组合式API介绍在传统的开发方式中，我们通常使用选项式API进行开发。选项式API的优点在于代码结构清晰，计算属性、监听器、方法定义等都被放置在指定的位置。然而，随着组件业务的复杂度增加，代码量也会不断增长。这导致处理特定逻辑关注点的代码被拆分在不同的选项中，而在一个几百上千行代码的文件中寻找特定代码逻辑变得困难。这种情况下，代码的复用性变差，整体代码逻辑也难以阅读和维护。为了解决这个问题，组合式API应运而生。组合式API（CompositionAPI）是Vue2.7及Vue3中提供的内置功能。它是一组低侵入性的、函数式的API。使用组合式API可以把相同功能的所有代码都写到一块集中进行开发，使得代码结构更清晰，逻辑更易读。此外，组合式API还提供了更好的类型推导和更小的生产包体积等优点。以下是组合式API和选项是API后文件中代码结构差异，如图所示。

组合式API组合式API不仅支持逻辑的组合，还提供了许多其他功能的组合式API，包括响应式编程组合式API、生命周期钩子组合式API和依赖注入组合式API，以方便开发者进行日常业务的开发。组合式API2．setup函数setup()函数是使用组合式API的入口，在组件中的逻辑组合通常需要在setup()函数中编写。setup()函数在beforeCreate生命周期钩子执行之前调用。由于setup()在组件实例创建之前执行，因此在函数内部不能使用this关键字。在setup()函数中，应避免使用选项式API定义的data、methods等，因为在执行setup()函数时，这些选项还未被解析。我们应该使用组合式API提供的函数来创建响应式数据、计算属性、监听器等。同时，可以通过ref()和reactive()函数来定义和处理数据，以及使用computed()函数创建计算属性。

setup()函数中返回的对象将成为组件实例的属性，并且可以在模板中访问。setup()函数也可以直接访问props属性对象和setup的上下文对象。组合式API

在代码中，setup()函数中的count是暴露给组件实例或模板使用的属性。需要注意的是，当前的count是非响应式的，这意味着即使通过事件改变了count的值，它也不会自动更新。如果想要将count变成响应式的，需要借助后续要介绍的响应式组合API来实现。setup()函数的props参数为组件的属性值，这里的props不能使用ES6的解构语法不然props将会变成非响应式的；context参数为setup()的上下文对象，里面包含了组件透传的属性attrs、组件插槽对象slots、组件的自定义回调函数emit等。组合式API温馨提示组件透传属性指的是没有在props中定义但是父组件中依然可以使用的，如：id、class、style等属性。

setup()函数还可以返回一个h()渲染函数，以替代使用模板。h()渲染函数的作用是创建虚拟DOM节点，可以通过指定元素名称或组件对象的方式将元素和组件渲染到DOM中。在h()渲染函数中可以直接使用在同一作用域下声明的响应式状态，一旦使用了渲染函数，如果想要返回一些暴露属性就不能够通过return的方式，需要借助于expose()函数。组合式API

代码中，使用的h渲染函数要通过import的方式导入进来，但是expose函数式context上下文对象的函数，这里通过解构赋值的方式使用。组合式API3．响应式编程响应式编程基础Vue的响应式系统是其核心功能之一。当组件的状态具有响应性时，意味着当我们更改组件状态时，视图会自动更新以响应这些更改。在选项式API中，当我们在data()函数中定义一个对象时，Vue会将该对象中的属性转化为响应式状态。而且，这种响应式状态是深层次的，也就是说如果在data()返回对象中定义了嵌套的对象或数组，它们的改动也会被检测到并触发相应的视图更新。那Vue是怎么实现响应式的呢？我们知道默认JavaScript对象是不具备响应式的，我们来看下面一段JavaScript的代码。组合式API

运行上面的代码，发现两次打印C的结果都为30。尽管代码中A的值发生了变化，但是C的值并没有自动重新计算（A+B），也就是说C不具备响应式。要获取A更新后的C的值，我们可以定义一个trigger()函数，用于手动触发对A+B的重新计算。除此之外，还需要能够检测到A或B的变化，并在它们发生变化时调用trigger()函数来更新C的值。

在JavaScript中，无法直接追踪局部变量的读写操作。然而，JavaScript提供了追踪对象属性读写的功能，这也是Vue实现响应性的原理所在。在JavaScript中，有两种劫持属性访问的方式：使用getter和setter方法以及使用代理对象Proxy。

在Vue2中，使用getter和setter的方式主要是为了兼容旧版本的浏览器。通过在对象上定义getter和setter方法，可以拦截对属性的访问和修改操作，并在其中实现响应式的逻辑。而在Vue3中，引入了ES6的Proxy对象来创建响应式对象。Proxy可以代理目标对象，并在访问和修改属性时拦截操作，从而实现响应式的功能。这里我们就使用代理对象Proxy的方式实现让之前案例中的C具备响应式。组合式API

使用setter/getter的方式，对象的属性需要在初始化时被定义，无法动态添加响应式属性。并且深度监听需要递归遍历对象的所有属性，并为每个属性设置setter/getter，这对性能有一定的影响。setter/getter方式默认也无法监听数组的变化，需要通过特定方法处理才能实现数组的响应式。

Proxy可以动态地代理对象的属性访问和修改操作，无需初始化时定义属性。Proxy可以一次性代理整个对象，不需要递归遍历每个属性。Proxy也可以直接监听数组的变化。相比起使用setter/getter，Proxy不仅可以实现动态代理、直接监听数组变化，也具有更好的性能。组合式API

在上述代码中，我们将对象A和B定义为需要被代理的对象，并使用ES6提供的Proxy对象创建了它们的代理对象proxyA和proxyB。为了实现代理对象的行为，我们使用了一个名为handler的对象来定义set和get处理函数。

在运行代码后，我们可以观察到当A或B的值发生改变时，会触发代理对象的set函数。利用这个特性，我们可以在set函数中触发更新事件，从而得到A+B的一个响应式的结果。组合式API

在上述代码中，当A或B对象的value属性发生变化时，触发了trigger()函数进行更新操作，从而获得了自动更新的值C，实现了C的响应式状态。这种代理方式也是Vue3中所采用的，用于监听对象的属性变化，从而实现响应式的操作。许多响应式的API也是基于这种代理方式实现的，例如reactive()等。当然，在Vue中，对象的代理不仅仅用于触发DOM的更新，还涉及到了计算属性和侦听器等更多的功能。组合式API响应式API在setup()函数中定义的属性，虽然可以直接在模板或组件中使用，但是它们并不具备响应式的特性。这与Vue的响应式设计不符合。为了解决这个问题，Vue提供了一些核心的响应式API，用于实现属性的响应式操作。在本小节中，我们将介绍几个常用的响应式API的使用方法。ref()ref()函数可以接收一个内部值，并返回一个具有响应式特性的ref对象。当对象访问或修改值时，Vue能够捕捉到这些操作，并在视图中进行更新。该对象只包含一个value属性，用于存储传入的内部值。通常情况下，ref()用于创建单一的响应式数据，如基本类型、对象或数组。通过ref()创建的响应式数据，需要使用.value来访问和修改实际的值。组合式API

在代码中，我们使用了ref函数创建了一个名为count的响应式对象，初始值为10，并且count变量可以直接在模板中使用，而无需访问.value属性。通过count.value，可以修改count的值，并且这些变化将会被自动追踪。当运行代码并通过点击事件触发incr()函数时，页面中的count数值将会相应地更新。组合式API

使用ref函数还可以指定响应式变量的类型。可以将类型作为ref函数的泛型参数传递给它，以明确指定变量的类型，如下所示：

上述代码中，使用ref<number>来创建一个响应式的数值变量count。通过指定泛型参数number，明确告诉Vuecount应该是一个数值类型的变量。这样，在编译时和开发工具中，将会对变量的类型进行检查，提供更好的类型安全性。温馨提示ref()默认进行深层次的响应式转换。当我们将一个对象赋值给ref()时，该对象会通过reactive()函数转换为具有深层次响应式的对象。这意味着，如果对象中包含嵌套的ref，那么这些嵌套的ref也会具备响应式特性。如果希望避免进行深层次的转换，可以使用shallowRef()来代替ref()。constcount=ref<number>(0);组合式APIreactive()ref()通常适用于创建单一的响应式数据。如果想要创建一个复杂的响应式数据如嵌套对象或对象属性，可以使用reactive()函数。reactive()函数返回一个对象的响应式代理，可以直接访问和修改内部的属性，并且Vue能够捕捉到这些操作，并在视图中进行更新。reactive()的用法，如右图所示。组合式API

上述代码中，使用reactive()函数创建了一个响应式对象obj，当通过changeObj函数修改obj对象的count值后，使用obj.count的视图也随之更新。

reactive()的响应式转换跟ref()一样默认也是深层次的，如果只希望保持对象顶层次访问的响应性，可以使用shallowReactive()来代替reactive()。

使用reactive()函数可以动态添加或删除对象的属性，并确保这些属性也具备响应式特性。组合式API

reactive()创建的响应式对象，配合toRef()和toRefs()函数可以将对象的属性转换为响应式引用，使得属性引用能够在解构或传递参数时保持响应式。

toRef函数接受一个响应式对象和对象属性的键，并返回一个新的ref对象。返回的ref对象与原始属性相关联，即当原始属性发生变化时，ref对象的值也会同步更新。toRef函数常用于将响应式对象的某个属性提取为独立的响应式引用，方便在组件中使用。

toRefs函数接受一个响应式对象，并返回一个包含所有属性的ref对象集合。组合式APIcomputed()与选项式API的computed一样，computed()函数在Vue3中用于创建响应式的计算属性。通过传递一个getter函数，它返回一个只读的响应式ref对象。

代码中，discountPrice是通过computed()计算后返回的新结果，并且当price的值修改之后，discountPrice的值也会随之进行响应式计算。组合式APIwatch()与选项式API的watch一样，watch()函数在Vue3中用于侦听一个或多个响应式数据源，并在数据源变化时触发回调函数。watch()函数有三个参数：第一个参数是要侦听的数据源，第二个参数是在数据源变化时执行的回调函数，第三个参数是配置侦听的选项对象。下面是watch()函数的使用案例。组合式API

代码中，watch()可以实现一个ref对象的侦听，也可以实现一个复杂reactive对象属性的getter函数侦听，也可以使用数组的方式实现多个响应式数据的侦听。组合式APIwatchEffect()watch()默认是懒侦听的，即仅在侦听源发生变化时才执行回调函数。如果想要实现对响应式属性变化的追踪，可以使用watchEffect()函数。watchEffect()可以立即运行一个函数，并响应式地追踪其依赖关系，在依赖关系发生更改时重新执行该函数。跟watch()不同的是，watch()需要指定要侦听的属性，而watchEffect()不需要指定要侦听的属性，只要在其回调函数中使用了响应式属性，就可以侦听到该属性的变化。组合式API运行上述代码后，如果修改了user对象的属性，在浏览器的控制台中查看日志，会发现watchEffect()函数被触发。默认情况下，watchEffect()函数会在组件渲染之前执行。如果想在组件渲染之后执行watchEffect()函数，可以在watchEffect()函数中添加第二个选项参数，并设置flush:'post'，或者使用watchPostEffect()函数。在某些场景下，可能需要在响应式依赖发生改变时立即触发侦听。为了实现这个需求，可以通过设置flush:'sync'选项或使用watchSyncEffect()函数来实现。组合式API4．生命周期钩子在setup()函数中，可以使用组件的生命周期钩子函数。这些组合式的生命周期钩子函数会在组件的setup()阶段被同步调用，以便我们可以灵活地组合逻辑。除了beforeCreate和created钩子函数（这两个钩子函数的逻辑等同于直接在setup()中编写），其他的生命周期钩子函数都有对应的组合API，这些组合API的命名规则是在选项式API的名称前面加上on前缀。选项式和组合式API对照如表所示。选项式API组合式APIbeforeCreate()setup()created()setup()beforeMount()onBeforeMount()mounted()onMounted()beforeUpdate()onBeforeUpdate()updated()onUpdated()errorCaptured()onErrorCaptured()renderTracked()onRenderTracked()renderTriggered()onRenderTriggered()activated()onActivated()deactivated()onDeactivated()beforeUnmount()onBeforeUnmount()unmounted()onUnmounted()以上表中的所有钩子函数需要通过import导入才可使用。组合式API下面以常用的几个生命周期钩子为例。在代码中，由于在setup()函数中无法使用this，我们使用了ref()函数来关联ref属性并操作DOM。如果组件同时定义了选项式API的生命周期钩子函数，那么这两者不会冲突，而是都会被执行。只不过由于组合式API的生命周期钩子函数是在setup()函数中同步调用的，所以会先执行setup()函数中的组合式生命周期钩子函数。全局API12选项式API3组合式API4过渡和动画5虚拟DOM介绍6案例：图书管理页面的改造过渡和动画1．CSS3动画熟悉CSS3的读者应该知道，CSS3中的transform属性提供了2D和3D转换功能，可以实现元素的移动、缩放、旋转、拉伸等操作。过渡和动画CSS3还提供了transition属性，用于实现一些过渡效果，例如正常状态和悬停状态之间的过渡动画等。CSS3还提供了@keyframes规则可以让开发者自定义动画效果，可以代替使用图像、Flash动画或JavaScript实现的效果，极大地方便了动画的开发和实现。过渡和动画Vue中的动画基于CSS本身实现，但Vue提供了<Transition>和<TransitionGroup>两个内置组件,可以使开发者在使用动画时更加便捷。这些组件可以帮助开发者创建基于状态变化的过渡和动画效果。

2．内置组件<Transition><Transition>是Vue的内置组件，可以在任何元素或组件中直接使用，但组件必须只有一个根元素。<Transition>可以在元素或组件进入和离开DOM时应用动画效果。它通过默认插槽将动画传递给其子元素或子组件。<Transition>的基本使用<Transition>组件的动画通常在使用v-if指令、v-show指令或者<component>切换组件时触发。在使用<Transition>组件时，需要指定特定的CSS类来设置动画效果。下面以transition过渡动画为例来看下<Transition>的基本使用过渡和动画运行代码后，点击切换动画按钮，会发现在元素显示和隐藏的过程中应用了事先定义好的过渡动画。在实现这一效果时，关键点不仅在于使用<Transition>组件将需要应用动画的元素或组件包裹起来，还在于使用了6个与进入和离开过渡效果相关的CSS类。这6个CSS类分别对应元素或组件从隐藏到显示以及从显示到隐藏的6个不同动作。过渡和动画v-enter-from：进入动画的起始状态。在元素或组件插入页面之前添加，在元素或组件插入完成后的下一帧移除。v-enter-active：进入动画的生效状态。应用于整个进入动画阶段。在元素被插入之前添加，在过渡或动画完成之后移除。这个class可以被用来定义进入动画的持续时间、延迟与速度曲线类型。v-enter-to：进入动画的结束状态。在元素插入完成后的下一帧被添加，在过渡或动画完成之后移除。过渡和动画v-leave-from：离开动画的起始状态。在离开过渡效果被触发时立即添加，在一帧后被移除。v-leave-active：离开动画的生效状态。应用于整个离开动画阶段。在离开过渡效果被触发时立即添加，在过渡或动画完成之后移除。这个class可以被用来定义离开动画的持续时间、延迟与速度曲线类型。v-leave-to：离开动画的结束状态。在一个离开动画被触发后的下一帧被添加，在过渡或动画完成之后移除。过渡和动画过渡命名通过上述6个特殊的CSS类，我们可以基于CSS的transition或@keyframes来实现组件进入和离开的动画效果。但是如果想要对多个<Transition>组件实现不同的动画效果，可以通过设置name属性进行区分。如果没有设置name属性的<Transition>组件，其CSS类会以v-为前缀进行命名。而设置了name属性的<Transition>组件，其CSS类需要以name值作为前缀进行命名。过渡和动画自定义过渡类名如果想自定义过渡类名，<Transition>组件同样提供了6个props来满足需求。这些props分别是enter-from-class、enter-active-class、enter-to-class、leave-from-class、leave-active-class和leave-to-class。通过设置这些属性，我们可以使用第三方动画库（例如Animate.css）来实现自定义的过渡效果。过渡和动画钩子函数在开发中，有时候我们需要做一些转场动画或在动画执行完后进行其他操作。为了实现这个需求，我们需要知道动画何时执行完毕，而动画执行完毕的回调操作可以通过<Transition>组件提供的回调钩子函数来实现。<Transition>组件提供了8个可绑定的回调钩子函数。如表所示。钩子函数说明@before-enter过渡被插入前调用@enter插入过渡开始时调用@after-enter当进入过渡完成时调用@enter-cancelled插入过渡取消时调用@before-leave移除过渡前调用@leave移除过渡时调用@after-leave移除过渡后调用@leave-cancelled移除过渡取消时调用过渡和动画下面以从隐藏到显示过渡执行完毕后进行提示为例。过渡和动画开发者如果想要使用JavaScript实现动画，需要给<Transition>添加一个:css="false"属性，以跳过Vue对CSS过渡的自动探测。这样做既可以防止CSS属性的干扰，也可以提高性能。在这种情况下，尽管可以自行实现过渡中各个过程的动画控制，但是@enter和@leave两个钩子函数比较特殊，需要使用函数类型的done来确保钩子函数的异步调用，否则过渡将立即完成。过渡和动画可复用的过渡效果在开发中，如果很多组件或元素的过渡效果都是相同的，那么可以利用Vue组件来封装和复用这些过渡效果。为此，需要创建一个专门用于封装过渡效果的组件，并提供插槽以便插入其他元素或组件。过渡和动画默认情况下，<Transition>只会在切换时加载动画，但通过设置appear属性，可以使过渡效果在初次渲染时就应用过渡效果。温馨提示对于大多数的过渡效果，CSS属性尽量使用transform和opacity之类，因为这些属性不会影响到DOM结构，也就不会使得CSS布局重新进行计算，性能比较的高效。过渡和动画3．内置组件<TransitionGroup>和<Transition>类似，<TransitionGroup>也具有相同的属性、过渡类名和钩子函数。主要区别在于<TransitionGroup>用于对使用v-for指令生成的元素或组件列表进行插入、移除和顺序改变时添加动画效果。在使用<TransitionGroup>时，通常需要添加一个tag属性来指定容器元素进行渲染，并且每个列表元素都需要指定一个唯一的key属性。下面以ul列表渲染为例。过渡和动画

在代码中，对元素的添加和删除使用了

animate.css的过渡效果。此外，对于列表中的移动元素，也使用了类名为*-move的过渡效果。然而，需要注意的是，并非所有的过渡效果都会非常平滑，但可以通过一些CSS规则进行调整和优化。全局API12选项式API3组合式API4过渡和动画5虚拟DOM介绍6案例：图书管理页面的改造虚拟DOM介绍Vue的渲染系统基于一种叫做“虚拟DOM”的机制实现，它使得Vue能够在同步真实DOM渲染的同时保持高效的性能。在过去，更新页面通常涉及查找目标DOM对象，然后通过DOM对象修改内容或样式来实现更新。然而，当页面中DOM结构变得庞大且复杂时，每次查询DOM都需要遍历整个DOM树，或者在添加或删除DOM元素时可能需要重新渲染整个DOM树。这种方式非常耗费性能，导致渲染效率低下。为了解决这些问题，虚拟DOM的概念应运而生。虚拟DOM（VirtualDOM），最早是由Facebook团队提出并率先应用到React框架中，随后更多的框架都应用上了虚拟DOM技术，Vue从2.0版本开始引入虚拟DOM的概念。虚拟DOM是一种编程概念，本质是使用树形结构的JavaScript对象对真实UI的DOM结构进行“虚拟”的描述；这个JavaScript对象包涵了我们创建实际元素所需的所有信息也包括子节点信息。虚拟DOM介绍上述代码中，就是定义了一个vnode的虚拟DOM对象，通过这个虚拟DOM对象可以构建一个包含div元素和三个p子元素的页面结构。虚拟DOM与真实DOM结构保持一致，但只是内存中的表示。Vue使用虚拟DOM来跟踪组件的状态变化。当数据发生变化时，Vue首先会在虚拟DOM树中进行更新，这是一个快速且轻量的操作。然后，Vue通过diff算法（差异比对算法）会将虚拟DOM与上一次的虚拟DOM进行对比，找出真正需要更新的部分（差异），并仅更新这些部分到真实的DOM中。这种差异更新的方式减少了很多不必要的DOM操作，如回流和重绘情况，大大提高了渲染的效率。Vue中虚拟DOM的工作步骤，如图所示。虚拟DOM介绍①构建Vue或使用运行时编译器时，会将Vue的template模板编译为render渲染函数（或者不使用模板编译而是直接手写的渲染函数），这个渲染函数会返回整个虚拟DOM树，这个阶段被称为编译阶段（compile）。②当运行时，渲染器会调用渲染函数，并遍