vue2+vue3 知识点讲解

目录

vue2

vue3

vue2

vue是什么？是一个用于构建用户界面的渐进式框架

创建实例：new Vue ( { el 指定挂载点，data 提供数据 } )

插值表达式 {{ 表达式 }} 注意：不能在标签属性中使用

vue核心特性：响应式（数据改变，视图自动更新）

vue指令

指令：带有v - 前缀的特殊标签属性，不同属性对应不同功能

1.v-html：= " 表达式 " 动态设置元素的innerHTML

2.v-show 和 v-if(条件渲染)：控制元素的显示与隐藏 v-show是控制display:none，v-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的值必须有唯一性，推荐使用id

8.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侦听器(监视器)

作用：监视数据变化，执行一些业务逻辑或异步操作

语法：

1. 简单写法 -> 简单类型数据，直接监视
2. 完整写法 -> 添加额外配置项

简单写法：

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部分：

1. template结构(只能有一个根节点)
2. script行为
3. style样式(可以支持less，标签后面加上lang="less"，需要装包less和less-loaded)

普通组件的注册使用

1.局部注册：只能在注册的组件内使用

2.全局注册：在组件范围内，所有组件都能使用

组件的样式冲突

1.全局样式：默认组件中的样式会作用到全局（默认情况）

2.局部样式：给组件加上scoped属性，可以让样式只作用于组件

Scoped原理：当前组件内的标签都加上data-v-hash值的属性，然后样式用属性选择器区分不用组件样式

组件中的data

一个组件的data必须是一个函数 -> 保证每个组件实例维护独立的数据对象

组件通信

组件关系分类：1.父子关系 2.非父子关系

组件通信解决方案：

父子通信：
父 -> 子(props)

子 -> 父($emit)

Prop定义：组件上注册的一些自定义属性。作用是向子组件传递数据

特点：可以传递任意数量、任意类型的prop

Prop校验

语法：1.类型验证

2.非空验证

3.默认值

4.自定义校验

Prop & data

共同点：都可以给组件提供数据

区别：data数据是自己的 -> 随便改

Prop数据是外部的 -> 不能直接改，要遵循单向数据流

单项数据流：父级prop的数据更新，会向下流动，影响子组件，这个数据流动是单向的

非父子通信(拓展) -- event bus 事件总线

作用：非父子组件之间，进行简易的消息传递 ( 复制场景用Vuex )

非父子通信(拓展) -- provide & inject

provide & inject 作用：跨层级共享数据

v-model原理

原理：v-model本质上是一个语法糖。例如应用在输入框上，就是value属性和input事件的合写

作用：提供数据的双向绑定

1. 数据变，视图跟着变 :vlaue
2. 视图变，数据跟着变 @input

注意：$event用于模板中，获取事件的行参

表单类组件封装 & v-model简化代码

1.表单类组件封装 -> 实现子组件和父组件数据的双向绑定

1. 父传子：数据应该是父组件props传递过来，v-model拆解绑定数据
2. 子传父：监听输入，子传父给父组件修改

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:

1. 目标标签 - 添加ref属性
2. 恰当时机(mounted函数)，通过this.$refs.xxx，获取目标标签

2.获取组件：

1. 目标组件 - 添加ref属性
2. 恰当时机(mounted函数)，通过this.$refs.xxx，可以.组件方法 调用组件对象里面的方法

Vue异步更新、$nextTick

Vue是异步更新Dom的 ( 提升性能 )

$nextTick : 等DOM更新后，才会执行此方法里的函数体 语法：this.$nextTick( 函数体 )

自定义指令

定义：自己定义的指令，可以封装一些dom操作，拓展额外功能

其中 inserted 钩子函数会在指令所在元素，被插入到页面中触发 。el就是指令所绑定的元素

自定义指令 - 指令的值

语法：

1. v-指令名="指令值"，通过等号可以绑定指令的值
2. 通过 binding.value 可以拿到指令的值
3. 通过update钩子，可以监听指令值的变化，进行dom更新操作

插槽 - 默认插槽

作用：让组件内部的一些结构支持自定义 插槽slot占位封装

插槽 - 后备内容(默认值)

直接写在<slot>标签里面的内容

插槽 - 具名插槽

