项目7 Vue组合式编程

7使用组合式API实现选项卡功能使用组合式APIonetask01PARTONEVue组合式编程概述Vue组合式编程概述01什么是组合式API？传统选项式API的挑战Vue组合式编程概述01什么是组合式API？Vue组合式编程概述01三大核心响应式APIVue组合式编程概述01组合式API与选项式API对比选项式API依赖于data、methods、computed等选项，代码分散在不同部分，逻辑复用困难。组合式API通过setup函数作为入口，使用reactive、ref等响应式API，代码组织更清晰，逻辑复用更直观。组合式API在使用TypeScript时提供了更好的类型推断和类型检查，使得开发体验更好。对于复杂的组件，组合式API提供了更清晰和直观的方式来组织和管理组件内部的状态和逻辑。02PARTONEsetup函数与响应式APIsetup函数是什么？setup函数是什么？setup参数详解:参数1：propssetup函数是什么？setup参数详解:参数2：contextreactive函数的使用方法reactive核心特性特性1：Proxy代理机制reactive核心特性特性2：深层响应式reactivevsrefcomputed的使用方法computed的使用方法Getter函数（最常用）03PARTONE选项卡切换应用开发响应式APIref与reactive的使用ref用于创建一个响应式的引用对象，可以包裹任意类型的值，包括基本类型和对象。reactive用于创建一个响应式对象，会递归地将对象的所有属性都转换为响应式的。例如，使用ref创建一个计数器变量count，通过count.value来访问和修改其值。使用reactive创建一个包含多个属性的对象state，可以直接通过state属性名来访问和修改其值。computed与watch的使用computed用于创建计算属性，依赖于其他响应式状态，当依赖的状态发生变化时，计算属性会自动重新计算。watch用于监视数据的变化，当监视的数据发生变化时，会执行指定的回调函数。例如，使用computed创建一个doubleCount计算属性，其值为count值的两倍。使用watch监视count的变化，当count的值发生变化时，执行回调函数进行相应的操作。任务需求与分析使用Vue组合式编程编写一个选项卡切换应用，在页面上显示切换卡项，随着切换，下侧图片也发生相应变化。初始状态选中的是第一个选项卡，下方显示对应的图片。该应用需要实现点击不同的选项卡，切换对应的图片显示，并且在选项卡和图片之间建立正确的关联关系。要完成此任务，需要对Vue组合式编程有一定认识，包括理解setup函数、响应式API的使用方法等。可以使用ref来创建响应式的当前选中选项卡索引，使用v-for指令来渲染选项卡列表和图片列表。通过监听选项卡的点击事件，更新当前选中选项卡索引，从而实现选项卡和图片的切换效果。同时，需要使用动态绑定类名的方式，为选中的选项卡和图片添加特定的样式。定义一个响应式对象list，包含一个数组，数组中的每个对象表示一个选项卡的信息，包括id、title和图片路径。定义一个响应式引用currentId，用于存储当前选中的选项卡索引。例如，list对象可以定义为：constlist=reactive({list:[{id:1,title:"apple",path:"img/apple.jpg"},...]})，currentId可以定义为：const

