Vue2的使用

Accountant！

已于 2022-09-14 13:40:55 修改

阅读量259

点赞数 3

文章标签： vue.js javascript 前端

于 2022-08-23 09:53:39 首次发布

本文链接：https://blog.csdn.net/m0_57254201/article/details/126478729

版权

Vue核心

初始Vue

要让Vue工作，就必须创建一个Vue实例，且传入一个配置对象
容器的代码依然符合html规范，只是加入了一些特殊的Vue语法
容器里的代码称为Vue模板
Vue实例和容器是一一对应的
开发中只会有一个Vue实例，并配合组件一起使用
{{xxx}}中的xxx要写js表达式，xxx可以自动读取到data中所有属性
一旦data中的数据变化，则页面中用到该数据的地方会自动更新
js表达式和 js代码（语句）
- 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
  1. a
  2. a+b
  3. demo(1)
  4. x === y ? true : false
- js代码（语句）
  1. if(){}
  2. for(){}

模板语法

插值语法
- 功能：用于解析标签体体内容
- 写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性
指令语法
- 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件...）
- 写法：Vue中有很多指令语法，写法为 v-xxx
- 举例：v-bind:href="xxx" 可简写为 :href="xxx"，xxx是js表达式，且可以直接读取到data中的所有属性

数据绑定

单向绑定(v-bind)：数据只能从data流向页面
双向绑定(v-model)：数据能从data流向页面，还可以从页面流向data
1. 双向绑定只用在表单类元素上(input、select...)
2. v-model就是用来操作value的，可将 v-model:value 简写为 v-model

el与data的写法

el的两种写法
1. nwe Vue时配置el属性
2. 先创建Vue实例，之后再通过 vm.$mount('#app') 指定el的值
data的两种写法
1. 对象式
2. 函数式
Vue管理的函数，不能写 => 函数，写了 => 函数this就不是Vue实例，而是 Window

MVVM模型

M：Model，data中的数据
V：View，模板代码（页面显示的数据）
VM：ViewModel，Vue实例
1. data中所有的属性，都出现在vm身上
2. vm身上所有的属性及Vue原型上所有属性，在Vue模板中都可直接使用

数据代理

Vue中的数据代理
- 通过vm对象来代理data对象中属性的操作(读/写)
Vue中数据代理的好处
- 更方便操作data中的数据(从 _data.name 简化为 name)
Vue数据代理原理
1. 通过 Object.defineProperty() 把data对象中所有属性添加到vm上
2. 为每个添加到vm上的属性都指定一个getter和setter
3. 在getter/setter内部操作data中对应的属性

事件基本使用

使用v-on:xxx 或 @xxx 绑定事件
事件的回调需要配置在methods对象中
methods中配置的函数，不能使用 => 函数，否则 this 就不是Vue实例
methods中配置的函数，都是被Vue管理的函数，this 指向 vm 或组件实例对象
@click="demo" 和 @click="demo($event)" 效果一致，但后者可传参

事件修饰符

prevent：阻止默认事件（常用）
stop：阻止事件冒泡（常用）
once：使事件只触发一次（常用）
capture：使用事件的捕获模式
self：只有event.target是当前操作的元素时才触发事件
passive：事件的默认行为立即执行，无需等待事件回调执行完毕

修饰符可连写，比如 @click.stop.prevent

键盘事件

Vue中常用案件别名
- 回车：enter
- 删除：delete
- 退出：ecs
- 空格：space
- 换行：tab （特殊，必须配合keydown使用）
- 上：up
- 下：down
- 左：left
- 右：right
Vue未提供别名的按键，可使用按键原始的key值绑定，但要转为 kebab-case（短横线命名）
系统修饰键（特殊）：ctrl、alt、shift、meta
1. 配合keyup使用：按下修键同时，按其他键，再释放其他键，事件才被触发
2. 配合keydown使用：正常出发事件
可使用keyCode指定具体的按键（不推荐）
Vue.config.keyCodes.自定义键名 = 键码，可定制按键别名

计算属性