1. slot占位，给name属性起名字来区分
2. template配合v-slot:插槽名 ( 简写 #插槽名 ) 分发内容

作用域插槽(是插槽的传参语法，不属于分类)

作用域插槽：定义slot插槽的同时，是可以传值的。给插槽上可以绑定数据，将来使用组件时可以用

单页面应用程序：SPA

Vue中的路由：路径和组件的映射关系

路由的基本使用(5+2)：

组件存放目录问题(组件分类)

src/views文件夹 页面组件 - 页面展示 - 配合路由使用

src/components文件夹 复用组件 - 展示数据 - 常用于复用

路由的封装抽离

所有路由相关配置放在main.js中不合适，将路由模块抽离到router/index.js中，好处：拆分模块，利于维护。

声明式导航 - 导航链接

vue-router提供了内置的全局组件router-link (取代a标签)

1. 能跳转，配置to属性指定路径(必须)。本质还是a标签，to无需#
2. 能高亮，默认就会提供高亮类名，可以直接设置高亮样式

声明式导航 - 两个类名

1. router-link-active 模糊匹配(用的多) to="/my" 可以匹配 /my /my/a /my/a/b .....
2. 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/#/home

history路由(常用) 例如: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概述

是一个用来管理通用数据(多组件共享的数据)的工具，本身是一个插件

场景：

1. 某个状态在很多个组件来使用(个人信息)
2. 多个组件共同维护一份数据(购物车)

优势：

1. 共同维护一份数据，数据集中化管理
2. 响应式变化
3. 操作简洁(Vuex提供了一些辅助函数)

创建一个空仓库

核心概念 - state状态

1.提供数据，在state对象中添加共享的数据

2.使用数据

通过store直接访问

通过辅助函数(简化)

mapState是辅助函数，帮助我们把store中的数据自动映射到组件的计算属性中

核心概念 - mutations

目标：明确vuex同样遵循单向数据流，组件中不能直接修改仓库的数据

解决：通过strict : true 可以开启严格模式 例如,this.$store.state.count++(错误写法，加上才可以报错)

mutations的使用：

1.定义mutations对象，对象中存放修改state的方法

2.组件中提交调用mutations

mutations 传参语法

注意：提交参数只能一个，如果有多个参数，包装成一个对象传递

1.提供mutaion函数 ( 带参数 - 提交载荷payload )

2.页面中提交调用mutation

辅助函数 : mapMutations

把mutations中的方法提取出来，映射到组件methods中

核心概念 - actions

actions处理异步操作，因为mutaion必须是同步的(便于监测数据变化，记录调试)

1.提供actions方法

2.页面中dispatch调用

辅助函数 - mapActions

把action中的方法提取出来，映射到组件methods中

核心概念 - getters

说明：类似计算属性。从state中派生出一些状态，依赖于state，此时会用到getters

1.定义getters

2.通过store访问getters

辅助函数 - mapGetters

核心概念 - 模块module(进阶语法)

由于vuex使用的是单一状态数树，所有状态会集中到比较大的对象，可以进行分模块拆分

其中，子模块的状态还是会挂到根级别的state中，属性名就是模块名

使用模块state中的数据：

1.直接通过模块名访问 $store.state.模块名.xxx

2.通过mapState映射

• 默认根级别访问的映射 mapState(['xxx'])
• 子模块的映射 mapState('模块名'，['xxx']) --- 需要开启命名空间

getters:

mutations:

actions

json-server 工具 -- 准备后端接口服务环境

vant-ul库里面的组件 全部导入和按需导入

1.全部导入：

2.按需导入

项目中的vm适配

request模块 - axios封装

api接口模块

Toast轻提示

页面访问拦截

mixins混入 -- 创建方法属性之类的 复用操作

打包发布 -- 绝对路径改为相对路径

打包优化：路由懒加载

vue3

vue3的优势

create-vue

是Vue官方新的脚手架工具，底层切换到了vite(下一代构建工具)，为开发提供极速响应

使用create创建项目

项目目录和关键文件

组合式API - setup选项

setup选项的写法和执行时机

1. 执行时机，比beforeCreate还要早
2. setup函数中，获取不到this（this是undefined）
3. 数据 和 函数，需要在 setup 最后 return，才能模板中应用

<script setup>语法糖

reactive 和 ref函数

1.reactive()

2.ref() 底层是在原有传入数据的基础上外层包装了一层对象，包装成复制类型后，再借助reactive实现的响应式

computed计算属性函数

1. 计算属性中不应该有副作用，比如异步请求/修改dom
2. 避免直接修改计算属性的值，特殊情况可以配置get set

watch

基础使用 - 侦听单个数据 多个数据就是count写成数组[xxx,xxx]

2.immediate deep:true,监听复杂数据对象，同样写在后面

3.精确侦听对象的某个属性

Vue3生命周期函数（选项式 VS 组合式）

父子通信

模板引用

通过ref标识获取真实的dom对象或组件实例对象

如何使用：

1. 通过ref函数生成一个ref对象
2. 通过ref标识绑定ref对象到标签，使用值.value就可以拿到dom对象或组件实例对象使用

defineExpose()

默认情况下在<script setup>语法糖下组件内部的属性和方法不开放给父组件访问，可以通过defineExpose编译宏指定哪些属性和方法允许访问

provide 和 inject

顶层组件像任意的底层组件传递数据和方法，实现跨组件通信

1.跨层传递数据

• 顶层组件通过provide函数提供数据
• 底层组件通过inject函数获取数据

2.跨层传递方法：顶层组件可以向底层组件传递方法，底层组件调用方法修改顶层组件中的数据

Vue3.3新特性 - defineOptions

<script 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 和 defineEmits

Pinia：是Vue的最新状态管理工具，是Vuex的替代品

创建pinia实例(根store)

pinia的基本用法

Pinia - storeToRefs方法

界面直接解构，state会丢失响应式，解决方法使用storeToRefs方法。action由于只使用 不改方法所以可以直接赋值。

Pinia持久化插件

额外配置：

pnpm 包管理器 - 创建项目

安装方式：npm install -g pnpm

创建项目：pnpm create vue

Eslint配置代码风格

补充：添加未声明的变量错误提示 ‘no-undef’ : 'error' ，和3并列写在下面。

基于husky的代码检查工作流

解决方法 - 暂存区eslint校验(在暂存区检查代码)

VueRouter4路由语法解析

路由初始化

总结

按需引入Element Plus

第二步的配置文件

提示：第三步的直接使用是指在vue文件可以直接使用，js文件还是需要按需导入

pinia独立维护 和 仓库统一导出

1.pinia相关导入写进 stores / index.js

2.仓库统一导出，使用仓库数据的路径可以简写 import { xxx } from '@/store'