当用户选择商品后，无论是否选择优惠券，最后都要提交订单，完成支付功能，为实现这个需求，Vant提供了SubmitBar组件，它的功能是用于展示订单金额并提交订单，同时可以根据提交数据时的完整性，实现禁用或正在加载的按钮状态。

商品在展示时，通常会与一些优惠券一起显示，针对这种需求，Vant 提供了专门用于优惠券展示的组件——Coupon，它用于优惠券的兑换和选择，点击CouponCell组件时，以弹框形式进入选择，在选择时，由CouponList组件显示兑换优惠券列表，当选中某项列表后，再次返回CouponCell组件，显示选中项，并减少结算总金额。

业务组件是Vant的一大特点，特别是针对移动端商城开发的业务，有许多组件可以直接运用到通用商城的开发中，代码也十分简单，大大加快了应用的开发速度。在众多的业务组件中，Card 卡片、Coupon 优惠券选择器和SubmitBar 提交订单栏是三款常用的业务组件，接下来结合实例，分别演示它们使用的过程。

Signature组件用于页面的手写签名，它的功能基于Canvas实现，Vant版本必须大于或等于4.3.0才能使用该组件，当完成签名并触发绑定的submit事件后，在事件中，可以获取格式为base64字符串的签名图片，用于保存签名数据和显示签名效果。Signature组件常用的属性如下表11-8所示。Signature组件常用的事件如下表11-9所示。接下来通过一个完整的案例来演示使用Signature组件实现的效果。

Rate 组件常用于对事物评级使用，如商品的质量、用户对服务的满意度等各种评级功能实现，都离不开Rate组件的使用，该组件可以自定义显示的图标、数量和样式，还能显示半星的评分效果，当用户点击图标时，可以获取到最后的评分值。接下来通过一个完整的案例来演示使用Rate组件实现的效果。

在Vant 中，Layout组件用于元素的响应式布局，分别由van-row和van-col两个组件来实现，前者表示行，后者被包裹在van-row组件中，表示列，共有24列栅格组成，在van-col组件中，span属性表示所占列的比例，offset属性表示列的偏移量。

mage是一款常用组件，首先使用Image组件正常加载图片，然后采用遍历的方式加载不同填充模式下的图片，最后演示加载中和加载异常时的图片。在选择图片填充模式时，fill模式下图片会有拉伸和变形的情况，建议使用contain模式，等比展示。

Vant 有丰富的UI组件，而基础组件是全部组件的核心，基础组件中将常用的元素做了二次的开发，封装成Vant格式组件，如按钮、图片和布局等，这些封装后的Vant组件，提供了更多面向实际应用的属性和事件，极大地方便了开发人员的使用。

Vant 是有赞前端团队开源的移动端组件库，适用于手机端的页面，它体积轻量，Vant组件的平均体积仅有8.8KB，压缩后只有1KB;除体积轻量外，可定制又是它的另外一个特点，它不仅提供基础的UI组件，还提供丰富实用的业务组件，特别是在构建商城应用时，增加了许多移动商城内常用的业务组件，十分方便和高效。

由于Pinia是一个非常底层的API模块，因此，它完全可以通过插件来扩展自身的功能，可以扩展的功能通常是一个函数，Pinia通过use方法接收该函数，并将该函数的功能传递给Pinia，从而实现扩展Pinia功能的效果。

Store中的Actions部分，用于定义操作属性的方法，类似于组件中的methods部分，它与Getters都可以操作State属性，但在定义方法时，Getters是对State属性进行加工处理，再返回使用，属于内部计算;Actions则是根据业务逻辑，操作State或Getters保存的值，方法中可以实现异步请求、调用任意的API，属于逻辑层部分。

Getters 是针对State中的属性再次计算，它也是Store 中一个非常重要的组成部分，因为当进入不同页面时，State对象的某个初始值也需要发生相应变化，而Getters 就可以实现这些功能，可以根据不同的页面定义不同的函数，并在对应的页面中执行即可。

在很多情况下，State是Store对象的最重要的组成部分，是Store对象的核心，因为开发者在创建一个Store对象时，首先考虑的是State如何设计。在Pinia中，State是一个返回初始状态值的函数，通过函数的形式，既可以支持客户端，也能响应服务端。

