vue2+vue3 知识点讲解

目录vue2vue3vue2vue是什么是一个用于构建用户界面的渐进式框架创建实例new Vue ( { el 指定挂载点data 提供数据 } )插值表达式 {{ 表达式 }} 注意不能在标签属性中使用vue核心特性响应式数据改变视图自动更新vue指令指令带有v - 前缀的特殊标签属性不同属性对应不同功能1.v-html 表达式 动态设置元素的innerHTML2.v-show 和 v-if(条件渲染)控制元素的显示与隐藏 v-show是控制display:nonev-if是控制创建和移除3.v-else-if 和 v-else 配合v-if使用4.v-on : 事件名 “内联语句” 可以简写成事件名 v-on : 事件名 “methods中的函数名”作用注册事件 添加监听 提供处理逻辑注意method 函数内的this指向Vue实例5.v-bind:属性名“表达式” 可以简写成 :属性名作用动态设置html的标签属性6.v-for“(item,index) in 数组”作用基于数据循环多次渲染整个元素 - 数组、对象、数字7.v-for中的key 给元素添加唯一标识便于Vue进行列表项的正确排序复用注意key的值只能是字符串或数字类key的值必须有唯一性推荐使用id8.v-model“变量“作用给表单元素使用实现数据和视图双向绑定可以获取或设置表单元素内容指令修饰符通过 . 指明一些指令后缀不同后缀封装了不同的处理操作 -- 简化代码① 按键修饰符keyup.enter - 键盘回车监听② v-model修饰符v-model.trim - 去除首尾空格v-model.number - 转数字③ 事件修饰符事件名.stop - 阻止冒泡事件名.prevent - 阻止默认行为v-bind 样式加强 – 操作css语法:class “ 对象/数组 ”1.对象 - 键就是类名值就是布尔值。如果值为true有这个类否则没这个类适用场景一个类名来回切换2.数组 - 数组中所有的类都会添加到盒子上本质就是一个class列表适用场景批量添加或删除类v-model应用于其他表单元素它会根据控件类型自动选取正确的方法来更新元素计算属性概念基于现有数据计算出来的新属性。依赖数据变化自动重新计算。语法1.声明在computed配置项中一个计算属性对应一个函数2.使用起来和普通属性一样使用{{计算属性名}}computed:{ 计算属性名(){ 一段代码逻辑 return 结果 } }Computed计算属性 vs methods方法1.Computed计算属性侧重对数据的处理求得一个结果。优势在于有缓存机制(提高性能)。缓存机制对计算出的结果缓存再次使用直接读取缓存依赖项变化自动重新计算并再次缓存2.Methods方法侧重给实例提供一个方法处理业务逻辑计算属性完整写法computed:{ 计算属性名:{ get(){ 逻辑代码 return 结果 }, set(修改的值){ 逻辑代码 } } }watch侦听器(监视器)作用监视数据变化执行一些业务逻辑或异步操作语法简单写法 - 简单类型数据直接监视完整写法 - 添加额外配置项简单写法watch:{ 数据属性名(newValue,oldValue){ 业务逻辑 }, 对象.属性名(newValue,oldValue){ 业务逻辑 } }完整写法watch:{ 数据属性名:{ deep:true, //深度监视 immediate:true, //是否立刻执行一次handler handler(newValue,oldValue){ 业务逻辑 } } }Vue生命周期 和 生命周期的四个阶段Vue生命周期一个Vue实例从创建到销毁的整个过程声明周期的四个阶段创建、挂载、更新、销毁Vue生命周期函数钩子函数Vue生命周期过程中会自动执行一些函数被称为生命周期钩子可以在特定阶段执行自己代码工程化开发 脚手架 Vue CLI基本介绍Vue CLI 是Vue官方提供的一个全局命令工具可以快速开发Vue项目的标准化基础架子(集成了webpack配置)脚手架目录文件介绍 项目运行流程文件 main.js 核心作用导入App.vue基于App.vue创建结构渲染index.html组件化开发 根组件根组件是整个应用最上层的组件包裹很多普通小组件一个组件包含3部分template结构(只能有一个根节点)script行为style样式(可以支持less标签后面加上langless需要装包less和less-loaded)普通组件的注册使用1.局部注册只能在注册的组件内使用2.全局注册在组件范围内所有组件都能使用组件的样式冲突1.全局样式默认组件中的样式会作用到全局默认情况2.局部样式给组件加上scoped属性可以让样式只作用于组件Scoped原理当前组件内的标签都加上data-v-hash值的属性然后样式用属性选择器区分不用组件样式组件中的data一个组件的data必须是一个函数 - 保证每个组件实例维护独立的数据对象组件通信组件关系分类1.父子关系 2.非父子关系组件通信解决方案父子通信父 - 子(props)子 - 父($emit)Prop定义组件上注册的一些自定义属性。作用是向子组件传递数据特点可以传递任意数量、任意类型的propProp校验语法1.类型验证2.非空验证3.默认值4.自定义校验Prop data共同点都可以给组件提供数据区别data数据是自己的 - 随便改Prop数据是外部的 - 不能直接改要遵循单向数据流单项数据流父级prop的数据更新会向下流动影响子组件这个数据流动是单向的非父子通信(拓展) -- event bus 事件总线作用非父子组件之间进行简易的消息传递 ( 复制场景用Vuex )非父子通信(拓展) -- provide injectprovide inject 作用跨层级共享数据v-model原理原理v-model本质上是一个语法糖。例如应用在输入框上就是value属性和input事件的合写作用提供数据的双向绑定数据变视图跟着变 :vlaue视图变数据跟着变 input注意$event用于模板中获取事件的行参表单类组件封装 v-model简化代码1.表单类组件封装 - 实现子组件和父组件数据的双向绑定父传子数据应该是父组件props传递过来v-model拆解绑定数据子传父监听输入子传父给父组件修改2.父组件v-model简化代码实现子组件和父组件数据双向绑定子组件中 : props通过value接收事件触发input父组件中 : v-model给组件直接绑定数据 ( :value input ).sync 修饰符作用可以实现子组件与父组件数据的双向绑定简化代码特点prop属性名可以自定义非固定为value场景封装弹框类的基础组件visable属性 true显示false隐藏本质就是 :属性名 和 update:属性名 合写ref 和 refs作用利用ref 和 $refs 可以用于获取dom元素或组件实例特点查找范围 - 当前组件内(更精确稳定)原来的dom查看的全局的相同类名不可行。1.获取dom:目标标签 - 添加ref属性恰当时机(mounted函数)通过this.$refs.xxx获取目标标签2.获取组件目标组件 - 添加ref属性恰当时机(mounted函数)通过this.$refs.xxx可以.组件方法 调用组件对象里面的方法Vue异步更新、$nextTickVue是异步更新Dom的 ( 提升性能 )$nextTick : 等DOM更新后才会执行此方法里的函数体 语法this.$nextTick( 函数体 )自定义指令定义自己定义的指令可以封装一些dom操作拓展额外功能其中 inserted 钩子函数会在指令所在元素被插入到页面中触发 。el就是指令所绑定的元素自定义指令 - 指令的值语法v-指令名指令值通过等号可以绑定指令的值通过 binding.value 可以拿到指令的值通过update钩子可以监听指令值的变化进行dom更新操作插槽 - 默认插槽作用让组件内部的一些结构支持自定义 插槽slot占位封装插槽 - 后备内容(默认值)直接写在slot标签里面的内容插槽 - 具名插槽slot占位给name属性起名字来区分template配合v-slot:插槽名 ( 简写 #插槽名 ) 分发内容作用域插槽(是插槽的传参语法不属于分类)作用域插槽定义slot插槽的同时是可以传值的。给插槽上可以绑定数据将来使用组件时可以用单页面应用程序SPAVue中的路由路径和组件的映射关系路由的基本使用(52)组件存放目录问题(组件分类)src/views文件夹 页面组件 - 页面展示 - 配合路由使用src/components文件夹 复用组件 - 展示数据 - 常用于复用路由的封装抽离所有路由相关配置放在main.js中不合适将路由模块抽离到router/index.js中好处拆分模块利于维护。声明式导航 - 导航链接vue-router提供了内置的全局组件router-link (取代a标签)能跳转配置to属性指定路径(必须)。本质还是a标签to无需#能高亮默认就会提供高亮类名可以直接设置高亮样式声明式导航 - 两个类名router-link-active 模糊匹配(用的多) to/my 可以匹配 /my /my/a /my/a/b .....router-link-exact-active 精确匹配 to/my 仅匹配 /my定制类名声明式导航 - 跳转传参1.查询参数传参(适合传多个参数)2.动态路由传参(适合传单个参数)动态路由参数可选符问题:配了路由path:/search/:words”为什么按下面步骤操作会未匹配到组件显示空白?原因:/search/:words表示必须要传参数。如果不传参数也希望匹配可以加个可选符?Vue路由重定向语法{ path:匹配路径redirect:重定向到的路径 }Vue路由 - 404作用当路径找不到匹配时给个页面提示位置配在路由最后语法path:*(任意路径) - 前面不匹配就命中最后这个Vue路由 - 模式设置hash路由(默认) 例如:http://localhost:8080/#/homehistory路由(常用) 例如:http://localhost:8080/home (以后上线需要服务器端支持)编程式导航 - 基本跳转编程式导航用JS代码来进行跳转1.path 路径跳转(简易方便)2.name命名路由跳转(适合path路径长的场景)编程式导航 - 路由传参两种传参方式查询传参 动态路由传参两个跳转方式对于两种传参方式都支持1.path 路径跳转传参(query传参)2.path 路径跳转传参(动态路由传参)3.name命名路由跳转传参(query传参)4.name命名路由跳转传参(动态路由传参)组件缓存 keep-alive原因路由跳转后组件被销毁了返回回来组件又被重建了所以数据被重新加载了1. keep-alive是什么Vue 的内置组件包裹动态组件时可以缓存2. keep-alive的优点组件切换过程中 把切换出去的组件保留在内存中提升性能3. keep-alive的三个属性了解① include 组件名数组只有匹配的组件会被缓存② exclude 组件名数组任何匹配的组件都不会被缓存③ max最多可以缓存多少组件实例4. keep-alive的使用会触发两个生命周期函数了解activated 当组件被激活使用的时候触发 — 进入页面触发deactivated 当组件不被使用的时候触发 — 离开页面触发自定义创建项目vuex概述是一个用来管理通用数据(多组件共享的数据)的工具本身是一个插件场景某个状态在很多个组件来使用(个人信息)多个组件共同维护一份数据(购物车)优势共同维护一份数据数据集中化管理响应式变化操作简洁(Vuex提供了一些辅助函数)创建一个空仓库核心概念 - state状态1.提供数据在state对象中添加共享的数据2.使用数据通过store直接访问通过辅助函数(简化)mapState是辅助函数帮助我们把store中的数据自动映射到组件的计算属性中核心概念 - mutations目标明确vuex同样遵循单向数据流组件中不能直接修改仓库的数据解决通过strict : true 可以开启严格模式 例如,this.$store.state.count(错误写法加上才可以报错)mutations的使用1.定义mutations对象对象中存放修改state的方法2.组件中提交调用mutationsmutations 传参语法注意提交参数只能一个如果有多个参数包装成一个对象传递1.提供mutaion函数 ( 带参数 - 提交载荷payload )2.页面中提交调用mutation辅助函数 : mapMutations把mutations中的方法提取出来映射到组件methods中核心概念 - actionsactions处理异步操作因为mutaion必须是同步的(便于监测数据变化记录调试)1.提供actions方法2.页面中dispatch调用辅助函数 - mapActions把action中的方法提取出来映射到组件methods中核心概念 - getters说明类似计算属性。从state中派生出一些状态依赖于state此时会用到getters1.定义getters2.通过store访问getters辅助函数 - mapGetters核心概念 - 模块module(进阶语法)由于vuex使用的是单一状态数树所有状态会集中到比较大的对象可以进行分模块拆分其中子模块的状态还是会挂到根级别的state中属性名就是模块名使用模块state中的数据1.直接通过模块名访问 $store.state.模块名.xxx2.通过mapState映射默认根级别访问的映射 mapState([xxx])子模块的映射 mapState(模块名[xxx]) --- 需要开启命名空间getters:mutations:actionsjson-server 工具 -- 准备后端接口服务环境vant-ul库里面的组件 全部导入和按需导入1.全部导入2.按需导入项目中的vm适配request模块 - axios封装api接口模块Toast轻提示页面访问拦截mixins混入 -- 创建方法属性之类的 复用操作打包发布 -- 绝对路径改为相对路径打包优化路由懒加载vue3vue3的优势create-vue是Vue官方新的脚手架工具底层切换到了vite(下一代构建工具)为开发提供极速响应使用create创建项目项目目录和关键文件组合式API - setup选项setup选项的写法和执行时机执行时机比beforeCreate还要早setup函数中获取不到thisthis是undefined数据 和 函数需要在 setup 最后 return才能模板中应用script setup语法糖reactive 和 ref函数1.reactive()2.ref() 底层是在原有传入数据的基础上外层包装了一层对象包装成复制类型后再借助reactive实现的响应式computed计算属性函数计算属性中不应该有副作用比如异步请求/修改dom避免直接修改计算属性的值特殊情况可以配置get setwatch基础使用 - 侦听单个数据 多个数据就是count写成数组[xxx,xxx]2.immediate deep:true,监听复杂数据对象同样写在后面3.精确侦听对象的某个属性Vue3生命周期函数选项式 VS 组合式父子通信模板引用通过ref标识获取真实的dom对象或组件实例对象如何使用通过ref函数生成一个ref对象通过ref标识绑定ref对象到标签使用值.value就可以拿到dom对象或组件实例对象使用defineExpose()默认情况下在script setup语法糖下组件内部的属性和方法不开放给父组件访问可以通过defineExpose编译宏指定哪些属性和方法允许访问provide 和 inject顶层组件像任意的底层组件传递数据和方法实现跨组件通信1.跨层传递数据顶层组件通过provide函数提供数据底层组件通过inject函数获取数据2.跨层传递方法顶层组件可以向底层组件传递方法底层组件调用方法修改顶层组件中的数据Vue3.3新特性 - defineOptionsscript setup 无法提供平级属性为了解决不用2个script引入了defineOptions宏用来定义Options API选项 ( 如name ) 。props,emits,expose,slots除外。Vue3.3新特性 - defineModel(目前是试验性质的生效需要配置vite.config.js)简化v-model使用在vue3中v-model可以拆分为modelValue属性 和 update:modelValue事件简化代码1.vite.config.js配置文件里的vue()里面加入配置项2.子组件中无需defineProps 和 defineEmitsPinia是Vue的最新状态管理工具是Vuex的替代品创建pinia实例(根store)pinia的基本用法Pinia - storeToRefs方法界面直接解构state会丢失响应式解决方法使用storeToRefs方法。action由于只使用 不改方法所以可以直接赋值。Pinia持久化插件额外配置pnpm 包管理器 - 创建项目安装方式npm install -g pnpm创建项目pnpm create vueEslint配置代码风格补充添加未声明的变量错误提示 ‘no-undef’ : error 和3并列写在下面。基于husky的代码检查工作流解决方法 - 暂存区eslint校验(在暂存区检查代码)VueRouter4路由语法解析路由初始化总结按需引入Element Plus第二步的配置文件提示第三步的直接使用是指在vue文件可以直接使用js文件还是需要按需导入pinia独立维护 和 仓库统一导出1.pinia相关导入写进 stores / index.js2.仓库统一导出使用仓库数据的路径可以简写 import { xxx } from /store