定义：使用的属性并不存在，而是通过已有的属性计算得来
原理：底层使用Object.defineproperty()提供的getter和setter
get()什么时候执行：
1. 初次读取时执行一次，然后缓存起来
2. 当依赖的数据发生变化时会被再次调用
优点：与methods相比，计算属性有缓存机制，效率更高，调试更方便
简写：只有在只有读取没有修改的前提下才可简写（有get()没有set()）
补充：
1. 计算属性最终会出现在vm上，可直接读取使用
2. 若计算属性要被修改，则必须写上set()去响应修改，set()中设置修改的值

监视属性

当被监视的属性变化时，回调函数自动调用
监视属性必须存在，才能进行监视
监视属性的两种写法：
1. new Vue时传入watch配置
2. 通过vm.$watch监视
简写：当watch中只有handler时，才可简写

深度监视

Vue中的watch默认不监测对象内部值的改变（一层）
配置 deep:true 可检测对象内部值的改变（多层）
Vue自身可监测对象内部值的改变，但Vue提供的watch默认不可以
使用watch时根据数据具体结构，决定是否采取深度监视

computed和watch

computed能完成的功能，watch都能完成
watch能完成的功能，computed不一定能完成，比如：watch可进行异步操作
被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象
所有不被Vue管理的函数，最好写成 => 函数，这样this的指向才是vm或组件实例对象

绑定样式

class样式
- :class="xxx"，xxx可以是字符串、对象、数组
- 字符串写法适用于：类名不确定，需要动态指定
- 数组写法，适用于：要绑定的样式个数不确定、名字也不确定
- 对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用
style样式
- :style="{fontSize: xxx}"，xxx是动态值
- :style="[a,b]"，a、b是样式对象

条件渲染

v-if
- 写法：
  - v-if="表达式"
  - v-else-if="表达式"
  - v-else="表达式"
- 适用于切换频率低的场景
- 特点：不展示DOM元素，直接移除
- 注意：v-if、v-else-if、v-else配合使用时，不能被打断
v-show
- 写法：v-shwo="表达式"
- 适用于：切换频率低的场景
- 特点：不展示DOM元素，不会被移除，而是使用样式进行隐藏
使用v-if时元素可能无法获取到，使用v-show一定可以获取到

v-for

用于展示列表数据
语法：v-for="(item,index) in xxx" :key="yyy"
可遍历：数组、对象、字符串（很少用）、指定次数（很少用）

key的原理

虚拟DOM中key的作用：
- key是虚拟DOM对象标识，当数据发生变化时，Vue会根据新数据生成新的虚拟DOM，随后Vue进行新虚拟DOM与旧虚拟DOM的差异比较，比较规则：
  - 旧虚拟DOM中找到与新虚拟DOM相同的key：
    - 若旧虚拟DOM中和新虚拟DOM的内容相同，则直接使用之前的真实DOM
    - 若旧虚拟DOM中和新虚拟DOM的内容不相同，则生成新的真实DOM，再替换掉页面中之前的真实DOM
  - 旧虚拟DOM中未找到与新虚拟DOM相同的key：
    - 创建新的真实DOM，再渲染到页面

使用index作为key可能会出现的问题：
- 若对数据进行：逆序添加、逆序删除等破环数据顺序的操作，会产生没有必要的真实DOM更新，界面显示没有问题，但效率低
- 若结构中包含输入类的DOM，会产生错误DOM更新，显示产生错乱

如何选择key
- 最好使用数据的唯一标识作为key：id、手机号、身份证号、学号等唯一值
- 若不存在对数据的逆序添加、逆序删除等破环数据顺序的操作，仅用于渲染列表用于展示，使用index作为key不会出现问题

数据监视

Vue会监视data中所有的数据
Vue通过setter实现监视，且要在new Vue时就传入要监测的数据
- 对象中后添加的属性，Vue默认不做响应式处理
- 若要给添加的属性做响应式，需使用：
  - Vue.set(target,propertyName/index,value) 或
  - vm.$set(target,propertyName/index,value)
Vue监测数组中的数据：
- 调用原生对应的方法对数组进行更新
- 重新解析模板，再更新页面
在Vue修改数组中的某个元素必须用一下方法：
- push()、pop()、shift()、unshift()、splice()、sort()、reserve()
- Vue.set() 或 vm.#set()
  - Vue.set() 和 vm.#set()不能给vm或vm的根数据对象添加属性

收集表单数据