Vue Pinia是一个专门为Vue 3设计的状态管理库，旨在提供一种简单、直观且灵活的方式来处理应用中的全局状态。

虽然缓存数据有利用减轻服务端的频繁请求，优化用户的数据请求体验，但如果一直使用缓存的数据，会使信息过于陈旧，无法满足数据即时性的需求，为了解决这个问题，需要对缓存做使用时间的优化。

一次请求，就是一次对服务器的访问，如果是不经常变化的数据，首次请求成功后，可以通过页面的localStorage对象，将数据缓存到浏览器中，下次再请求时，再取出缓存的数据，用于页面内容的显示，这种缓存数据的方式既减轻了服务器的访问压力，又加快了请求响应的速度，极大地优化了用户请求数据的体验。

完成全局性的axios实例对象配置后，则可以在任意一个组件中直接调用这个对象，发送异步请求，获取服务端返回的数据，同时，针对那些不经常变化的数据，可以在请求过程中，进行数据缓存，并根据设定的缓存时长，定时更新数据，接下来进行详细介绍。

在vue3中，可以使用 app.config.globalProperties来注册全局属性的对象，其中app是通过createApp()方法创建后的Vue实例化对象，它替代了Vue2中的Vue.prototype方式，无论是Vue3中的组件式API还是选项式API，都可以轻松访问到它的值。

配置对象可以在发送请求和实例化axios对象时进行配置，也可以通过 defaults 对象，设置默认的配置值，该配置值的优先级高于模块库的默认值，将会作用于每一个请求，除非在请求时，通过config对象进行变更

在Vue 3中，由于所有的组件都可能去请求数据，因此，针对axios模块的配置应该是全局性的，在进行axios模块的全局配置之前，需要了解axios实例的创建、配置对象和响应对象的结构内容，接下来我们分别来进行介绍。

在Vue3中，通过安装Axios模块来实现数据的异步请求和接收，Axios模块是一个基于Promise网络请求库，可以用于服务端和浏览器中，当用于浏览器时，本质是将XHR对象进行了封装，因此，它的核心依然是XHR对象，接下来详细介绍该模板的使用。

在路由文件中，除了跳转配置外，还可以进行路径重定向配置，如果没有找到对应的地址，还可以实现404的配置，同时，如果某个页面需要权限登录，还可以进行路由守卫配置，接下来，分别对这些配置实现的过程进行详细的介绍。

路由携带参数跳转到目标页面后，页面组件可以接收到携带传入的参数，接收的方式与携带的方式相关，如果是采用查询字符串方式携带，那么可以通过路由中的query对象获取到参数，如果是其他方式，通常都是通过路由中的params对象获取。接下来通过一个实例来演示参数传输和接收实现的过程。

在Vue 3中，由于没有实例化对象this，因此，无法通过this去访问 $route对象，而是通过导入一个名为 useRouter 的方法，执行这个方法后，返回一个路由对象，通过这个路由对象就可以获取到当前路由中的信息，包括参数的读取，接下来进行详细说明。

在Vue 路由数组中，允许配置多级的路由对象结构，可以是二级、三级或者更多级别，最大级别原则上没有限制，但通常最大的是三或四级，这种路由结构，称之为多级路由。

一个配置路由的文件由导入路由模块、创建路由对象和导出路由对象三个部分组成，在创建路由对象时，需要构建路由数组，路由数组中包括一级、二级和多级路由结构，因此，这种结构的路由配置，又称为路由树配置。

在传统的 Web 页面开发过程中，可以借助超级链接标签实现站内多个页面间的相互跳转，而在现代的工程化、模块化下开发的Web页面只有一个，在一个页面中需要实现站内各功能页面渲染，相互跳转，这时些功能的实现，都需要依赖路由来完成。

不仅父组件可以通过插槽方式访问并控制子组件传入的数据，而且可以控制传入父组件时插槽的名称，从而使不同的插槽根据名称的不同，使用场景也不同，例如在一个小区详细页中，可以根据小区类型，调用不同名称的详细页插槽，这种插槽就是动态插槽。接下来，结合一个完整的实例，来演示使用动态插槽，实现一个tab选项卡的功能。

