Vue 3前端框架应用项目教程（微课版）课件 项目7、8 Vue组合式编程、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组合函数，它接收表单数据和验证规则作为参数，返回一个包含验证结果和验证方法的对象。在表单组件中使用该组合函数，根据验证结果来显示相应的提示信息。表单验证功能实现对于数据请求功能，可以使用组合式编程来封装请求逻辑。定义一个组合函数来处理数据请求，包括请求的发送、数据的处理等。在组件中使用该组合函数，将请求参数传递给它，实现数据的自动请求和更新。例如，定义一个useRequest组合函数，它接收请求的URL和参数作为参数，返回一个包含请求结果和请求状态的对象。在组件中使用该组合函数，根据请求结果来更新组件的状态和显示内容。数据请求功能实现下次课见！Seeyounexttime8.1使用脚手架构建登录注册切换项目8.2使用Vite实现学生管理系统的导航功能搭建Vue工程twotasks

认识VueCLI脚手架目录CONTENTS什么是VueCLI1VueCLI前提——Node安装2安装VueCLI31.什么是VueCLI使用Vue.js开发大型应用时，需要考虑代码目录结构、项目结构和部署、第三方插件等事情；如果每个项目都要手动完成这些工作，效率比较低，所以我们通常会使用一些工具来帮助完成这些事情。如果你在开发大型项目,

那么你需要,

且一定需要使用Vue

CLI。CLI是什么意思?CLI是Command-LineInterface,翻译为命令行界面,但是俗称脚手架;Vue

CLI是一个官方发布vue.js项目脚手架工具;使用vue-cli可以快速搭建Vue开发环境下载地址：/2.VueCLI前提——Node安装默认情况下会自动安装npm包管理工具3.安装VueCLI1.设置镜像npmconfigsetregistryhttps://

或npmconfigsetregistry2.查看镜像npmconfiggetregistry3.取消镜像npmconfigdeleteregistry3.安装VueCLI4安装VueCLI安装最新的版本：npminstall-g@vue/cli安装某个版本：npminstall-g@vue/cli@4.5.195.查看版本：vue–V或（vue--version)了解什么是VueCLI脚手架1如何安装Node2如何安装VueCLI脚手架3总结使用VueCLI创建项目目录CONTENTS创建脚手架项目1分析项目结构2图8.7创建VueCLI项目1.创建脚手架项目1.指定目录（项目的保存目录）2.设置镜像npmconfigsetregistry3.创建项目vuecreatevue3_testbabel：ES6->ES5eslint：语法检查图8.9VueCLI项目结构2.分析项目结构最重要的目录，项目的代码都在这个目录安装的包静态资源项目根目录2.分析项目结构组件目录资源目录根组件src目录入口文件掌握创建脚手架项目的方法1熟悉脚手架项目的目录结构2总结单文件组件目录CONTENTS什么是单文件组件1创建Hello单文件组件21.什么是单文件组件单文件组件指的是一个文件定义一个组件，由html，js，css三部分构成html部分js部分css部分1.什么是单文件组件Hello.vue组件单文件组件指的是一个文件定义一个组件，由html，js，css三部分构成定义的组件都放在src/components目录下，扩展名为.vue1.什么是单文件组件3.使用Hello.vue组件单文件组件指的是一个文件定义一个组件，由html，js，css三部分构成定义的组件都放在src/components目录下，扩展名为.vueApp组件管理所有的组件，是所有组件的父组件1.导入Hello.vue组件2.注册Hello.vue组件在src/components目录下新建Hello.vue文件编写Hello.vue组件的html、js和css三部分的代码在App根组件里导入、注册并使用Hello组件步骤：需求：2.创建Hello单文件组件Hello组件显示“HelloVue！”理解什么是单文件组件1如何创建和使用单文件组件2总结单文件组件指的是一个文件定义一个组件，由html，js，css三部分构成在src/components目录下新建扩展名为vue的组件文件编写组件的html、js和css三部分的代码在App根组件里导入、注册并使用组件在脚手架项目中使用路由目录CONTENTSVue-Router在脚手架的使用2安装路由插件Vue-Router11.安装路由Vue-Router2.使用npm命令来安装路由npmivue-router安装完成之后可以在package.json文件中查看到vue-router的相关信息1.通过cd命令进入脚手架项目根目录创建登录组件Login和注册组件Regist创建路由器对象在main.js中导入路由器对象在App.vue中使用路由步骤：需求：2.Vue-Router在脚手架的使用在脚手架中实现登录和注册的切换2.

Vue-Router在脚手架的使用1.准备好需要的组件创建两个组件：Login和Regist2.

Vue-Router在脚手架的使用1.准备好需要的组件导入函数2.创建路由器对象在src目录下新建router目录在router目录下新建index.js文件，封装路由器对象导入组件创建路由器对象配置路由规则设置高亮2.

Vue-Router在脚手架的使用1.准备好需要的组件1.导入路由插件2.创建路由器对象在src目录下新建router目录在router目录下新建index.js文件，封装路由器对象2..注册路由3.在main.js中导入路由器对象2.

Vue-Router在脚手架的使用1.准备好需要的组件使用路由2.创建路由器对象在src目录下新建router目录在router目录下新建index.js文件，封装路由器对象导入全局样式3.在main.js中导入路由器对象4.在App.vue中使用路由掌握安装路由插件Vue-Router的方法1掌握Vue-Router在脚手架的使用方法2总结npmivue-router创建登录组件Login和注册组件Regist创建路由器对象在main.js中导入路由器对象在App.vue中使用路由8.1使用脚手架构建登录注册切换项目8.2使用Vite实现学生管理系统的导航功能搭建Vue工程twotasks

认识Vite目录CONTENTS认识Vite1使用Vite创建Vue3项目21.认识ViteVite（法语意为“快速的”，发音同“veet”），Vite是一种现代化的前端构建工具，专为提升前端开发效率而设计。Vite以其快速、轻量、高效的特点，成为了现代前端开发不可或缺的工具之一。什么是ViteVite的优势在Vue3出现之前，Vue2一般使用VueCLI来构建项目。VueCLI基于Webpack构建并配置项目，在项目启动时，Webpack需要从入口文件索引整个项目的文件，编译成一个或多个单独的.js文件。虽然Webpack对代码进行了拆分，但仍可能一次生成所有路由下的编译文件，导致服务器启动时间随着项目的复杂度增加而呈指数级的增长。Vite