<input type="text">，v-model收集的是value值，用户输入的是value值
<input type="radio">，v-model收集的是value值，要给标签设置value值
<input type="checkbox">
- 没有配置input的value属性，收集的就是checked（勾选或未勾选，为布尔值）
- 配置input的value属性：
  - v-model的初始值是非数组，收集的就是checked（勾选或未勾选，为布尔值）
  - v-model的初始值是数组，收集的就是value组成的数组
v-model三个修饰符：
- lazy：失去焦点再收集数据
- number：输入字符串转为有效数字
- trim：输入首尾空格过滤

过滤器

定义：对要显示的数据进行特定格式化后再显示（适用于简单的逻辑处理）
语法：
- 注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
- 使用过滤器：{{xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"
过滤器可接收额外参数、多个过滤器可串联
过滤器没有改变原本数据，是产生新的对应的数据

v-text

向所在的节点中渲染文本内容，即使内容中有标签也不会解析
与插值语法的区别：v-text会替换掉节点中的内容

v-html

作用：向指定节点中渲染包含html结构的内容
与插值语法的区别：
- v-html会替换掉节点中所有的内容，{{xxx}}不会
- v-html可识别html结构
v-html存在安全性问题
- 使用v-html渲染html很危险，容易导致XSS攻击
- 要在可信的内容上使用v-html，不要在用户提交内容上使用v-html

v-cloak（没有值）

没有值
本质是一个特殊属性，Vue实例创建并接管容器后，会删掉v-cloak属性
使用css配合v-cloak可解决网速慢时页面展示出{{xxx}}的问题

v-once

v-once所在的节点初次动态选然后，就视为静态内容
之后的数据改变不会引起v-once所在结构的更新，可用于优化性能

v-pre

使Vue跳过所在节点的解析
没有使用指定语法、没有使用插值语法的地方加上v-pre，可加快浏览器对页面的编译

自定义指令

定义语法：
- 局部指令：使用Vue中的directives配置
- 全局指令：使用Vue.directive配置
配置的指令被调用的时间
- bind：指令与元素成功绑定时被调用
- inserted：指令所在元素被插入页面时被调用
- update：指令所在模板结构被重新解析时被调用
注意点：
- 指令定义时不需要加v-，使用的时候要加上v-
- 若自定义指令为多个单词，单词间用 - 分隔，此时需要加上单引号
- 自定义指令中directives里的操作的是dom，因此directives里的this为window

生命周期

生命周期也叫生命周期回调函数、生命周期函数、生命周期钩子
生命周期是Vue在关键时刻调用的一些特殊名称的函数
生命周期函数的名字不可更改，但函数具体内容是根据需求写的
生命周期函数中的this指向的是vm或组件实例对象
生命周期被调用的函数：
1. beforeCreate：
  - 初始化前：初始化生命周期、事件，但数据代理未开始
  - 此时，无法通过vm访问data中的数据、methods中的方法
2. created：
  - 初始化：初始化数据监测、数据代理
  - 此时，可通过vm访问data中的数据、methods中的方法
3. beforeMount：
  - 挂载前：Vue开始解析模板，生成虚拟DOM(内存中)，页面还不能显示解析好的内容
  - 此时，页面显示的是未经Vue编译的DOM结构；所有对DOM的操作，最终不会生效（之后会被Vue编译后覆盖）
4. mounted：
  - 挂载：将内存中的虚拟DOM转为真实DOM插入页面
  - 此时，页面显示的是经过Vue编译好的DOM；对DOM操作有效（尽量避免），一般在此开启定时器，发送ajax请求等初始化操作
5. beforeUpdate：
  - 更新前：每次Vue管理的数据更新前，都会执行beforeUpdate
  - 此时，数据是新的，但页面还是旧的（页面和数据没有保持一致）
6. updated：
  - 更新：根据新数据生成新的虚拟DOM，再与旧的虚拟DOM比较，完成Model -> View的更新
  - 此时，数据是新的，页面也是新的（页面和数据保持一致）
7. beforeDestroy：
  - 销毁前：Vue自己调用销毁或被动销毁的时候调用beforeDestroy
  - 此时，vm中的data、method、指定等都可用，但最终不会对数据进行更改，一般在此清除定时器、解绑自定义事件、取消订阅消息等收尾工作
8. destroyed：
  - 销毁了...

Vue非单文件组件

组件定义

实现应用中局部功能代码和资源的集合

非单文件组件

一个html中有多个组件（很少使用）

组件使用的步骤

创建组件：和创建Vue实例类似，区别如下
- 不写el，因为最终所有的组件都经过vm管理，由vm中的el决定组件服务于哪个容器
- data必须写成函数，避免组件被复用时，数据存在引用关系
- 组件中使用template配置组件的结构
- 可指定name属性规定组件名，若不写则为Vue实例中组件的名
- 创建组件简写：可省略Vue.extend()，直接使用 const school = {}
注册组件：
- 局部注册：在new Vue时传入components选项，写入组件名（key：value或直接写value）
- 全局注册：Vue.component('组件名',组件)
使用组件：
- 写上组件名的标签

组件名

一个单词组成：
- 首字母小写，school
- 首字母大写，School
多个单词组成：
- kebab-case命名，my-school
- CamelCase命名，MySchool（需要脚手架支持）

组件标签

第一种写法：<school></school>
第二种写法：<school/>（不使用脚手架时，会导致后续组件不能渲染）

组件嵌套

一个组件可包含多个子组件
定义组件时在components中写上其他组件名

VueComponent

组件本质是一个VueComponent构造函数，不是我们定义的，是Vue.extend生成的
只需写 <组件名></组件名> 或 <组件名/>，Vue解析时会自动创建组件的实例对象，即Vue自动执行new VueComponent()
每次调用Vue.extend()，返回的都是新的VueComponent
this指向:
1. new Vue()中：data函数，methods、watch、computed中的函数，this是Vue实例对象
2. 组件配置中：data函数，methods、watch、computed中的函数，this是VueComponent实例对象
VueComponent实例对象简称vc，也称组件实例对象
VueComponent和Vue内置关系：
- VueComponent.prototype.proto === Vue.prototype
- 此关系可以让组件实例对象vc可访问到Vue原型上的属性和方法

Vue脚手架

初始化脚手架

Vue脚手架（vue/cli）版本向下兼容（脚手架2版本兼容vue1、vue2，脚手架3版本兼容vue1、vue2、vue3），不管vue用的什么版本，一般使用最新的脚手架版本即可，脚手架创建过程中可选择vue的版本
具体步骤：
1. 配置npm淘宝镜像npm config set registry http://registry.npm.taobao.org
2. 全局安装脚手架 @vue/cli npm install -g @vue/cli
3. 切换到创建项目的目录，使用命令创建项目 vue create 项目名
4. 选择使用vue的版本
5. 启动项目 npm run serve
6. 打包项目 npm run build
7. 暂停项目 Ctrl + C

一个组件中包括组件结构、组件交互、组件样式，分别对应template、script、style标签，文件后缀名为.vue
单文件组件必须要在脚手架的环境下才生效

脚手架文件结构

├── node_modules ├── public │ ├── favicon.ico: 页签图标 │ └── index.html: 主页面 ├── src │ ├── assets: 存放静态资源 │ │ └── logo.png │ │── component: 存放组件 │ │ └── HelloWorld.vue │ │── App.vue: 汇总所有组件 │ └── main.js: 入口文件 ├── .gitignore: git版本管制忽略的配置 ├── babel.config.js: babel的配置文件 ├── package.json: 应用包配置文件 ├── README.md: 应用描述文件 └── package-lock.json: 包版本控制文件

不同版本的Vue

vue.js和vue.runtime.xxx.js区别：
- vue.js时完整版的Vue，包含核心功能+模板解析器
- vue.runtime.xxx.js是运行版的Vue，只包含核心功能，没有模板解析器，因此vue.runtime.xxx.js不能使用template配置项，需要使用render函数接收到的createElement函数指定具体内容

vue.config.js

使用vue inspect > output.js可查看Vue脚手架的默认配置，修改并不奏效
使用vue.config.js才可对脚手架进行配置

配置项props

功能：让组件接收外部传过来的数据
传递数据：<Demo name="xxx"/>
接收数据：
- 第一种方式（只接收）：
  - props:['name']
- 第二种方式（限制类型）：
  - props:{name:String}
- 第三种（限制类型、限制必要性、指定默认值）：
  - props:{name:{type:String,required:true,default:'Tom'}}
props是只读的，Vue底层会监测对props的修改，若进行了修改，控制台就有警告；若业务需求确实需要修改，则复制props的内容到data中，再去修改data中的数据

mixin

混合，多个组件共用的部分提取成一个对象
使用方式：
1. 定义混合，{data(){...},methods(){...},...}
2. 使用混合
  - 局部混入：mixins:['xxx']
  - 全局混入：Vue.mixin(xxx)

插件

功能：用于增强Vue
本质：包含install方法的一个对象，install的第一个参数是Vue，第二个之后的参数是插件使用者传递的数据
定义插件：
- 对象.install = function(Vue, ...){Vue.filter(...) Vue.directive(...) Vue.mixin(...) ...}
使用插件：Vue.use(插件名)

scoped样式

作用：让样式在局部生效，防止不同组件的命名冲突
写法：<style scoped></style>

组件化编程

流程：
1. 拆分静态组件：组件按照功能点拆分，命名不要与html元素冲突
2. 实现动态组件：考虑好数据存放位置，数据是一个组件在用还是一些组件在用
  - 一个组件在用：放在组件自身即可
  - 一些组件在用：放在这些组件共同的父组件上（状态提升）
3. 交互：从绑定事件开始
props适用于：
- 父组件 ==> 子组件通信
- 子组件 ==> 父组件通信（要求父组件先给子组件一个函数）
v-model绑定的值不能是props传过来的值，因为props里的值不可被修改
props传过来的值若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样使用

webStorage

存储内容大小一般支持5MB左右（不同浏览器不一样）
浏览器通过Windos.sessionStorage和windo.localStorage属性实现本地存储机制
相关API：
- xxxStorage.setItem('key','value')：接收一个key和一个value，把值存储起来，若key存在，则替换原来的值
- xxxStorage.getItem('key')：接收一个key，返回key对应的value。若key对应的value获取不到，返回null
- xxxStorage.removeItem('key')：接收一个key，把key和对应的value删除
- xxxStorage.clear：清空存储的所有数据
sessionStorage和localStorage
- sessionStorage存储的内容是会话级别，浏览器关闭，数据也会消失
- localStorage存储的内容在硬盘或缓存中，浏览器关闭，数据还存在，需要手动清除才会消失（调用removeItem和clearAPI，或者清空浏览器缓存）

组件的自定义事件

是一种组件间通信的方式，适用于：子组件 ==> 父组件
使用场景：子组件想给父组件传数据，要在父组件中绑定自定义事件（事件的回调在父组件中）
绑定自定义事件：
- 第一种方式：在父组件中声明 <Student @demo="test"/>
- 第二种方式：在父组件中声明 <Student ref="test"/> ... mounted{this.$refs.student.$on('demo',this.test)}
- 若需要让自定义事件只触发一次，可使用once修饰符，或$once方法
触发自定义事件：this.$emit('demo',数据)
解绑自定义事件：this.$off('demo')
组件上也可绑定DOM事件，需要使用native修饰符
通过this.$refs.student.$on('demo',this.test)绑定自定义事件时，回调要么配置在methods中，要么使用 => 函数，否则this指向会出问题

全局事件总线

一种组件间通信的方式，适用于任意组件间通信

安装全局事件总线：

new Vue({
    el:'#app',
    render: h => h(App),
    beforeCreate(){
      Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
    }
})

使用事件总线：
- 接收数据：A组件想接收数据，就在A组件中给$bus绑定自定义事件，事件的回调在A组件中
  - ```
  methods: {
      demo(data){......}
  },
  mounted() {
      this.$bus.$on('xxx',this.demo)
  },
```
- 提供数据：this.$bus.$emit('xxx',数据)
最好在beforeDestroy钩子中，使用$off解绑当前组件所用到的事件

消息订阅与发布

一种组件间通信方式，适用于任意组件间通信
使用步骤：
- 安装pubsub：npm i pubsub-js
- 引入：import pubsub from 'pubsub-js'
- 接收数据：组件A想接收数据，则在组件A中订阅消息，订阅的回调在组件A中
  - ```
  methods: {
      demo(data){......}
  },
  mounted() {
      this.pubId = pubsub.subscribe('xxx',this.demo) //订阅消息
  }
```
- 提供数据：pubsub.publish('xxx',data)
- 最好在beforeDestroy中取消订阅：pubsub.unsubscribe(this.pubId)

nextTick

语法：this.$nextTick(回调函数)
作用：在下一次DOM更新后执行指定的回调
什么时候用：当改变数据后，要基于更新后新的DOM进行某些操作时，要在nextTick指定的回调函数中执行

Vue中的Axios

脚手架配置代理

客户端向服务器访问时，若请求协议、IP、端口任意一个一同，会出现跨域问题，可以在后端用nginx配置代理，或者在前端配置代理。在vue.config.js中两种前端配置代理的方式：

方式一：
- 优点：配置简单，请求资源时直接发送给前端即可
- 缺点：
  - 只能配置一个代理，不能灵活控制请求是否走代理
  - 若请求和本地资源名相同，会优先匹配本地资源，就不能转发给服务器（优先匹配前端资源）

devServer:{
    proxy:'http://localhost:端口号' // 配置目标服务器的地址
}

方式二：
- 优点：可配置多个代理，且可灵活控制请求是否走代理
- 缺点：配置繁琐，请求服务器必须加前缀，当服务器接收到请求时还要去掉前缀

devServer:{
    proxy:{
      '/api':{ //匹配所有以 '/api' 开头的请求
        target:'http://localhost:端口号', //配置目标服务器的地址
        pathRewrite:{'^/api':''}, //目标服务器接收到请求后，去掉前面的'/api'
        ws:true, //用于支持websocket，默认true
        changeOrigin:true //用于控制请求头中host值，默认true
      },
      '/api1':{
        target:'http://localhost:端口号',
        pathRewrite:{'^/api1':''},
        ws:true,
        changeOrigin:true
      }
    }
  }

插槽

插槽作用：让父组件可向子组件指定位置插入html结构，适用于父组件 ==> 子组件间的通信

分类：默认插槽、具名插槽、作用域插槽

默认插槽

父组件中：
        <Category>
           <div>html结构1</div>
        </Category>
子组件中：Category
        <template>
            <div>
               <!-- 定义插槽 -->
               <slot>插槽默认内容...</slot>
            </div>
        </template>

具名插槽

父组件指明放入子组件的哪个插槽slot="footer"，如果是template可以写成v-slot:footer

父组件中：
        <Category>
            <template slot="center">
              <div>html结构1</div>
            </template>

            <template v-slot:footer>
               <div>html结构2</div>
            </template>
        </Category>
子组件中：
        <template>
            <div>
               <!-- 定义插槽 -->
               <slot name="center">插槽默认内容...</slot>
               <slot name="footer">插槽默认内容...</slot>
            </div>
        </template>

作用域插槽

scope用于父组件往子组件插槽放的html结构接收子组件的数据
数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）

父组件中：
        <Category>
            <template scope="scopeData">
                <!-- 生成的是ul列表 -->
                <ul>
                  <li v-for="g in scopeData.games" :key="g">{{g}}</li>
                </ul>
            </template>
        </Category>

        <Category>
            <template slot-scope="scopeData">
                <!-- 生成的是h4标题 -->
                <h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>
            </template>
        </Category>
子组件中：
        <template>
            <div>
                <slot :games="games"></slot>
            </div>
        </template>
        
        <script>
            export default {
                name:'Category',
                props:['title'],
                //数据在子组件自身
                data() {
                    return {
                        games:['红色警戒','穿越火线','劲舞团','超级玛丽']
                    }
                },
            }
        </script>

Vuex

概念

在Vue中实现集中式状态（数据）管理的一个Vue插件，对Vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信
vuex3对应vue2，vuex4对应vue3，使用 npm i vuex@3 安装vuex3或 npm i vuex 安装最新的vuex4

使用场景

多个组件依赖于同一状态
来自不同组件的行为需要变更同一状态
- 多组件共享数据-全局事件实现
- 多组件共享数据-vuex实现
  
  ![vuex实现数据共享](D:\安装包和安装目录\Typora\笔记\Vue\image\vuex实现数据共享.jpg

vuex原理

使用步骤

初始化数据state，配置actions、mutations，操作文件store.js
组件中读取vuex中的数据$store.state.数据名
组件中修改vuex中的数据$store.dispatch('action中的方法名',数据) 或$store.commit('mutations中的方法名',数据)

若没有网络请求或其他业务逻辑，组件中也可越过actions，即不写dispatch，直接编写commit
actions相当于Service层、mutations相当于Dao层，state相当于数据库

配置项getters

当state中的数据需要经过加工后再使用时，可以使用getters加工，相当于全局计算属性
在store.js中追加getters配置
组件中读取数据$store.getters.方法名

四个map方法的使用

mapState方法：用于映射state中的数据为计算属性

computed: {
    // 借助mapState生成计算属性：sum、school、subject（对象写法一）
    ...mapState({sum:'sum',school:'school',subject:'subject'}),

    // 借助mapState生成计算属性：sum、school、subject（数组写法二）
    ...mapState(['sum','school','subject']),
},

mapGetters方法：用于帮助映射getters中的数据为计算属性

computed: {
    //借助mapGetters生成计算属性：bigSum（对象写法一）
    ...mapGetters({bigSum:'bigSum'}),

    //借助mapGetters生成计算属性：bigSum（数组写法二）
    ...mapGetters(['bigSum'])
},

mapActions方法：用于帮助生成与actions对话的方法，即包含$store.dispatch(xxx)的函数

methods:{
    //靠mapActions生成：incrementOdd、incrementWait（对象形式）
    ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

    //靠mapActions生成：incrementOdd、incrementWait（数组形式）
    ...mapActions(['jiaOdd','jiaWait'])
}

mapMutations方法：用于帮助生成与mutations对话的方法，即包含$store.commit(xxx)的函数

methods:{
    //靠mapActions生成：increment、decrement（对象形式）
    ...mapMutations({increment:'JIA',decrement:'JIAN'}),
    
    //靠mapMutations生成：JIA、JIAN（对象形式）
    ...mapMutations(['JIA','JIAN']),
}

备注：mapActions和mapMutations使用时，若需要传递参数，在模板中绑定事件时传递参数，否则参数是事件对象

模块化+命名空间

目的：让代码更好维护，让多种数据分类更加明确
为了解决不同模块命名冲突的问题，将不同模块的namespaced: true，之后在不同页面中引入getter、actions、mutations时，需要加上所属的模块名

开启命名空间后，组件中读取state数据

// 方式一：自己直接读取
this.$store.state.personAbout.list
// 方式二：借助mapState读取：
...mapState('countAbout',['sum','school','subject']),

开启命名空间后，组件中读取getters数据

//方式一：自己直接读取
this.$store.getters['personAbout/firstPersonName']
//方式二：借助mapGetters读取：
...mapGetters('countAbout',['bigSum'])

开启命名空间后，组件中调用dispatch

//方式一：自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang',person)
//方式二：借助mapActions：
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

开启命名空间后，组件中调用commit

//方式一：自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二：借助mapMutations：
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'})

Vue Router

vue-router 的理解是vue的一个插件库，专门用来实现SPA应用，SPA应用：
- 单页Web应用（single page web application，SPA）
- 整个应用只有一个完整的页面
- 点击页面中的导航链接不会刷新页面，只会做页面的局部更新
- 数据需要通过ajax请求获取

路由概念

一个路由（router）就是一组映射关系（key-value），多个路由需要路由器（router）进行管理
后端路由：
- key是路径；value是function，用于处理客户端提交的请求
- 工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据
前端路由：
- key是路径；value是组件，用于展示页面内容
- 工作过程：当浏览器的路径改变时，对应的组件就会显示

路由使用

安装vue-router，命令npm i vue-router@3（vue2对应vue-router@3，vue3对应vue-router@4）
应用插件Vue.use(VueRouter)
编写router配置项
实现切换
- <router-link></router-link>浏览器会被替换为a标签
- active-class可配置高亮样式
指定展示位<router-view></router-view>

注意点

路由组件通常放在pages文件夹，一般组件通常放在components文件夹
通过切换，“隐藏”了的路由组件，默认是被销毁的，需要的时候再去挂载
每个组件都有自己的$route属性，里面存储着自己的路由信息
整个应用只有一个router，可通过组件的$router属性获取

多级路由

使用children配置项配置二级路由或多级路由，非一级路由配置路径时前面不需要加 /，会自动加上/
跳转的时候要写上路由的完整路径

路由的query参数

使用router-link跳转时，可使用to的对象写法配置路径和参数
接收参数：$route.query.xxx

命名路由

作用：简化路由的跳转
配置路由的时候，可不设置path，而是设置一个name，之后就根据name进行跳转
- 简化前，需要写完整的路径
- 简化后，直接通过名字跳转

路由params参数

配置路由，声明接收params参数
传递参数，路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！
接收参数：$route.params.xxx

路由 props 配置

作用：让路由组件更方便的收到参数

//第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件
// props:{a:900}

//第二种写法：props值为布尔值，为true时，则把路由收到的所有params参数通过props传给Detail组件
// props:true

//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
props($route){
    return {
        id: $route.query.id,
        title: $route.query.title
    }
}

route-link标签的replace

作用：控制路由跳转时操作浏览器历史记录的模式
浏览器的历史记录有两种写入方式：push和replace
- push是追加历史记录，路由跳转时候默认为push方式
- replace是替换当前记录
开启replace模式：<router-link replace ...>

编程式路由导航

作用：不借助<router-link>实现路由跳转，让路由跳转更灵活
相关5个API：
1. this.$router.push({})，追加历史记录，内传的对象与<router-link>中的to相同
2. this.$router.replace({})，替换当前记录
3. this.$router.forward()，前进
4. this.$router.back()，后退
5. this.$router.go(n)，传入正数表示前进几步，传入负数表示后退几步，传入0表示刷新

缓存路由组件

作用：让不展示的路由组件保持挂载，不被销毁

// 缓存一个路由组件
<keep-alive include="News"> // include中写想要缓存的组件名，不写表示全部缓存
    <router-view></router-view>
</keep-alive>

// 缓存多个路由组件
<keep-alive :include="['News','Message']"> 
    <router-view></router-view>
</keep-alive>

// 缓存该组件下的所有路由组件
<keep-alive>
    <router-view></router-view>
</keep-alive>

include表示包含的组件挂载，exclude表示除了这些组件之外的组件挂载

两个新生命周期钩子

作用：路由组件所独有的两个钩子，用于捕获路由组件中的激活状态

具体名字：

activated：路由组件被激活时触发
deactivated：路由组件失活时触发

作用：对路由进行权限控制；分为：全局守卫、独享守卫、组件内守卫

全局守卫

// 全局前置守卫：初始化时、每次路由切换前执行
router.beforeEach((to,from,next) => {
    console.log('beforeEach',to,from)
    if(to.meta.isAuth){ // 判断当前路由是否需要进行权限控制
        if(localStorage.getItem('school') === 'qinghua'){ // 权限控制的具体规则
            next()  // 放行
        }else{
            alert('暂无权限查看')
        }
    }else{
        next()  // 放行
    }
})

// 全局后置守卫：初始化时、每次路由切换后执行
router.afterEach((to,from) => {
    console.log('afterEach',to,from)
    if(to.meta.title){ 
        document.title = to.meta.title //修改网页的title
    }else{
        document.title = 'vue_test'
    }
})

独享守卫

beforeEnter(to,from,next){
    console.log('beforeEnter',to,from)
    if(localStorage.getItem('school') === 'atguigu'){
        next()
    }else{
        alert('暂无权限查看')
    }
}

组件内守卫

//进入守卫：通过路由规则，进入该组件时被调用
beforeRouteEnter (to, from, next) {... next()},

//离开守卫：通过路由规则，离开该组件时被调用
beforeRouteLeave (to, from, next) {... next()},

对于url来说，#及其后面的内容就是hash值
hash值不会包含在HTTP请求中，即：hash值不会带给服务器
hash模式
- 页面刷新后不会将#及其之后的路径带给服务器，不会导致404
- url中永远带着#号，不美观
- 若将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法
- 兼容性较好
history模式
- 页面刷新后会将当前的url带给服务器，导致404
- 地址干净，美观
- 兼容性和hash模式相比略差