currentId=ref(0)。任务需求描述任务分析与技术选型数据结构设计代码实现与功能测试在HTML文件中，创建一个div元素作为Vue的挂载点，然后使用Vue的API来创建一个新的Vue实例并挂载它。使用ul和li元素来渲染选项卡列表，使用div和img元素来渲染图片。为选项卡和图片添加相应的CSS样式，如设置选项卡的背景颜色、宽度、高度等，设置图片的宽度和高度等。通过动态绑定类名的方式，为选中的选项卡和图片添加特定的样式，如选中的选项卡背景颜色变为橙色，选中的图片显示，未选中的图片隐藏。在JavaScript部分，从Vue中导入reactive和ref等函数。在setup函数中，定义响应式数据和函数。定义change函数用于更新currentId的值，定义getClass和getBoxClass函数用于根据currentId的值判断是否需要为列表项和图片容器添加选中状态的类名。最后，将定义好的数据和方法返回，并将Vue应用实例挂载到挂载点上。例如，constapp=Vue.createApp({setup(){...}});app.mount("#app");。对选项卡切换应用进行功能测试，确保点击不同的选项卡时，对应的图片能够正确切换，并且选项卡和图片的样式能够正确更新。检查是否存在性能问题或兼容性问题，并进行相应的优化。例如，可以使用浏览器的开发者工具来检查应用的性能，优化代码结构以提高性能。同时，测试应用在不同浏览器和设备上的兼容性，确保应用能够正常运行。04PARTONEVue3工程创建与开发环境搭建Vue3工程创建概述2020年9月18日，Vue.js发布了3.0版本。Vue3在性能方面进行了优化，打包大小减少41%，初次渲染快55%，更新渲染快133%，内存减少54%。这些性能提升使得Vue3在大型项目中表现更加出色，能够更快地加载和渲染页面，提高用户体验。Vue3的性能提升Vite是新一代前端构建工具，具有轻量快速的热重载（HMR），能实现极速的服务启动。它对TypeScript、JSX、CSS等支持开箱即用，真正的按需编译，不再等待整个应用编译完成。使用Vite可以大大提高开发效率，减少等待时间，让开发者能够更快地看到代码的运行效果。Vite工具的优势使用Vite创建Vue3工程非常简单，只需要通过命令行工具运行相应的命令即可。Vite会自动生成项目的基本结构，包括src目录、index.html文件等。例如，运行npmcreatevite@latest命令，按照提示选择项目名称和框架类型，即可创建一个新的Vue3工程。使用Vite创建Vue3工程Vue3工程结构与开发流程Vite生成的Vue3项目结构清晰，主要包括src目录、index.html文件、package.json文件等。src目录下包含App.vue组件、main.js入口文件等。index.html是项目的入口文件，加载index.html后，Vite解析<scripttype="module"src="xxx">指向的JavaScript。Vue3中是通过createApp函数创建一个应用实例。项目结构分析在开发过程中，可以使用Vite提供的命令来启动开发服务器、构建项目等。例如，运行npmrundev命令启动开发服务器，运行npmrunbuild命令构建项目。常见问题包括路由配置问题、组件通信问题等。可以通过查阅官方文档、社区资源等方式解决这些问题。例如，在配置路由时，需要正确设置路由规则和组件映射关系，确保页面能够正确跳转。开发流程与常见问题解决020105PARTONEVue3生命周期与组合式编程实践Vue3生命周期钩子生命周期钩子的概念与阶段Vue组件实例在创建时要经历一系列的初始化步骤，在此过程中Vue会在合适的时机，调用特定的函数，从而让开发者有机会在特定阶段运行自己的代码，这些特定的函数统称为生命周期钩子。生命周期整体分为四个阶段，分别是：创建、挂载、更新、销毁，每个阶段都有两个钩子，一前一后。例如，在创建阶段有beforeCreate和created钩子，在挂载阶段有beforeMount和mounted钩子等。生命周期钩子在组合式编程中的使用在组合式编程中，生命周期钩子的使用方式与Vue2类似，但需要通过导入的方式使用。例如，使用onMounted钩子可以在组件挂载完成后执行初始化操作，使用onUnmounted钩子可以在组件销毁时进行清理工作。在setup函数中，可以使用生命周期钩子来管理组件的生命周期，例如在组件挂载时获取数据，在组件销毁时取消订阅等。常用生命周期钩子的使用场景beforeCreate钩子在组件实例创建之前调用，此时组件的data和methods尚未初始化，可以用于进行一些初始化前的准备工作。created钩子在组件实例创建完成后调用，此时可以访问到data和methods，常用于数据初始化和事件绑定。beforeMount钩子在组件挂载之前调用，此时模板已经编译完成，但尚未挂载到DOM上，可以用于进行一些挂载前的操作。mounted钩子在组件挂载完成后调用，此时可以访问到DOM元素，常用于操作DOM或进行异步数据请求。组合式编程实践案例购物车功能实现使用Vue组合式编程实现购物车功能，可以定义一个响应式对象来存储购物车中的商品信息，包括商品名称、数量、价格等。通过定义相应的函数来实现添加商品、删除商品、计算总价等功能。例如，使用reactive创建购物车对象constcart=reactive({items:[]})，定义addProduct函数来添加商品到购物车，定义removeProduct函数来从购物车中删除商品，使用computed计算购物车的总价。在表单验证中，可以使用组合式编程来封装验证逻辑。定义一个组合函数来处理表单验证，包括验证规则的定义、验证结果的存储等。在组件中使用该组合函数，将表单数据和验证规则传递给它，实现表单的自动验证。例如，定义一个useValidation组合函数，它接收表单数据和验证规则作为参数，返回一个包含验证结果和验证方法的对象。在表单组件中使用该组合函数，根据验证结果来显示相应的提示信息。表单验