title: Vue
date: 2023-04-04 18:39:06
tags:
- vue
categories: - html
初识Vue
简介
Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。
创建Vue实例
-
想要让Vue工作，需要创建一个Vue实例，并且传入一个配置对象；
-
Vue实例和容器是一对一对应的；
-
真实开发中只有一个Vue实例，并且会配合组件一起使用
-
{{xxx}}中的xxx要写成js表达式，xxx会读取data中的所有属性
-
data中的数据发生改变，那么使用该数据的地方也会自动更新
new Vue{ el :" #root" data: }
模板语法
-
插值语法：
-
功能：用于解析标签体内容
-
写法：{{ xxx}}，xxx是js表达式，且可以直接读取data中的所有属性
-
-
指令语法：
- 功能：用于解析标签（包括：标签属性，标签体内容。绑定事件……）
-
数据绑定
-
1.单向绑定（v-bind）:数据只能从data流向页面
-
2.双向绑定（v-model）:数据不仅能从data流向页面，还可以从页面流向data
备注：
-
双向绑定一般都应用在表单类元素上（如：input，select等）
-
v-model:value可以简写为 v-model，因为v-model默认收集value值
-
v-bind:value简写为 :value
-
el和data的两种写法:
-
el两种写法：
-
new Vue时候配置el属性
el:'root' -
先创建Vue实例，随后再通过vm.$mount(‘#root’)指定el的值
-
-
data有两种写法
-
对象式
data:{} -
函数式：
data(){}
-
备注：由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了
Object.defineProperty()
-
数据代理：通过一个对象代理对另一个对象中属性的操作（读/写） -
事件的基本用法：
-
使用v-on:xxx 或者 @xxx绑定事件，其中xxx是事件名
-
事件的回调需要配置在methods对象中，最终会在vm上
-
methods中配置的函数，不要使用箭头函数！否则this不在是vm了
-
methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或者组件实例对象
-
@click=“demo()”和@click=“demo($event)”效果一样，但是后者可以传参
-
Vue中事件修饰符：
prevent:阻止默认事件（常见）stop:阻止事件冒泡（常用）once：事件只触发一次（常用）capture：使用事件的捕获模式self：只有event.target是当前操作的元素时才能触发事件passive：事件的默认行为立即执行，无需等待事件回调执行完毕
键盘事件：
- Vue中常见的按键别名：
回车：
enter 删除：
delet 退出：
esc 空格：
space 换行：
tab（配合keydown使用） 上：
up 下：
down 左：
left 右：
right
- Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case(短横线命名)
- 系统修饰按键（用法特殊）：Ctrl、alt、shift、meta
-
配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发
-
配合keydown使用：正常触发事件
-
- 也可以使用keycode去指定具体的按键（不推荐）
Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名
计算属性：
-
定义：要用的属性不存在，要通过已有的属性计算得来
-
原理：底层借助了
Object.defineproperty方法提供的getter和setter
get函数什么时候被执行：
1.初次读取时会执行一次
2.当依赖的数据发生改变时会被再次调用
优势：与methods实现相比，内部有缓存机制（复用）,效率高，调试方便
备注：
1.计算属性最终会出现在vm上，直接读取使用即可
2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变
监视属性：
1. 当监视的属性发生变化时，回调函数自动调用，进行相关操作
2. 监视的属性必须存在，才能进行监视！！
3. 监视的两种写法：
- new Vue时传入watch配置
- 通过vm.$watch配置
深度监视：
-
1. Vue中watch默认不监视对象内部值的改变（一层）
-
2.配置deep:true可以监视对象内部值改变（多层）
备注：
-
Vue自身可以监视对象内部值的改变，但Vue提供的watch默认不可以！
-
使用watch时根据数据的具体结构，决定是否采用深度监视
computed和watch之间的区别：
1.computed能完成的功能，watch都可以完成。
2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作
两个重要的小原则：
1.所被Vue管理的函数，最好都写成普通函数，这样this的指向才是vm或组件实例对象
2.所有不被Vue管理的函数（定时器的回调函数、ajax的回调函数、Promise的回调函数等），最好写成箭头函数，这样this的指向才是vm或组件实例对象。
绑定class样式：
- 写法：
:class ="xxx"xxx可以是字符串、对象、数组 - 字符串写法：适用于样式名不确定，需要动态指定
- **数组写法：**适用于要绑定的样式个数不确定、名字也不确定
- 对象写法： 适用于要绑定的样式个数确定，名字也确定，但要动态决定用不用
绑定style样式：
写法：
对象写法： :style = "{forntSize: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-show = "表达式"
**适用于：**切换频率较高的场景
**特点：**不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
备注：
使用
v-if的时候，元素可能无法获取到，而使用v-show一定可以获取到
v-for指令：
- **作用：**用于展示列表数据
- 语法：
v-for ="（item，index）in xxx ":key ="yyy" - **可遍历：**数组、对象、字符串（用的很少）、指定次数（用的很少 ）
面试题：react、vue中key有什么用？（key的内部原理）
1.虚拟DOM中key的作用：
key是虚拟DOM对象的标识，当状态中的数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】
随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异对比，比较规则如下：
2.对比规则：
（1）旧虚拟DOM中找到了与新虚拟DOM相同的key：
若虚拟DOM中内容没变，直接使用之前的真实DOM
若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM
（2）虚拟DOM中未找到与新虚拟DOM相同的key
创建新的真实DOM，随后渲染到页面
3.用index作为key可能会引发的问题：
1.若对数据进行：逆序添加、逆序删除等破坏顺序操作
会产生没有必要的真实DOM更新 –> 界面效果没问题，但效率低
2.如果结构中还包含输入类的DOM
会产生错误DOM更新–>界面出现问题
4.开发中如何选择key？
1.最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号、学号等唯一值
2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表展示
使用index作为key是没有问题的
Vue监视数据的原理：
-
vue会监视data中所有层次的数据
-
对象中后追加的属性，Vue默认不做响应式处理
-
如需给后添加的属性做响应式，请使用如下API:
-
Vue.set.(target,propertyName/index,value)或者
vm.$set.(target,propertyName/index,value)
如何监视数组中的数据？
通过包裹数组更新元素的方法实现，本质是做了两件事： ·
（1）调用原生对应的方法对数组进行更新
（2）重新解析模板，进而更新页面
在Vue修改数组中的某一个元素一定要用如下方法：
1.使用这些API: push()、pop()、shift()、unshift()、splice()、sort()、reverse()
2.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属性，那么收集的就是
checkbox（勾选 or 未勾选，是布尔值） -
配置input的value属性：
-
v-model的初始值是非数组，那么收集的就是checkbox（勾线 or 未勾选，是布尔值） -
v-model的初始值是数组，那么收集的就是value组成的数组
-
备注：v-model的三个修饰符：
lazy：失去焦点再收集数据
number：输入字符串转为有效的数字
trim：输入首尾空格过滤
过滤器：
**定义：**对要显示的数据进行特定格式化再显示（适用于一些简单逻辑的处理）
语法：
1.注册过滤器：Vue.fileter(name,callback) 或 new Vue(filters:{})
2.使用过滤器：{{xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"
备注：
1.过滤器也可以接受额外参数、多个过滤器也可以串联
2.并没有改变原本的数据，是产生新的对应的数据
Vue其他指令
v-text指令
1.作用：向其所在的节点中渲染文本内容
2.与插值语法的区别：v-text会替换掉节点中的内容，{{xxx}}则不会
v-html指令
1.作用：向指定节点中渲染包含html结构的内容
2.与插值语法的区别：
（1）v-html会替换掉节点中所有的内容，{{xxx}}则不会
（2）v-html可以识别html结构
严重注意：v-html有安全性问题
在网站上动态渲染任意HTML是非常危险的，容易导致xss攻击
一定要在可信的内容上使用v-html，永远不要再用户提交的内容上
v-cloak指令（没有值）
1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删除v-cloak属性
2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题
v-once指令：
1.v-once所在节点在初次动态渲染后，就视为静态内容了
2.以后数据的改变并不会引起v-once所在结构的更新，可以用于优化性能
v-pre指令：
1.跳过其所在节点的编译过程
2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译
自定义指令：(函数式)
-
指令与元素成功绑定时（一上来）
-
指令所在的模板被重新解析时
directives:{
big:function(element,binding){
element.innerText = binding.value*10
}
}
一、定义语法：
1.局部指令：
new Vue({
directives:{指令名:配置对象}
})
或
new Vue({
directives:{指令名:回调函数}
})
2.全局指令：
Vue.dircetive(指令名,配置对象)或者Vue.directive(指令名,回调函数)
二、配置对象中常用的3个回调：
- **bind：**指令与元素绑定时调用
- **inserted：**指令所在元素被插入页面时调用
- **update：**指令所在模板结构被重新解析时调用
三、注意事项
-
指令定义时不加v-，但使用时要加v-
-
指令名如果是多个单词，要使用kebab-case命名方式，不要用cameCase命名
生命周期
-
**别名：**生命周期回调函数、生命周期函数、生命周期钩子
-
定义：
Vue在关键时刻帮我们调用一些特殊名称的函数 -
生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的
-
生命周期函数中的
this指向是vm或组件实例对象(vc)
常见生命周期钩子：
-
mounted：发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】 -
beforeDestroy：清除定时器、解绑自定义事件、取消订阅消息等【首尾工作】
关于销毁Vue实例：
-
销毁后借助Vue开发者工具看不到任何信息
-
销毁后自定义事件会失效，但原生DOM事件依然有效
-
一般不会再
beforeDestroy操作数据，因为即使操作数据，也不会再更新流程了
模块
1.理解：向外提供特定功能的js程序，一般就是一个js文件
2.为什么：js文件很多很复杂
3.作用：复用js，简化js的编写，提高js运行效率
组件
1.理解：用来实现局部（特定）功能效果的代码集合
2**.为什么**：一个界面的功能很复杂
3**.作用**：复用编码，简化项目编程，提高运行系效率
模块化
当应用中的js都以模块来编写时，那这个应用就是一个模块化的应用
Vue中如何使用组件
1.定义组件（创建组件）
2.注册组件
3.使用组件（写组件标签）
一、如何定义一个组件
-
使用
Vue.extend(options)创建，其中option和new Vue(option)时传入的那个option几乎一样，但区别如下：-
el不要写，为什么？——最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器 -
data必须写成函数式，为什么？——避免组件被复用时，数据存在应用关系
-
-
备注：使用
template标签可以配置组件结构
二、如何注册组
1.局部注册：靠new Vue的时候传入components选项
2.全局注册：靠Vue.componnet('组件名',组件)
三、编写组件标签
例如：<school></school >
注意点：
1.关于组件名
一个单词组成：
-
第一种写法：（首字母小写）：school
-
第二种写法：（首字母大写）：School
多个单词组成：
-
第一种写法：（kebab-case命名）：my-school
-
第二种写法：（CamelClase命名）：MySchool（需要Vue脚手架）
备注：
（1）组件名尽可能回避HTML中已有的元素名称，例如：h2,H2都不行
（2）可以使用name配置项指定组件在开发者工具中呈现的名字
2.关于组件标签
-
第一种写法：
<school></school> -
第二种写法：
<school/>
备注：不用使用脚手架时，会导致后续组件不能渲染
3.一个简写方式：
const school = Vue.extend(options) 可简写为：const school = options
关于VueComponent：
1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的
2.我们只需要写或者，Vue解析时会帮我们创建school组件的实例对象
3.特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！
4.关于this指向：
(1)组件配置中：
data函数、methods中的函数、watch中的函数、computed中的函数，他们的this均是【VueComponent实例对象】
(2)new Vue（options）配置中
data函数、methods中的函数、watch中的函数、computed中的函数，他们的this均是【Vue例对象】
5.VueComponent的实例对象，以后简称vc（也可称为：组件实例对象）
Vue的实例对象，以后简称vm
1.一个重要的内置关系：
VueComponent.prototype.____proto___=== Vue.prototype2.为什么要有这个关系：让组件实例对象（vc）可以访问到Vue原型上的属性和方法
关于不同版本的Vue:
1.vue.js与vue.runtime.xxx.js的区别：
（1）vue.js是完整版的Vue，包含：核心功能+模板解析器
（2）vue.runtime.xxx.js是运行版的Vue，只包含：核心功能，没有模板解析器
2.因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容
脚手架文件结构：
|—–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.config.js配置文件
1.使用vue.inspect > output.js可以查看Vue脚手架的默认配置
2.使用vue.config.js可以对脚手架进行个性化定制，详情见官网
ref属性：
-
被用来给元素或子组件注册引用消息（id的替代者）
-
应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
-
使用方式：
-
打标识：
<h1 ref ==“xxx”>………</h1>或<School ref = “xxx"></School> -
获取：
this.$refs.xxx
-
配置项props：
功能：让组件接受外部传过来的数据
（1）传递数据
<School name = “xxx"/>
（2）接收数据：
第一种方式（只接收）
props：['name']
第二种方式（限制类型）
props：{ name:String }
第三种方式（限制类型，限制必要性，指定默认值）：
props：{
name：{
type：String， （类型）
required：true（必要性）
default：‘老王’（默认值）
}
}
备注：props是只读，Vue底层会检测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。
mixin（混入）
-
**功能：**可以把多个组件共用的配置提取成一个混入对象
-
使用方式：
- 第一步定义混合，例如：
{ data（）{……}, methods:{…..} …….. }-
第二步使用混入，例如：
1. 全局混入：
Vue.mixin(xxx) 2.局部混入：
mixins:['xxx']
插件：
-
**功能：**用于增强Vue
-
**本质：**包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据
-
定义插件：
对象.install = function（Vue，options）{
1.添加全局过滤器
Vue.filter(……)
2.添加全局指令
Vue.directive(………)
3.配置全局混入
Vue.mixin(………)
4.添加实例方法
Vue.prototype.$myMethod = function（）{……}
Vue.prototype.$myProperty = xxxx
}
使用插件：Vue.use（plugins）
scoped样式
-
作用：让样式在局部生效，防止冲突
-
写法：`
WebStorage（浏览器本地存储）
1.存储内容大小一般支持5M左右（不同浏览器可能不一样）
2.浏览器端通过Window.sessionStorage和Window.localStorage属性来实现本地存储机制
3.相关API
1.xxxStorage.setItem( ‘key’ , ‘value’)
该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新器对应的值
2.xxxxStorage.getItem (‘person’)
该方法接受一个键名作为参数，返回键名对应的值
3.xxxStorage.removeItem(‘key’)
该方法接受一个键名作为参数，并把该键名从存储中删除
4.xxxxStorage.clear()
该方法会清空存储中的所有的数据
4.备注：
1.SessionStorage存储的内容会随着浏览器窗口关闭而消失
2.LocalStorage存储的内容，需要手动清除才会消失
3.xxxxStorage.gitItem(xxx)如果xxx对应的value获取不到，那么getItem的返回值是null
4.JSON.parse(null)的结果依然是null
组件的自定义事件
1.**定义：**一种组件间通信的方式，适用于 子组件===>父组件
2.**使用场景：**A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）
3.绑定自定义事件：
1.第一种方式，在父组件中：<Demo @atguigu = “test”/>或<Demo v-on:atguigu = “test"/>
2.第二种方式，在父组件中：
<Demo ref = "demo">
.....
mounted(){
this.$refs.xxx.$on('atguigu',this.test)
}
3.若想让自定义事件只触发一次，可以使用once修饰符，或$once方法
4.触发自定义事件: this.$emit(‘atguitu’,数据)
5.解绑自定义事件：this.$off(‘atguigu’)
6.组件上可以绑定原生DOM事件，需要使用native修饰符
7.注意：通过this.$ref.xxx.$on('atguigu',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出现问题！
全局事件总线（GlobalEvenBus）
-
一种组件间通信的方式,适用于任意组件间通信
-
安装全局事件总线:
new Vue({
....
beforeCreate(){
Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
},
....
})
-
使用事件总线：
- 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身
- 提供数据：
this.$bus.$emit(‘xxx’,数据)
methods(){
demo(data){...}
},
....
mounted(){
this.$bus.$on('xxx',this.demo)
}
- 最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件
消息订阅与发布（pubsub）
-
一种组件间通信的方式，适用于任意组件间通信
-
使用步骤：
-
安装pubsub：
npm i pubsub-js -
引入：
import pubsub from ‘pubsub-js’
-
-
接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身
methods(){
demo(data){....}
},
.....
mounted(){
this.pid = pubsub.subscribe('xxx',this.demo)//订阅消息
}
-
提供数据：
pubsub.publish('xxx',数据) -
最好在
beforeDestroy钩子中，用Pubsub.unsubscribe(pid)去<span style = "color:red">取消订阅</span>
nextTick
- 语法：
this.$nextTick(回调函数) - **作用：**在下一次DOM更新结束后执行其指定的回调
- **什么时候用：**当改变数据后，要基于更新后的DOM进行某些操作时，要在nextTick所指定的回调函数中执行
Vue封装的过渡与动画
- **作用：**在插入，更新或移除DOM元素时，在合适的时候给元素添加样式类名
- 写法：
- 准备好样式：
元素进入的样式：
1.v-enter：进入的起点
2.v-enter-active：进入过程中
3.v-enter-to：进入的终点
元素离开的样式：
1.v-leave：离开的起点
2.v-leave-active：离开过程中
3.v-leave-to：离开的终点
- 使用
<transition>包裹要过渡的元素，并配置name属性：
<transition name = "hello">
<h1 v-show = "isShow"> 你好啊！</h1>
</transition>
备注：若有多个元素需要过渡，在需要使用：
<transition-group>,且每个元素都要指定key值
vue脚手架配置代理
- 方法一：
在vue.config.js中添加如下配置：
devServer:{
proxy:"http://localhost:5000"
}
说明：
1.优点：配置简单，请求资源时直接发给前端（8080）即可
2.缺点：不能配置多个代理，不能灵活的控制请求是否走代理
3.工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源）
- 方法二：
编写vue.config.js配置具体代理规则：
module.exports = {
derServer:{
proxy:{
'api1':{ //匹配所以以'/api1'开头的请求路径
target: 'http://localhost:5000'
changeOrigin:true,
pathRewrite:{'^/api':''} //路径重定向
}，
'api2':{ //匹配所以以'/api'开头的请求路径
target: 'http://localhost:5000'
changeOrigin:true,
pathRewrite:{'^/api2':''}//路径重定向
}
}
}
}
/*
changeOrigin设置为true时，服务器收到的请求头中的host为，localhost:5000 (既是说谎)
changeOrigin设置为false时，服务器收到的请求头中的host为,localhost:8080 (不说慌)
changeOrigin默认是true
*/
说明：
1.优点：可以配置多个代理，且可以灵活的控制请求是否走代理
2.缺点：配置略微繁琐，请求资源时必须加前缀
插槽：
1.**作用：**让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件===>子组件
2.**分类：**默认插槽、具名插槽、作用域插槽
3.使用方式：
1.默认插槽
父组件中:
<Category>
<div>html结构1</div>
<Category>
子组件中:
<template>
<div>
<!--定义插槽-->
<slot>插槽默认内容...</slot>
</div>
<template>
2.具名插槽
父组件中:
<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>
3.作用域插槽
1.理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。
（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）
2.具体编码：
父组件中:
<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 :name = "games"/>
</div>
<template>
<script>
export default {
name: 'Category'
props:['title'],
//数据在子组件自身
data(){
return{
games:['红色警戒','穿越火线','劲舞团','超级玛丽']
}
},
}
</script>
搭建Vuex环境
1.创建文件：src/store/store.js
//引入Vue核心库
import Vue from 'Vue'
//引入Vuex
import Vuex from 'Vuex'
//应用Vuex插件
Vue.use(Vuex)
//准备action对象---响应组件中用户发动作
const action = {}
//准备mutation对象---修改state中的数据
const mutation = {}
//准备state对象---保存具体的数据
const state = {}
//创建并暴露store
export default new Vuex.Store({
action = action,
mutations = mutations,
state = state,
})
2.在main.js中创建vm时传入store配置项
...
import store from './store'
...
new Vue({
el:'#app',
render:h => h(App),
store,
})
基本用法
1.初始化数据，配置action、配置mutation、操作文件index.js
//引入Vue核心库
import Vue from 'Vue'
//引入Vuex
import Vuex from 'Vuex'
//应用Vuex插件
Vue.use(Vuex)
//准备action对象---响应组件中用户发动作
const action = {
//响应组件中的动作
jia(context,value){
context.commit('JIA','value')
},
}
//准备mutation对象---修改state中的数据
const mutation = {
//执行加
JIA(state,value){
state.sum += value
}
}
//准备state对象---保存具体的数据
const state = {
//初始化数据
sum:0
}
//创建并暴露store
export default new Vuex.Store({
action = action,
mutations = mutations,
state = state,
})
2.组件中读取vuex中的数据：$store.state.sum
3.组件中修改vuex中的数据：$store.dispatch('action中的方法名',数据)或者 $store.commit('mutation中方法名',数据)
备注：若没有网络请求或者其他业务逻辑，组件中也可以越过actions，即不写
dispatch，直接编写commit
四个Map方法的使用：
1.mapState方法：用于帮助我们映射 state 中的数据为计算属性
computer:{
//借助mapState生成计算属性，sum、school、subject(对象写法)
...mapState({sum:'sum',school:'school',subject:'subject'})
//借助mapState生成计算属性，sum、school、subject(数组写法)
...mapState(['sum','school','subject'])
}
2.mapGetters方法：用于帮助我们映射getter中的数据为计算属性
computer:{
//借助mapGetters生成计算属性，bigSum(对象写法)
...mapGetters({bigSum:'bigSum',})
//借助mapState生成计算属性bigSum(数组写法)
...mapGetters([bigSum])
}
3.mapActions方法：用于帮助我们生成与 actions对话的方法，即：包含 $store.dispath(xxx)的函数
methods:{
//靠mapActions生成：incrementOdd、incrementWait(对象形式)
...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
//靠mapActions生成：jiatOdd、jiatWait(数组形式)
...mapActions(['jiaOdd','jiaWait'])
}
4.mapMutations方法：用于帮助我们生成与 mutations对话的方法，即：$store.commit(xxx)的函数
methods:{
//靠mapMustations生成：increment、decremment(对象形式)
...mapActions({increment:'JIA',decremment:'JIAN'})
//靠mapMutations生成：JIA、JIAN(数组形式)
...mapActions(['JIA','JIAN'])
}
备注：
mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象
模块化+命名空间
1.**目的：**让代码更好的维护，让多种数据分类更加明确
2.修改 store.js
const countAbout = {
namespaced;true, //开启命名空间
actions:{...},
mutations:{...},
state:{...},
getters:{
bigSum(state){
return state.sum *= 10
}
}
}
const personAbout = {
namespaced;true, //开启命名空间
actions:{...},
mutations:{...},
state:{...},
}
const store = new Vuex.Store({
modules:{
countAbout,
personAbout
}
})
3.开启命名空间后，组件中读取state数据：
//方式一 : 自己直接读取
this.$store.state.personAbout.list
//方式二 : 借助mapState读取
...mapState('countAbout',['sum','school','subject'])
4.开启命名空间后，组件中读取getters数据：
//方式一 : 自己直接读取
this.$store.getters[personAbout/firstPersonName']
//方式二 : 借助mapGetters读取
...mapGetters('countAbout',['bigSum'])
5.开启命名空间后，组件中调用dispatch
//方式一: 自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang',person)
//方式二: 借助mapActions
...mapActions('countAbout',{incremmentOdd:'jiaOdd',incremmentWait:'jiaWait'})
6.开启命名空间后，组件中调用commit
//方式一: 自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二: 借助mapActions
...mapMutations('countAbout',{incremment:'JIA',decremment:'JIAN'})
vue-router的理解
-
**理解：**vue的一个插件库，专门用来实现
SPA应用 -
对SPA应用的理解
-
单页面Web应用（single page web application ,SPA）
-
整个应用只有一个完整的页面
-
点击页面中的导航链接不会刷新页面，只会做页面的局部更新
-
数据需要通过ajax请求获取
-
路由的理解
- 什么是路由？
1.一个路由就是一组映射关系(key - value)
2.key为路径，value可能是function或component
- 路由分类
1.后端路由：
1、理解：value是function，用于处理客户端提交的请求
2、工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据
2.后端路由：
1、理解：value是component，用于展示页面内容
2、工作过程：当浏览器的路径改变时，对应的组件就会显示
基本使用：
1.安装vue-router，命令：npm i vue-router
2.应用插件：Vue.ues(VueRouter)
3.编写配置项：
//引入VueRouter
import VueRouter from 'vue-router'
//引入路由组件
import About from '../components/About'
import Home from '../components/Home'
//创建router实例对象，去管理一组一组的路由规则
const router = new VueRouter({
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home,
children:[
{
path: 'news'
component:News,
}
]
},
]
})
//暴露router
export defalt router
4.实现切换(active-class可配置高亮选项)
<router-link active-class = "active" to = "/about">About</router-link>
5.指定展示位置
<router-view></router-view>
多级路由(嵌套路由)
1.配置路由规则，使用children配置项：
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home,
children:[ //通过children配置子级路由
{
path: 'news' //此处一定不要写 /news
component:News
},
{
path:'message' //此处一定不要写 /message
component:Message
}
]
},
]
2.跳转（要写完整路径）
<router-link to = "/home/news">News</router-link>
路由的query参数
1.传递参数(:to=“xxxx”)
<!--跳转并携带query参数，to的字符串写法-->
<router-link :to="`/home/message/detail?id=666&title=你好`">跳转</router-link>
//要使用模块语法，使用``包裹起来
<!--跳转并携带query参数，to的写法-->
<router-link
:to="{
path:'/home/message/detail',
query:{
id:666,
title:你好
}
}">跳转</router-link>
2.接收参数
$route.query.id
$route.query.title
命名路由：
1.作用：可以简化路由的跳转
2.如何使用：
1.给路由命名：
{
path:'/demo',
component:Demo,
children:[
{
path:'test',
component:Test,
children:[
{
name:'hello'//给路由命名
path:'welcome',
commponent:Hello,
}
]
}
]
}
2.简化跳转：
<!--简化前需要写完整的路径-->
<router-link :to="/demo/test/welcome">跳转</router-link>
<!--简化后，直接通过名字跳转-->
<router-link :to="{name:hello}">跳转</router-link>
<!--简化写法配合传递参数-->
<router-link
:to="{
name:'hello', //注意要使用name属性，不要使用path属性
query:{
id:666,
title:你好
}
}">跳转</router-link>
路由的params参数
1.配置路由，声明接收params参数
{
path:'/home',
component:Home,
children:[
{
path:'news',
component:News
},
{
path:'message'
component:Message,
children:[
{
name:'xiangqing' //给路由命名
path:'detail/:id/:title', //使用占位符声明接收params参数
commponent:Detail,
}
]
}
]
}
2.传递参数
<!--跳转并携带query参数，to的字符串写法-->
<router-link :to="`/home/message/detail/666/你好`">跳转</router-link>
//要使用模块语法，使用``包裹起来
<!--跳转并携带query参数，to的写法-->
<router-link
:to="{
name:'xiangqing',//注意要使用name属性，不要使用path属性
params:{
id:666,
title:你好
}
}">跳转</router-link>
特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！！！
3.接收参数
$route.params.id
$route.params.title
路由的props配置
作用：让路由组件更方便的接收参数
{
name:'xiangqing',
path:'datail/id',
component:Detail,
//第一种写法：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
}
}
}
的replace属性
-
作用：控制路由跳转时操作浏览器历史记录的模式
-
浏览器的历史记录有两种写入方式：分别是
push和replace，push是追加历史记录，replace是替换当前记录，路由跳转时候默认是push -
如何开启replace模式，
<router-link replace ….>News</router-link>
编程式路由导航
1.**作用：**不借助 <router-link>实现路由跳转，让路由跳转更加灵活
2.具体编码：
//$router的两个API
this.$router.push({
name:'xiangqing'
params:{
id:xxx,
title:xxx
}
})
this.$router.replace({
name:'xiangqing'
params:{
id:xxx,
title:xxx
}
})
this.$router.forward() //前进
this.$router.back() //后退
this.$router.go() //给定数字实现前进后退操作 8
缓存路由
1.作用：让不展示的路由组件保持挂载，不被销毁
2.具体编码
<keep-alive include = "News">//News指的是组件名
<router-view></router-view>
</keep-alive>
备注：缓存多个路由组件
//绑定元素，并且把路由组件写进数组中
<keep-alive :include = "['News','Message']">
两个新的生命周期钩子
-
作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态
-
具体名字：
-
activated路由组件被激活时触发 -
deactivated路由组件失活时触发
-
路由守卫
//全局前置路由守卫，初始化执行，每次路由切换前执行
router.beforeEach((to,from,next)=>{
console.log('beforeEach',to,from)
if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
if(localStorage.getItem('school')==='atguigu'){ //权限控制的具体规则
next()//放行
}else{
alert('暂无权限查看')
}
}else(){
next() //放行
}
})
//全局后置路由守卫，初始化时执行，每次路由切换后执行
router.afterEach((to,from)=>{
console.log('afterEach',to,from)
if(to.meta.title){
document.title = to.mteta.title//修改网页的title
}else{
document.title = 'vue_test'
}
})
独享守卫：
beforeEnter((to,from,next){
console.log('beforeEnter',to,from)
if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
if(localStorage.getItem('school')==='atguigu'){ //权限控制的具体规则
next()//放行
}else{
alert('暂无权限查看')
}
}else(){
next() //放行
}
})
组件内守卫：
// 进入守卫，通过路由规则，进入该组件时调用
beforeRouterEnter(to,from,next){
},
beforeRouteLeave(to,from,next){
// 离开守卫，通过路由规则，离开该组件时被调用
}
路由器的两种工作模式
-
对于一个url来说，什么是hash值？———#及其后面的内容就是hash值
-
hash值不会包含在HTTP请求中，即：hash值不会带给服务器
-
hash模式：
-
地址中永远带着#号，不美观
-
若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合格
-
兼容性较好
-
-
history模式：
-
地址干净，美观
-
兼容性和hash模式相比略差
-
应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题
-
拉开序幕的setup
1. 理解：Vue3中一个新的配置项，值为一个函数
1. setup是所有`Composition API(组合式API)` “表演的舞台”
-
组件中所用到的：数据、方法、等等，均要配置在setup中
-
lintOnSave:false关闭语法检查 -
setup函数的两种返回值：
1.若返回一个对象，则对象中的属性、方法，在模板中均可以直接使用（重点关注！）
2.若返回一个渲染函数，则可以自定义渲染内容（了解）
5.注意点：
-
尽量不要与vue2配置混用
-
setup不能是一个
async函数，因为返回值不再是return的对象，而是promise，模板看不到return对象中的属性-
Vue2.x配置(data、method、computed….)中可以访问到setup中的属性和方法
-
但在setup中不能访问到Vue.x配置(data、method。computed….)
-
如果有重名，setup优先
-
ref函数
-
作用：定义一个响应式的数据
-
语法：
const xxx = ref(initValue)- 创建一个包含响应式数据的
引用对象(reference对象) - JS中操作数据：
xxx.value - 模板中读取数据：不需要.value，直接：
<div>{{xxx}}</div>
- 创建一个包含响应式数据的
-
备注：
- 接收的数据可以是：基本类型、也可以是对象类型
- 基本类型的数据：响应式依然是靠
Object.defineProperty()的get与set完成的 - 对象类型的数据：内部“求助”了Vue3中的一个新函数——
reactive函数
reactive函数
- 作用：定义一个对象类型的响应式数据(基本类型不要用它，要用
ref函数) - 语法：
const 代理对象 = reactive(源对象)接收一个对象(或数组)，返回一个代理对象(proxy对象) - reactive定义的响应式数据是
"深层次的" - 内部基于
ES6的Proxy实现，通过代理对象操作源对象内部数据进行操作
Vue3中的响应式原理
vue2的响应式
-
实现原理：
-
对象类型：通过
Object.defineProperty()对属性的读取、修改进行拦截(数据劫持) -
数组类型：通过重写更新数组的一系列方法来实现拦截(对数组的变更方法进行了包裹)
Object.defineProperty(data,'count',{ get(){...} set(){...} })
-
-
存在问题：
- 新增属性、删除属性、界面不会更新
- 直接通过下标修改数组，界面不会自动更新
Vue3的响应式
-
实现原理：
-
通过Proxy(代理)：拦截对象中任意属性的变化，包括：属性值的读写、属性的添加、属性的删除
-
通过Reflect(反射)：对被代理对象的属性进行操作
-
new Proxy(data,{ //拦截读取属性 get(target,prop){ return Reflect.get(target,prop) } //拦截设置属性值或添加新属性 set(target,prop,value){ return Reflect.set(targer,prop,value) } //拦截删除属性 deleteProprety(target,prop){ return Reflect.deleteProperty(target,prop) } }) proxy.name = 'tom'
-
reactive对比ref
- 从定义数据角度对比：
- ref用来定义：基本数据类型
- reactive用来定义：对象(或数组)类型数据
- 备注：ref也可以用来定义对象(或数组)类型数据，它内部会自动通过
reactive转为代理对象
- 从原理角度对比：
- ref通过
Object.defineProprety()的get与set来实现响应式(数据劫持) - reactive通过使用
Proxy来实现响应式(数据劫持)，并通过Reflect操作源对象内部的数据
- ref通过
- 从使用角度对比：
- ref定义的数据：操作数据需要
.value，读取数据时模板中直接读取不需要.value - reactive定义的数据：操作数据与读取数据：均不需要
.value
- ref定义的数据：操作数据需要
setup的两个注意点
- setup执行的时机
- 在beforeCreate之前执行一次，this是
undefined
- 在beforeCreate之前执行一次，this是
- setup的参数
- props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性
- context：上下文对象
- attrs：值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性，相当于
this.$attrs - slots：收到的插槽内容，相当于
this.$slots - emit：分发自定义事件的函数，相当于
this.$emit
- attrs：值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性，相当于
计算属性与监视
1. computed函数
-
与Vue2中computed配置功能一致
-
写法：
import {computed} from 'vue' setup(){ ... //简写形式 let fullName = computed(()=>{ return person.firstName + '-' +person.lastName }) //完整形式 let fullName = computed({ get(){ return person.firstName + '-' +person.lastName }, set(value){ const nameArr = value.splist('-') person.firstName = nameArr[0] person.lastName = nameArr[1] } }) }
2.watch函数
-
与Vue2中的watch配置功能一致
-
两个小坑：
- 监视reactive定义的响应式数据时：oldValue无法正确获取、强制开启了深度监视(deep配置失效)
- 监视reactive定义的响应式数据中某个属性时：deep配置有效
//情况一:监视ref定义的响应式数据 watch(sum,(newValue,oldValue)=>{ console.log('sum变化了'，newValue,oldValue) },{immediate:true}) //情况二:监视多个ref定义的响应式数据 watch([sum,msg](newValue,oldValue)=>{ console.log('sum变化了'，newValue,oldValue) }) //情况三:监视reactive定义的响应式数据 若watch监视的是reactive定义的响应式数据，则无法正确获得oldValue 若watch监视的是reactive定义的响应式数据，则强制开启的深度监视 watch(person,(newValue,oldValue)=>{ console.log('person变化了'，newValue,oldValue) },{immediate:true,deep:flase}) //此处的deep配置不再奏效 //情况四:监视reactive定义的响应式数据中的某一个属性 watch(()=>person.job,(newValue,oldValue)=>{ console.log('person的job变化了'，newValue,oldValue) },{immediate:true,deep:true}) //情况五:监视reactive所定义的一个响应式数据中的某些属性 watch([()=>person.name,()=>person.age],(newValue,oldValue)=>{ console.log('person的name或age变化了'，newValue,oldValue) },{immediate:true,deep:true}) //特殊情况 watch(()=>person.job,(newValue,oldValue)=>{ console.log('person的job变化了'，newValue,oldValue) },{deep:true})//此处由于监视是reactive所定义的对象中的某些属性，所以deep配置有效
watchEfffect函数
- watch的套路是：既要指明监视的属性，也要指明监视的回调
- watchEffect的套路是：不用指明监视那个属性，监视的回调中用到那个属性，那就监视那个属性
- watchEffect有点像computed:
- 但computed注重的计算出来的值(回调函数的返回值)，所以必须要写返回值
- 而watchEffect更注重的是过程(回调函数的函数体)，所以不用写返回值
//watchEffect所指向的回调中用到的数据只要发生变化，则直接重新执行回调
watchEffect(()=>{
const x1 = sum.value
const x2 = person.age
console.log('watchEffect配置的回调执行了')
})
生命周期
自定义hook函数
- 什么是hook？——本质是一个函数，把setup函数中使用的Composition API进行了封装
- 类似于vue2中的
mixin - 自定义
hook的优势，复用代码，让setup中的逻辑更清楚易懂
toRef
- 作用：创建一个ref对象，其Value值指向另一个对象中的某个属性值
- 语法：
const name = toRef(person,'name') - 应用：要将响应式对象中的某个属性单独提供给外部使用时
- 扩展：
toRefs与toRef功能一致，但可以批量创建多个ref对象，语法：toRefs(person)
其它Composition API
1.shallowReactive 与 shallowRef
- shallowReactive：只处理对象最外层属性的响应式(浅响应式)
- shallowRef：只处理基本数据类型的响应式，不进行对象的响应式处理
- 什么时候使用？
- 如果有一个对象数据，结构比较深，但变化时只是外层属性变化 ====>shallowReactive
- 如果有一个对象数据，后续功能不会修改该对象中的属性，而是生成新的对象来替换====>shallowRef
2.readonly与shallowReadonly
- readonly：让一个响应式数据变为只读的(深只读)
- shallowReadonly：让一个响应式数据变为只读的(浅只读)
- 语法：
person = readonly(person) - 应用场景：不希望数据被修改时
3.toRaw与markRaw
- toRaw：
- 作用：将一个由
reactive生成的响应式对象转为普通对象 - 使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新
- 作用：将一个由
- markRaw：
- 作用：标记一个对象，使其永远不会成为响应式对象
- 应用场景：
- 有些值不应该被设置为响应式的，例如复杂的第三方类库等
- 当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能
4.customRef
-
作用：创建一个自定义的ref，并对其依赖项跟踪和更新触发进行显式控制
-
实现防抖效果：
<template> <input type = "text" v-model = "keyword"> </template> <script> import {ref,customRef} from 'vue' export default { name: 'Demo', setup(){ // let keyword = ref('hello') //自定义一个myRef function myRef(value,deplay){ let timer //通过customRef去实现自定义 return customRef(()=>{ return { get(){ track()//告诉vue这个value值是需要被追踪的 return value }, set(newValue){ clearTimeout(timer) timer = setTimeout(()=>{ value = newValue trigger() //告诉vue去更新界面 },delay) } } }) } let keyword = myRef('hello'.soo) // 使用程序员自定义的ref } } </script>5.provide与inject
-
作用：实现祖孙组件间通信
-
套路：父组件有一个
provide选项来提供数据，子组件有一个inject选项来开始使用这些数据 -
具体写法：
-
祖组件中
setup(){ ... let car = reactive({name:'奔驰',price:'40万'}) provide('car',car) ... } -
孙组件中
setup(props,context){ ... const car = inject('car') return {car} ... }
-
6.响应式数据的判断
- **isRef：**检查一个值是否为一个ref对象
- isReactive：检查一个对象是否由
reactive创建的响应式代理 - **isReadonly：**检查一个对象是否由
readonly创建的只读代理 - **isProxy：**检查一个对象是否是由
reactive或者readonly方法创建的代理
新组件
1.Fragment
- 在Vue2中：组件必须有一个根标签
- 在Vue3中：组件可以没有根标签，内部会将多个标签包含在Fragment虚拟元素中
- 好处：减少标签层级，减少内存占用
2.Teleport
什么是
Teleport？——Teleport是一种能够将我们的组件html结构移动到指定位置的技术<teleport to = "移动位置"> <div v-if = "isShow" class = "mask"> <div class = "dialog"> <h3>我是一个弹窗</h3> <button @click = "isShow = false">关闭弹窗</button> </div> </div> </teleport>3.Suspense
-
等待异步组件时渲染一些后备内容，获得更好的用户体验
-
等待步骤：
-
异步引入组件
import {defineAsyncComponent} from 'vue' const Child = defineAsyncComponent(()=>import('./components'/Child.vue)) -
使用
Suspense包裹组件，并且配置好default与fallback<template> <div class = "app"> <h3>我是App组件</h3> <Suspense> <template v-slot = default> //骨架屏 <Child/> </template> <template v-slot = "fallback"> <h3>加载中...</h3> </template> </Suspense> </div> </template>
-
其他
1.全局API的转移
-
Vue2.x有许多全局API和配置
-
例如：注册全局组件，注册全局指令等
// Vue.component('MyButton',{ data:()=>({ count = 0 }) }) Vue.directive('focus',{ inserted: el => el.focus() })
-
-
Vue3中对这些API做出了调整：-
将全局的API，即：
Vue.xxx调整到应用实例app上2.x全局API(vue) 3.x实例API(app) Vue.config.xxx app.config.xxx Vue.config.productionTip 移除 Vue.component app.component Vue.directive app.directive Vue.mixin app.mixin Vue.use app.use Vue.prototype app.config.globalProperties
-
2.其他改变
-
data选项应始终被声明为应该函数
-
过度类名的更改
-
Vue2.x写法
.v-enter, .v-leave-to{ opacity:0; } .v-leave, .v-enter-to{ opacity:1; } -
Vue3.x写法
.v-enter-from, .v-leave-to{ opacity:0; } .v-leave-from, .v-enter-to{ opacity:0; }
-
-
移除keyCode作为v-on的修饰符，同时也不再支持
config.keyCodes -
移除
v-on.native修饰符-
父组件中绑定事件
<my-componebt/ v-on:close = "handleComponentEvent" v-on:click = "handleNativeClickEvent" /> -
子组件中绑定事件
<script> export default { emits:['close'] } </script>
-
-
移除过滤器(filter)
过滤器虽然这看起来很方便，但它需要应该自定义语法，打破大括号内表达式是“只是JavaScript”的假设，这不仅有学习成本，而且有实现成本！建议用方法调用或计算属性去天替换过滤器
-
…….
-
扫一扫
1051
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
