Vue2+Vue3基础知识总结
Vue3新特性
setup()
新的配置项，值为一个函数，用于配置组件中所用到的所有数据、方法。若返回一个对象，则对象中的属性、方法在模板中均可以直接使用；若返回一个渲染函数，则可以自定义渲染内容（了解）。
注意：不建议和vue2的配置项混用；setup不能是一个async函数。
setup执行的时机：在beforeCreate之前执行一次，this是undefined。
setup的参数：props 值为对象，包含组件外部传递过来，且组件内部声明接收了的属性。
context：上下文对象；attr值为对象，包含租金按外部传递过来，但没有在props配置中声明的属性，相当于this.$attrs。slots收到的插槽内容，相当于this.$slots。emit分发自定义事件的函数，相当于this.$emit。
ref函数
作用：定义一个响应式数据的引用对象（reference对象，简称ref对象）
语法：
定义数据：const xxx = ref(initValue) js中操作数据 ：xxx.value 模板中读取数据：
注意：接收的数据可以是基本类型也可以是对象类型；基本类型数据的响应式靠Object.defineProperty()的get与set实现；对象类型数据的响应式使用到了vue3中的reactive函数。
reactive函数
作用：定义一个对象类型的响应式数据（基本类型应该使用ref函数）
语法: const 代理对象 = reactive(源对象) 接受一个对象（或数组），返回一个代理对象（proxy对象）
特点：reactive定义的响应式数据是深层次的，内部基于ES6的Proxy实现，通过代理对象操作源对象数据。
计算属性与监视
computed函数
与vue2中computed配置功能一致
写法
import {computed} from 'vue'
setup() {
...
// 1）计算属性——简写
let fullName = computed(() = {
return person.firstName + '-' + person.lastName
})
// 2）计算属性——完整
let fullName = computed(() => {
get() {
return person.firstName + '-' + person.lastName
},
set(value) {
const nameArr = value.split('-')
person.firstName = nameArr[0]
person.lastName = nameArr[1]
}
})
}
watch函数
与vue2中watch配置功能一致
注意 1）监视reactive定义的响应式数据时：oldValue无法正确获取、强制开启了深度监视（deep配置失效）
2）监视reactive定义的响应式数据中某个属性时：deep配置有效
// 情况一：监视ref定义的响应式数据
watch(sum, (newValue, oldValue) => {
console.log('sum变化了', newValue,oldValue)
}, {immediate:true})
// 情况二：监视多个ref定义的响应式数据
watch([sum, msg], (newValue, oldValue) => {
console.log('sum或msg变化了', newValue,oldValue)
})
/* 情况三：监视reactive定义的响应式数据
若watch监视的是reactive定义的响应式数据，则无法正确获得oldValue
若watch监视的是reactive定义的响应式数据，则强制开启了深度监视（deep属性无效）
*/
watch(person,(newValue,olaValue) => {
console.log('person变化了',newValue, oldValue)
},{immediate:true, deep:false}) // 此处的deep配置不再奏效
// 情况四：监视reactive定义的响应式数据中的某个属性
watch(() =>person.job,(newValue,oldValue) => {
console.log('person的job变化了',newValue,oldValue)
}， {immediate:true,deep:true})
// 情况五：监视reactive所定义的一个响应式数据中的某些属性
watch([()=> person.name, ()=>person.value],(newValue,oldValue)=> {
console.log('person的name或age变化了',newValue,oldValue)
})
// 特殊情况
watch(()=>person.job, (newValue, oldValue) =>{
console.log('person的job变化了',newValue,oldValue)
}, {deep:true}) // 此处由于监视的是reactive所定义的对象中的某个属性，所以deep配置有效
watchEffect函数
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中的minxin，自定义hook的优势：复用代码，让setup中的逻辑更清楚易懂。
toRef
作用：创建一个ref对象，其value值指向另一个对象中的某个属性。语法：const name = toRef(person, 'name') 应用：要将响应式对象中的某个属性单独提供给外部使用时。toRefs与toRef功能一致，但可以批量创建多个ref对象，语法：toRefs(person)
shallowReactive与shallowRef
shallowReactive只处理对象最外层属性的响应式（浅响应式）。shallowRef只处理基本数据类型的响应式，不进行对象的响应式处理。如果有一个对象数据，结构比较深，但变化时只是外层属性变化，则考虑使用shallowReactive；如果有一个对象数据，后续功能不会修改该对象中的属性，而是生成新的对象来替换，考虑使用shallowRef。
readonly与shallowReadonly readonly：让一个响应式数据变为只读的（深只读）。shallowReadonly：让一个响应式数据变为只读的（浅只读）。应用场景：不希望数据被修改时。
toRaw与markRaw
toRaw作用：将一个由reactive生成的响应式对象转为普通对象。使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作不会引起页面更新。
markRaw作用：标记一个对象，使其永远不会再成为响应式对象。应用场景：有些值不应被设置为响应式的，例如复杂的第三方类库等；当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能。
customRef：创建一个自定义的ref，并对其依赖项跟踪和更新触发进行显式控制。
provide与inject
作用：实现祖孙组件间通信，父组件有一个provide选项来提供数据，后代组件有一个inject选项来开始使用这些数据。
isRef：检查一个值是否为一个ref对象
isReactive：检查一个对象是否是由reactive创建的响应式代理
isReadonly：检查一个对象是否是由readonly创建的只读代理
isProxy：检查一个对象是否是由reactive或者readonly方法创建的代理
Vue基础
01 Vue是什么？
Vue：一套用于构建用户界面的渐进式JavaScript框架
Vue的特点：
1.采用组件化模式，提高代码复用率，且让代码更好维护
2.声明式编码，让编程人员无需直接操作DOM，提高开发效率
3.使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点
02 Vue实例的作用范围：
Vue会管理el选项命中的元素及其内部的后代元素
-
el：用来设置Vue实例挂载的元素
el的两种写法：
（1）new Vue 时配置el属性
（2）先创建Vue实例，随后再通过vm.$mount("#root")指定el的值
el的写法规范：
（1）可以使用其他选择器，建议使用ID选择器
（2）可以使用其他双标签，不能使用HTML和BODY -
data：数据对象，Vue中用到的数据定义在data中
data中可以写复杂类型的数据，渲染复杂类型的数据时，遵守js的语法即可。
data的两种写法：
（1）对象式：
data:{
name:""
}
（2）函数式：
data:function(){ //此处的this是Vue实例对象
return{
name:""}
}
注：组件运用时必须使用函数式。
由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不是Vue实例了
1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象{el,data...}
2.容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法
3.容器里的代码被称为Vue模板
4.Vue实例与挂载容器一一对应
5.真实开发中只有一个Vue实例，并且会配合着组件一起使用
6.一旦数据发生改变，那么页面中用到该数据的地方也会自动更新
03 Vue模板语法
Vue模板语法有2大类：
1.插值语法：
功能：用于解析标签体内容
写法：{{xxx}} xxx是s表达式，xxx可以直接读取到data中的所有属性
2.指令语法:
功能：用于解析标签（标签属性，标签体内容，绑定事件…）
04 Vue数据绑定
Vue中有两种绑定的方式：
1.单向绑定(v-bind):数据只能从data流向页面
2.双向绑定(v-model): 数据不仅能从data流向页面，还可以从页面流向data
备注：v-model:value 简写为v-model，因为默认收集value值
05 MVVM模型
1.M: 模型(Model):data中的数据
2.V：视图(View):模板代码
3.VM:视图模型(ViewModel)：Vue实例
data中所有的属性最后都出现在了VM身上
VM身上所有的属性及Vue原型上所有的属性，在Vue模板中都可以直接使用
06 数据代理
（1）数据代理
运用Object.defineProperty(操作对象，“属性名”，{配置项})方法
数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）
（2）Vue中的数据代理：
通过vm对象来代理data对象中属性的操作（读/写）
好处：更加方便操作data中的数据
基本原理：
通过Object.defineProperty()把data对象中所有属性添加到vm上，为每一个添加到vm上的属性都指定一个getter/setter，
在getter/setter内部去操作data中对应的属性
07 事件处理
1.使用v-on绑定事件
2.事件的回调需要配置在methods对象中，最终会在vm上
3.methods中配置的函数都是Vue所管理的函数，this的指向是vm或组件实例对象
4.@click="demo($event)"可以实现传参
Vue中常用的事件修饰符：
prevent：阻止默认事件
stop：阻止事件冒泡
once：事件只触发一次
Vue常用的按键别名：
回车 =>enter
删除 =>delete（捕获“删除”和“退格”键）
退出 =>esc
空格 =>space
换行 =>tab(配合keydown使用)
上 =>up （下左右以此类推）
08 计算属性（computed）
1.定义：要用的属性不存在，要通过已有属性计算得来
2.原理：底层借助了Object.defineproperty方法提供的getter和setter
3.getter函数什么时候执行？
（1）初次读取时会执行一次
（2）当依赖的数据发生变化时会被再次调用
4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便
5.备注：
计算属性最终会出现在vm上，直接读取使用即可
如果计算属性要被修改，那么必须写set函数去响应修改，且set中要引起计算时依赖的数据发生变化。
只有考虑读取不考虑修改的情况下才可以使用计算属性的简写方式
computed:{
// 计算属性靠返回值决定,所以一定要加上return！！！
fullName(){
return this.fullName = this.firstName + "-" +this.lastName
}
},
10 监视属性
1.当被监视的属性变化时，回调函数自动调用，进行相关操作
2.监视的属性必须存在，才能进行监视
3.监视的两种写法：
（1）new Vue时传入watch配置
（2）通过Vm.$watch监视
4.深度监视：
（1）Vue中的watch默认不监测对象内部值的改变（一层）
（2）配置deep:true可以监测对象内部值的改变（多层）
5.备注：
Vue本身可以监测对象内部值的改变，但Vue提供的watch默认不可以，使用watch时根据数据的具体结构，决定是否采用深度检测。
watch里面的handler()什么时候调用？当监测对象发生改变时
immediate:true 初始化时让handler调用一下
deep:true 深度监测
没有下面两个属性时可以简写
computed和watch之间的区别
1.computed能完成的功能，watch都可以完成
2.watch能完成的功能，computed不一定能完成。例如：watch可以进行异步操作。
注意：
所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数、promise的回调函数等），最好写成箭头函数，这样this的指向才是vm或组件实例对象。
11 绑定样式
1.class样式：
//（1）字符串写法：适用于样式的类名不确定，需要动态指定。
<class="basic" :class="mood">
data数值 mood= "normal" 调用changeMood()
//（2）数组写法：适用于要绑定的样式个数不确定、名字也不确定。
<:class="classArr">
data数值 classArr["样式1"，"样式2"， "样式3"]
//（3）对象写法：适用于要绑定的样式个数确定、名字也确定，但要动态决定用不用
<:class="classObj">
data数值 classObj:{样式1：false, 样式2: false}
//注：样式键名一定要是css文件里定义过的
2.style样式（了解）：
// （1）对象写法：
<:style="styleObj">
data数值 styleObj:{样式1："", 样式2: ""}
//（2）数组写法：
<:style="styleArr">
data数值 styleArr:[{样式1:"",样式2:""},{styleObj2}],
//注：样式键名一定是符合js语法的，数组里面为样式对象
12 条件渲染
1.v-if/v-else-if/v-else
适用于：切换频率较低的场景
特点：不展示的DOM元素直接被移除
注意：v-if可以和v-else-if、v-else一起使用，但要求结构不能被“打断”
2.v-show
适用于：切换频率较高的场景
特点：不展示的DOM元素的样式被隐藏
注：使用template时只能与v-if连用
13 列表渲染
v-for指令
1.用于展示列表数据
2.语法：v-for="(item, index) in xxx" :key="yyy"
3.可遍历：数组（常用）、对象、字符串、指定次数
key的作用和原理
面试题：标题react、vue中的key有什么作用？（key的内部原理）
1.虚拟DOM中key的作用：
key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据新数据生成新的虚拟DOM，随后Vue进行新虚拟DOM与旧虚拟DOM的差异比较，比较规则如下：
2.对比规则：
（1）旧虚拟DOM中找到了与新虚拟DOM相同的key：
a.若虚拟DOM中内容没变，直接使用之前的真实DOM
b.若虚拟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监视数据的原理
1.Vue会监视data中所有层次的数据。
2.如何监测对象中的数据？
通过setter实现监视，且要在new Vue时就传入要监测的数据。
（1）对象中后追加的属性，Vue默认不做响应式处理。
（2）如需给后添加的属性做响应式，请使用如下API：
Vue.set(target, propertyName/index, value)
//或
vm.$set(target, propertyName/index, value)
3.如何监测数组中的数据？
通过包裹数组更新元素的方法实现，本质就是做了两件事：
（1）调用原生对应的方法对数组进行更新
（2）重新解析模板，进而更新页面
4.在Vue中修改数组中的某个元素一定要用如下方法：
（1）使用这些API：push()、pop()、shift()、unshift()、
splice()、sort()、reverse()
（2）Vue.set()或vm.$set()
// 注意：Vue.set()或vm.$set()不能给vm或vm的根数据对象添加属性
14 收集表单数据
若：<input type="text"/>，则v=model收集的是value值，即用户输入的值
若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值
若：<input type="checkbox"/>，
（1）没有配置input的value属性，那么收集的就是checked（布尔值）
（2）配置input的value属性：
a.v-model的初始值是非数组，那么收集的就是checked
b.v-model的初始值是数组，那么手机的就是value组成的数组
***************************************************************
//备注：v-model的三个修饰符：
lazy：失去焦点再收集数据
number：输入字符串转为有效的数字
trim：输入首尾空格过滤
15 过滤器
定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）
语法：1.注册过滤器：Vue.filter(name,callback)
或
new Vue(filter:{})
2.使用过滤器:{{xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"
******************************************
// 备注：
（1）过滤器也可以接收额外参数，多个过滤器也可以串联
（2）并没有改变原本的数据，是产生新的对应的数据。
16 内置指令
通过Vue实现常见的网页效果
Vue指令：以v-开头的一组特殊语法
1 内容绑定，事件绑定：v-text， v-html， v-on基础 >>计时器
2 显示切换，属性绑定：v-show，v-if，v-bind >>图片切换
3 列表循环，表单元素绑定：v-for， v-on补充， v-model >>记事本
v-text指令的作用是：设置标签的文本值
默认写法会替换全部的内容，使用差值表达式 {{}} 可以替换指定内容
内部支持写表达式
v-html：设置标签的innerHTML
内容中有html结构会被解析为标签
v-text指令无论内容是什么只会解析为文本
与插值语法的区别：
（1）v-html会替换掉节点中所有的内容，{{xxx}}则不会
（2）v-html可以识别html结构
注意：v-html有安全性问题
（1）在网站上动态渲染任意html是非常危险的，容易导致xss攻击
（2）一定要在可信度内容上使用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.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。
v-on：为元素绑定事件
指令可简写为@
绑定的方法定义在methods属性中
方法内部通过this关键字可以访问定义在data中的数据
补充：
事件绑定的方法写成函数调用的形式，可以传入自定义参数
定义方法时需要定义形参来接受传入的实参
事件的后面跟上 .修饰符 可以对事件进行限制
.enter 可以限制触发的按键为回车
事件修饰符有多种
v-show：根据真假切换元素的显示状态
原理是修改元素的display 实现显示隐藏
指令后面的内容，最终都会解析为布尔值
值为true元素显示，值为false元素隐藏
数据改变之后，对应元素的显示状态会同步更新
v-if：根据表达值的真假，切换元素的显示和隐藏（不是样式，而是操纵dom元素）
本质上是通过操纵dom元素来切换显示状态
表达式的值为true，元素存在于dom树中，为false，从dom树中移除
频繁的切换 v-show，反之使用v-if，前者的切换消耗小
v-bind：为元素绑定属性（如src title class）
v-bind:属性名= 表达式
简写为 ：
需要动态的增删class建议使用对象的方式
v-for：根据数据生成列表结构
数组经常和v-for结合使用
语法是(item, index) in 数据
item代表每一项，index索引
数据：data中对应的数据
item和index可以结合其他指令一起使用
数组长度的更新会同步到页面上，是响应式的。
v-model：获取和设置表单元素的值（双向数据绑定）
绑定的数据会和表单元素值相关联
绑定的数据 <==>表单元素的值
只能应用在表单类元素（输入类元素）上
17 自定义指令
1.定义语法
（1）局部指令：
new Vue({
directives:{指令名：配置对象}
})
或
new Vue({
directives{指令名：回调函数}
})
（2）全局指令：
Vue.directive(指令名，配置对象)
或
Vue.directive(指令名，回调函数)
***************************************
<!-- 需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍
需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点
-->
directives:{
big(element,binding) {
element.innerText = binding.value * 10
},
fbind:{
// 指令和元素成功绑定时
bind(element,binding) {
element.value = binding.value;
},
// 指令所在元素被插入页面时
inserted(element,binding) {
element.focus();
},
// 指令所在的模板被重新解析时
update(element,binding) {
element.value = binding.value;
// element.focus();
}
}
}
2.配置对象中常用的3个回调：
（1）bind：指令与元素成功绑定时调用
（2）inserted：指令所在元素被插入页面时调用
（3）update：指令所在模板结构被重新解析时调用
3.备注：
（1）指令定义时不加v-，但使用时要加v-；
（2）指令名如果是多个单词，要使用kebab-case命名方式，不要使用cameCase命名。
18 生命周期
又名：生命周期回调函数、生命周期函数、生命周期钩子
是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数
生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的
生命周期函数中的this指向是 vm 或 组件实例对象
常用的生命周期钩子：
（1）mounted：发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】
（2）beforeDestroy：清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】
关于销毁Vue实例：
（1）销毁后借助Vue开发者工具看不到任何信息
（2）销毁后自定义事件会失效，但原生DOM事件依然有效
（3）一般不会在beforeDestroy操作数据，因为即使操作数据，也不会再触发更新流程了。
19 组件
- 非单文件组件
组件：实现应用中局部功能代码和资源的集合
Vue中使用组件的三大步骤：
（1）定义组件（创建组件）
（2）注册组件
（3）使用组件（写组件标签）
1.如何定义一个组件？
使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别：
（1）el不要写，为什么？
最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器
（2）data必须写成函数，为什么？
避免组件被复用时，数据存在引用关系
备注：使用template可以配置组件结构
2.如何注册组件？
（1）局部注册：靠new Vue的时候传入components选项
（2）全局注册：靠Vue.component("组件名",组件)
3.编写组件标签
// 第一步：创建school组件
const school = Vue.extend({
// 组件一定不要写el配置项，因为最终所有的组件都要被vm所管理，由vm决定服务于哪个容器
template:`
...
`,
data() {
return {
...
}
},
methods: {
...
}
},
})
// 第二步：全局注册组件
Vue.component("hello",hello)
new Vue({
el:"#root",
...
// 第二步：注册组件（局部注册）
components:{
school,
student
},
})
<!-- 第三步：编写组件标签 -->
<school></school>
*****************************************************
几个注意点：
1.关于组件名：
一个单词组成：
第一种写法（首字母小写）：school
第二种写法（首字母大写）：School
多个单词组成：
第一种写法（kebab-case命名）：my-school
第二种写法（CamelCase命名）：MySchool（需要Vue脚手架支持）
备注：
（1）组件名尽可能回避HTML中已有的元素名称，例如h2,H2都不行。
（2）可以使用name配置项指定组件在开发者工具中呈现的名字。
2.关于组件标签：
第一种写法：<school></school>
第二种写法：<school/>
备注：不使用脚手架时，<school/>会导致后续组件不能渲染。
3.一个简写方式：
const school = Vue.extend(options) 可简写为：const school = options
关于VueComponent
1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。
2.我们只需要写new VueComponent(options)。
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。
一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype
为什么要有这个关系：让组件实例对象（vc）可以访问到Vue原型上的属性、方法
Vue的网络应用：axios+vue
axios：网络请求库
axios原理
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
axios特性：
- 从浏览器中创建 XMLHttpRequests
- 从 node.js创建 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换JSON 数据
- 客户端支持防御 XSRF
axios的使用
安装axios：npm install axios -save
// main.js:
// 1.axios的基本使用
import axios from "axios"
// 请求方式一： axios(config)
// 传入config对象
axios({
// 默认发送get请求
url:"...",
params: {
type:"pop",
page:1
},
// method:"get"
}).then(res => {
console.log(res);
})
********************************
// 请求方式二：axios.get(url[,config])
axios.get(地址?查询字符串).then(funtion(response){}, function(err){})
查询字符串拼接：key=value&key2=value2
axios.post(地址，参数对象).then
(function(response){},function(err){})
参数对象：{key:value,key2:value2}
**********************************************
key:由接口文档提供
value：具体传输的数据
axios必须先导入才可以使用
使用get或post方法即可以发送对应的请求
then方法中的回调函数会在请求成功或失败时触发
通过回调函数的形参可以获取响应内容，或错误信息
注意事项：
- axios回调函数中的this指向已经改变，无法访问到data中数据。需要额外将this保存一份，回调函数中直接使用保存的this即可
- 网络应用和本地应用最大的区别就是改变了数据来源
- 页面的逻辑代码建议和页面分离，使用单独的js文件编写
- 服务器返回的数据比较复杂时，获取的时候需要注意层级结构
- 自定义参数可以让代码的复用性更高
- 通过审查元素快速定位到需要操纵的元素
- 响应式数据都需要在data中定义
有时候，我们可能需要同时发送两个请求：使用axios.all，可以放入多个请求的数组；axios.all([ ])返回的结果是一个数组，使用 axios.spread可将数组[res1,res2]展开为res1，res2
// 2.axios发送并发请求：多个请求到达后代码才可继续向下执行
axios.all([axios(), axios()])
.then(axios.spread((res1,res2) => {
...
}))
axios的请求和响应拦截器
- 请求拦截器
在请求发送前进行必要操作处理，例如添加统一cookie、请求体加验证、设置请求头等，相当于是对每个接口里相同操作的一个封装； - 响应拦截器
同理，响应拦截器也是如此功能，只是在请求得到响应之后，对响应体的一些处理，通常是数据统一处理等，也常来判断登录失效等。
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
如果你想在稍后移除拦截器，可以这样：
var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);
axios的全局配置
在开发中很多参数都是固定的，这个时候我们可以利用axios的全局配置抽取公共的部分
axios.defaults.baseURL = "..."
axios.defaults.timeout = 5000
axios的封装
在实际开发中，为了应对后续请求配置的变化，应当避免使用全局的axios和对应的配置进行网络请求，对axios进行封装，创建对应的axios实例，便于后期维护。
// 对axios的封装：src/network/request.js:
import axios from "axios"
export function request(config) {
// 1.创建axios的实例
const instance = axios.create({
baseURL:"...",
timeout:5000
})
// 发送真正的网络请求 原理：instance本身就是promise
return instance(config)
}
***************************************************
// 实例的使用： main.js:
//封装request模块
import {request} from "./network/request";
request({
url:"..."
}).then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})
官方文档
vue-cli
01 render函数
关于不同版本的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函数去指定具体内容
02 ref属性
1.被用来给元素或子组件注册引用信息（id的替代者）
2.应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
3.使用方式：
打标识：......
获取：this.$refs.xxx
03 配置项props
功能：让组件接收外部传过来的数据（父子关系）
（1）传递数据：
<Demo name="xxx"/>
（2）接收数据：
第一种方式（只接收）：
props:["name"]
第二种方式（限制类型）：
propos: {
name:String
}
第三种方式（限制类型、限制必要性、指定默认值）：
props :{
name: {
type:String,
required:true,
default:"yyy"}
}
备注：props是只读的，Vue底层会检测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。
04 mixin（混入）
功能：可以把多个组件共用的配置提取成一个混入对象
使用方式：
第一步定义混合，例如：
//minxin.js:
export const mixin = {
data(){...},
methods: {
showName() {
...
}
},
}
***********************************
第二步使用混合，例如：
import {mixin} from "../mixin"
（1）全局混入：Vue.mixin(mixin)
（2）局部混入：mixins:[mixin]
05 插件
功能：用于增强Vue
本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。
定义插件：
对象.install = function(Vue,options) {配置项...}
使用插件：Vue.use()
06 scoped样式
作用：让样式在局部生效，防止冲突。
写法：