slot 又称插槽，它是在子组件中为父组件提供的一个占位符，使用来表示，通过这个占位符，父组件可以向中填充任意的内容代码，这些代码将自动替换占位符的位置，从而轻松实现在父组件中控制子组件内容的需求。

与父子间传参不同，组件之间的传参需要采用全局组件通讯方案，在个方案下的任意组件，不管是父子、兄弟还是祖先关系，都可以进行传参通讯，而要完成这个方案，则依赖于全局事件总线，由它来完成全局组件通讯的过程。

父组件除了绑定子组件的自定义事件获取传入的参数外，还可以直接访问通过ref属性命名后的子组件，并获取到子组件中的数据，下面通过一个实例来演示它实现的过程。

在父组件中，如果需要获取子组件中的数据，有两种方式，一种是在子组件中自定义事件，父组件绑定该事件，当触发自定义事件时，向父组件传入参数；另一种是先通过ref属性给子组件命名，然后在父组件中就可以调用$refs对象，访问命名的子组件中数据。

Vue 框架中的核心是组件，在页面视图中，大部分的功能和效果都是通过组件来完成的，为了便于功能的复用，又会提取出公共组件;当一个组件去调用公共组件时，它就是父组件，而此时的公共组件就是子组件，那它们是如何传参的呢?接下来进行详细介绍。

在一个组件中，不仅可以定义属性，还能定义事件，同时，在定义的事件中，还可以传递事件参数，校验参数，组件中定义的事件，可以被调用此组件的父级组件监听，当触发子级组件的事件时，可以接收组件传入的参数值，接下来分别进行详细阐述。

组件(Component)是Vue中最强大的功能之一，每个Vue 文件就是一个个独立的组件，组件也可以被其他组件调用，形成嵌套关系，大部分的应用都是由各类不同功能的小组件进行构建，形成一个功能强大的大组件树系统

通过自定义CSS样式实现的动画效果非常有限，还面临浏览器的兼容性问题，因此，如果需要实现一些复杂的动画效果，通常需要引入第三方库来实现，而gsap动画平台则是一个非常不错的选择，该平台不仅支持简单的动画效果，而且还能实现复杂的列表动画。gsap 平台可以针对所有的JavaScript 操作实现动画效果，在transition-group组件中，为了监听动画执行的过程，提供了许多钩子函数，它们的功能如下表5-2所示。

动画不仅可以作用于一个节点或一个组件上，而且还可以作用于多个节点和组件中，例如：当列表中的项目在增加或删除时，希望通过动画的效果来实现，这种动画则需要添加列表动画组件transition-group来完成。transition-group是新增的一个动画组件，它可以在多个元素中应用动画，具有以下特征：默认情况下，它不会渲染组件包裹中某个元素，除非单独指定某一个元素。过渡的模式不可使用，因为它不再相互切换元素的特有效果。元素内部需要提供唯一的属性key值，用于标识动画作用的是哪个元素。

gsap它的全称是GreenSock Animation Platform，它是一个功能非常强大的动画平台，它可以对JavaScript操作的所有内容实现动画效果，同时，还解决了不同浏览器中存在的兼容性问题，而且速度和效率都非常快，全球超过1000万过站点都在使用它提供的动画。在使用gsap 平台提供的动画之前，首先需要在项目文件夹下，通过下列指令来安装gsap 框架，指令如下所示。安装成功后，在需要使用该动画效果的组件中导入该库文件，代码如下。

在实际的项目开发中，如果自定义元素的动画，不仅效率低下，代码量大，而且还存在浏览器的兼容性问题，因此，可以借助一些优秀的第三动画库来协助完成动画的效果，如animate.css和gsap动画库，前者使用样式，后者通过JavaScript来实现动画效果。今天先给大家分享animate.css知识，如果有所帮助，大家点点关注支持一下，也可以联系上我一起学习。

transition 组件中的动画效果取决于元素应用哪种CSS 动画规则，前面小节中介绍的过渡动画使用了CSS中的transition 属性，而自定义动画则可以使用animation 属性来完成，接下来通过一个示例来演示自定义动画实现的过程。1. 功能描述在上述示例5-1的基础上，当首次点击按钮时，元素将以自定义动画的形式，先放大1.25倍，再缩小至隐藏，再次点击按钮时，元素将以反向的动画形式显示，同时，按钮文字动态显示元素的状态。2. 实现代码。