1、为什么选择用Vue框架
2、从JS到JQuery
3、JQuery、JQuery和Vue的区别
4、前端(JS)框架(构建用户界面)
5、SPA单页面应用
6、Vue生命周期(Vue实例从创建到销毁的过程)
7、前端架构模式(MVC基础、MVVM细化)
8、数据双向绑定(响应式)原理
9、表单输入绑定——v-model指令
10、v-for和v-if区别、key的作用
11、事件轮询机制(Eventloop)——异步回调实现原理
12、宏任务、微任务
13、条件渲染中v-if和v-show的区别，对性能的影响
14、npm(包管理工具)
15、组件component(自定义标签)
16、父子组件通信
17、单向数据流
18、Vue组件中的样式属性——scoped
19、混入mixin对象——分发Vue组件中的可复用功能
20、Vue-router的两种(路由)模式——hash、history
21、Vue-router——提供路由功能
22、动态路由(会用到路由守卫)
23、Vue-router导航(跳转路由)
24、Vuex——状态管理模式
25、Ajax——前后端数据交互
26、Ajax和Axios的区别、使用场景
27、axios插件()
28、fetch
29、过滤器filter(格式化)函数
30、渲染函数render
31、echarts
components
mixin
filters
directives
v-bind：(不写v-bind，直接写:也行)
绑定一个或多个属性值
需要动态绑定的数据：图片的链接src、网站的链接href、动态绑定一些类、样式
绑定style、class——取值是对象/数组
动态传参：传number、boolean、object、array、变量
静态传参(不加冒号，传字符串)
一、为什么选择用Vue框架
构建用户界面的渐进式js框架，与其他大型框架不同的是Vue被设计为自底向上逐层应用(增量开发)
——在开发过程中按需引入功能，不是必须一次性接受并使用它的全部功能
优点：
1、双向数据绑定，V->M，v-model指令在表单可输入元素上创建双向数据绑定，监听输入事件——>更新数据
2、组件化开发，把单页面应用的各个模块拆分到一个一个单独的组件中，在父级应用中写好各种组件标签、传入参数，再写组件的实现
3、核心库只关注视图层，便于和第三方库或已有项目整合；
不操作dom元素，提高性能，有更多时间思考业务逻辑
4、构建工具：Vue-cli，有模板列表可选，按需创建不同模板，使用起来更灵活
1、双向数据绑定
Vue在MVVM框架中的双向数据绑定通过v-model实现
（在MVVM框架中，View(视图，也就是常说的页面)和Model(数据)不可以直接通讯)
使得视图和数据可以根据一方的改变自身做出相应改变
最直观的就是，在Vue中数据改变，视图无需刷新即可实时改变
而jQuery中数据改变，视图需要用户手动刷新才会改变
2、组件化开发
将页面的功能等需求进行划分成多个模块，可以根据需求增减，同时不影响整个页面的运行
在工作中，有这方面的需求时，可以自己写组件进行重复使用，还可以从网上获取相应组件，也可以对别人封装的组件进行二次封装等等
Vue组件的优势就是组件进行重复使用，便于协同开发，提高开发效率
3、减少dom操作：直接操作DOM元素转变为操作虚拟DOM
jQuery直接操作DOM元素，是使用选择器($)选取DOM对象，
对其进行赋值、取值、事件绑定等操作
每次对元素处理的前提都是先取到元素，DOM操作较多
Vue操作虚拟DOM，是在Vue类下面新建对象模拟DOM元素，
在操作过程中对数据进行处理而不是直接操作DOM元素，
当数据处理完成后，仅仅比较开始和结束状态虚拟DOM有哪些变换，
最终根据结束状态虚拟DOM去操作DOM
虚拟DOM：减少了DOM操作，减少浏览器的渲染引擎的工作量
渲染更快，大大解决了前端性能优化的难题
Vue
new Vue({
el
data:{},
methods:{},
components:{},
钩子函数
})
二、从JS到JQuery
脚本语言 JS库
有浏览器兼容问题 无
实现动画效果复杂 复杂
dom对象 JQuery对象
三、JQuery、JQuery和Vue的区别
JQuery:无浏览器兼容问题，封装了ajax、动画animate
JS库(函数、对象)，对ES，dom(主要封装)和bom的浅封装
事件驱动
相比于JS库，框架的功能更为强大
简化dom操作
数据驱动
四、前端(JS)框架(构建用户界面)
Angular
React
Vue：过滤器、组件、全局注册、局部注册
最大优势：实现了数据的双向绑定，而React的数据流动是单向的
类似，底层事件原理不同
五、SPA单页面应用
六、Vue生命周期(Vue实例从创建到销毁的过程)
在某个时刻会自动执行的函数
前两组一定会执行，即使写的顺序换了，也还是按这个顺序执行
钩子函数中的this默认指向Vue实例
beforeCreate：创建Vue实例前
created：Vue实例创建成功(一般在这里实现数据的异步请求)——可获取dom元素
beforeMount：渲染dom前
mounted：dom渲染完成(加载组件第一次渲染)——可操作dom元素
beforeUpdate：重新渲染前(数据更新等操作控制dom重新渲染)
updated：重新渲染完成
beforeDestroy：销毁之前
destroyed：销毁完成
异步请求为什么在created实现？
Vue请求数据可放在created里和mounted里——因为先执行完钩子函数，才会执行异步函数，但建议放在created里
——因为
1、能更快获取到服务端数据，减少页面loading时间
2、放在created中有助于一致性，因为ssr(服务器端渲染)不支持beforeMount、mounted钩子函数
七、前端架构模式(MVC基础、MVVM细化)
主要目的：实现M(业务模型)和V的分离
1、MVC
controller控制器：确保M变化时，V同步更新
2、MVVM
(通过VM)实现数据的双向绑定
优点：
1.低耦合
M和V分离，V可独立于M变化和修改
使同一个程序可以使用不同的表现形式，比如统计数据可用柱状图、饼图表示，不需要重新编写业务逻辑
2.可重用性
把视图逻辑放在VM里，让很多视图重用这段视图逻辑
3.独立开发
开发人员专注于 业务逻辑和数据开发，设计人员专注于 页面设计
4.可测试
界面素来是比较难于测试的，测试可以针对VM来写
八、数据双向绑定(响应式)原理
实现双向绑定Proxy比defineproperty优劣如何
vue数据双向绑定的缺点
vue3.0为何使用proxy实现双向绑定，有哪些优点
——数据劫持
Vue通过数据劫持 结合 发布者-订阅者模式实现，
利用Proxy或Object.defineProperty生成的Observer劫持对象/对象的属性进行，属性发生变化后通知订阅者
解析器Compile解析模板中指令，收集指令所依赖的方法和数据,等待数据变化然后进行渲染
Watcher属于Observer和Compile桥梁,把接收到的Observer产生的数据变化,
并根据Compile提供的指令进行视图渲染，数据——>视图
——发布者-订阅者模式
数据——>视图：数据劫持——defineProperty()、proxy
视图——>数据：给可输入元素添加change事件
优点：在表单交互较多的场景下，会简化大量业务无关的代码
缺点：1、Vue实例创建后，如果再添加属性，监听不到
不能直接添加一个属性item.qty=1;
使用Vue.set(item,"qty",1);创建一个响应式属性，并触发视图更新
2、Object.defineProperty()无法监听数组变化
检测数组变化：pop();push();shift();unshift();splice();sort();reserve();
可以使用Vue.set(app.myArray,index,newVal);设置数组项
proxy：可直接监听对象而非属性
可直接监听数组变化
有13种拦截方法，不限于 apply、ownKeys、deleteProperty、has等，是Object.defineProperty不具备的
返回一个新对象，可以只操作新的对象达到目的，而Object.defineProperty只能遍历对象属性直接修改
5、Proxy 作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利；
MVVM作为绑定入口，整合了observer、compile、watcher三者
监听者observer监听数据变化
订阅者watcher
Dep消息管理器：储存订阅者和消息的分发，不管是订阅者还是发布者都需要依赖于它
理解：
单向绑定：数据——>视图
Object.defineProperty(obj,'username',{
configurable:true, //是否可配置
enumberable:true, //是否可枚举
getter(){
return 1;
},
setter(参数){
input.value=参数;
}
})
console.log(obj.username);
obj.username='123'; //可修改
V——事件监听——>M：给可输入元素添加change事件
获取input的value值设置给数据模型stu.username
input.onkeyup = function(){
stu.username = this.value
}
九、表单输入绑定——v-model指令
v-model指令在表单可输入元素上创建双向数据绑定，监听输入事件——>更新数据
增加表单绑定能力：修饰符.lazy，.number，.trim
在Vue实例对象data里增加stu对象，v-model="stu.属性名"——把输入的值全放在了stu对象里
会忽略所有初始值，将Vue实例的数据作为数据来源
十、v-for和v-if区别、key的作用
v-for优先级高与v-if，都是先循环，在判断v-if的值
v-for优先执行会创建相应的dom节点，
如果v-if为false会删除这个dom节点
——先创建再删除会造成页面卡顿
给Vue内部的diff算法用，增加性能
唯一标识，避免重复渲染
比用index更好，index对发生变化，还是会发生重复渲染
根据key值判断某个值是否修改，如果修改就重新渲染这一项，否则复用之前的元素
十一、事件轮询机制(Eventloop)——异步回调实现原理
进程：拥有资源和独立运行的最小单位，程序执行时会创建进程，CPU分配资源，加入就绪队列
线程：CPU调度、程序执行的最小单位
各进程间相互独立，同个进程中的线程可共享其中的资源
JS是单线程语言
同步任务放到执行栈中执行
——检查执行栈是否为空
主线程上的同步代码执行完毕，异步任务——>微任务、宏任务——>移动到任务队列里
浏览器线程：js解析线程、GUI渲染线程、promise网络请求线程(微任务)、定时器线程(宏任务)、事件队列
同步任务：主线程执行
异步任务(setTimeout、ajax、dom事件)：必须指定回调函数——dom渲染后触发
微任务(promise async/await)，dom渲染前触发
十二、宏任务、微任务
执行(调用)栈、任务(回调)队列——宏任务队列、微任务队列(先进先出)
宏任务执行完，看有没有微任务，再执行宏任务
宏任务：setTimeout、setInterval、I/O、执行栈中的整段script代码
——看哪个定时器延时少，先执行哪个
微任务：Promise、async await process.nextTick(callback)
new promise((resolve)=>{在当前队列直接执行}).then(在微任务队列中执行)
在执行下一次宏任务前需要执行的任务
十三、条件渲染中v-if和v-show的区别，对性能的影响
隐藏结构时，v-if从dom树中移除
v-show的style里加上display:none，结构依然保留
v-if：当组件中内容只显示或隐藏，不会再次改变显示状态
v-show：当组件某块内容显示隐藏是可变化的
eg：页面中有一个toggle开关按钮，点击按钮来控制某块区域——显示、隐藏
十四、npm(包管理工具)
由三个独立部分组成：网站
注册表：巨大的数据库，保存了每个包(package)的信息
命令行工具cli：通过命令行或终端运行
qs是一个包，通过npm install qs命令进行安装
qs.parse() URL解析成对象
qs.stringify() 对象 URL，以&拼接
JSON.stringify(param)
{"uid":"cs11","pwd":"000000als","username":"cs11","password":"000000als"}
qs.stringify(param)
uid=cs11&pwd=000000als&username=cs11&password=000000als
十五、组件component(自定义标签)
创建组件、注册组件、使用
动态组件：增加组件的复用性
插槽——分发写在组件标签里的内容(到不同插槽)，普通、具名、作用域插槽
内部封装了html、css和js代码，是可复用的Vue实例
组件中没el
props:[]
data(){}
template:`html代码片段`
methods
let component={
data:function(){
return{count:0}
},
template:"<button v-on:click="count++">You clicked me {{ count }} times.</button>"
}
动态组件(component标签+is属性：切换不同组件)：
<component :is="注册的组件名称"></component>
:is 数据模型中的变量
is 注册的组件名称
组件缓存(切回来时用的是缓存组件)，增加组件的复用性
默认组件在切换时会重新创建组件，当前组件要销毁
<keep-alive>
<component v-bind:is="currentTabComponent"></component>
</keep-alive>
插槽和组件的区别
组件：组件声明 {}
组件模板 {template:``}
插槽：插槽声明 {template:`<slot>默认模板</slot>`}
插槽模板：默认模板：可直接访问子组件数据或通过props间接访问父组件数据
自定义模板<my-com>
<template #name>
插槽自定义模板：可直接访问父组件数据，可通过插槽属性间接访问子组件数据(插槽作用域)
</template>
</my-com>
十六、父子组件通信
1、父子组件：props+$emit()
子组件通过props属性接收
子组件.$emit("自定义事件"，"携带值")，父组件监听自定义事件
2、回调函数callback
父组件methods自定义方法 子组件同时有2个属性
子组件props声明2个属性，给按钮绑定"修改"事件
3、$parent+$children
通过this.$parent.message访问值
4、provide+inject
父组件中provide值，在子组件中用inject拿到在父组件中提供的值
5、$attrs+$listeners
父组件的子组件属性里写了
子组件写<GrandChild v-bind="$attrs"/>
孙组件可直接使用{{$attrs.age}}
父组件的子组件定义了一个事件监听器，在子组件中通过$listener获取到
6、ref
ref注册组件实例，通过注册的名字访问到实例上的属性和方法
父组件的子组件里写ref属性，父组件this.$refs.属性值.name/age访问子组件中的方法
兄弟组件通信
父+子1+子2
——都改变
1、props+$emit() 子—>父—>子
父组件data里写name属性，传给子1和子2
子1：$emit方式，父：监听发射的事件
——2个子组件改变了
2、eventBus=new Vue()，在main.js创建这个实例并导出
在子1eventBus.$emit("","");
3、Vuex=new Vuex.Store()
创建store文件夹
index.js文件：Vue.use(Vuex);
const store=new Vuex.store({
state:{
},
mutations:{
}
})
export default store;
在main.js导入实例，并且注入到根Vue实例中
在子1通过$store.state.name访问到Vuex里的值
十七、单向数据流
父级prop更新会向下流动到子组件中，反之不行
修改父组件的msg数据的方式：用vm接收父组件返回值，在控制台修改父组件msg的值
十八、Vue组件中的样式属性——scoped
如果style标签上有scoped属性，就会为该组件的所有标签添加唯一属性data-v-hash
使当前组件内的样式只作用于当前组件内的元素——限制样式的作用范围，不污染其他组件的样式
子组件、父组件有一个有，因为父组件的所有标签会带有唯一属性，而子组件没有
父组件有，子组件没，会给子组件的最外层标签
——虽然可以在全局中通过标签选择器设置样式，但会影响其他组件
同时有，子组件的最外层标签会同时有父子组件的data-v-hash属性
可以在一个组件中同时有scoped和非scoped样式
深度作用选择器：如果希望scoped样式中的一个选择器能够作用的“更深”，例如影响子组件，可使用>>>操作符
sass无法解析>>>，可以替换成::v-deep操作符
通过v-html创建的dom内容不受scoped样式影响，但可通过深度作用选择器设置
十九、混入mixin对象——分发Vue组件中的可复用功能
类似于组件，可全局/局部注册
常用于插件开发，如vue-router，vuex
一个混入对象可以包含任意组件选项
当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项
let mixin={data，钩子函数，methods，原型方法vm.$destroy()};
局部混入：mixins:[mixin];——将mixin对象混入Vue实例中
全局混入：Vue.mixin({})，任何组件都会和当前组件混合
全局、局部注册
使用：{{}}和数据值
{{arr|myfilter}}
<div :title="arr|myfilter"></div>
二十、Vue-router的两种(路由)模式——hash、history
1.(默认形式)在地址栏URL上有#，但不包括在http请求中——页面定位，所以对后端没影响
改变hash不会重新加载页面，所以这也是单页面应用的必备
有项目路径和#
——没有项目路径和#
2.进行刷新操作，会加载到地址栏对应的页面
——一般会404报错(请求时会带上整个链接，刷新是网络请求，没有后端准备时会报错)
3.支持低版本浏览器
——H5新增的API
history运用了浏览器的历史记录栈，之前有back、forward、go方法
之后在html5中新增了history.pushState()和history.replaceState()方法(需要特定浏览器的支持)
提供了对历史记录的修改功能，但浏览器不会马上向后端发送请求
二十一、Vue-router——提供路由功能
——路由守卫：路由切换到一个组件，没有权限不让进入，有权限可以进入组件内部守卫
vue-router路由守卫的理解
路由改变可 动态加载组件，达到单页面程序开发的目的
路由控制组件，路由和组件是对应的
一、下载 cnpm i -D vue-router
二、在router/index.js
引入import Router from 'vue-router'
使用Vue.use(VueRouter)
——有组件
1.定义路由对象数组let routes=[{
path:'/a', //路径
name:"路由名字", //方便后期路由跳转
component:对应组件,
redirect:"",
alias:"重命名"
children:[{},{}], //子路由对象组成的数组
beforeEnter(to,from,next){} //路由守卫
},
{path:'/b',
component:myB
}
];
2.创建路由器对象
let router=new VueRouter({
routes:routes
})
3.注册路由器对象
new Vue({
el:'#app',
router:router,
components:{
'my-a':myA,
'my-b':myB
},
data:{},
methods:{}
})
4.使用
<router-link to="/a">文字</router-link>
<router-link to="/a">文字</router-link>
<router-view>组件动态加载位置</router-view>
二十二、动态路由(会用到路由守卫)
动态组件可复用性高
只在地址栏改变路由，页面没变化——>得监听路由对象变化
created不起作用，只执行一次
只在地址栏改变，页面就改变
watch：在数据变化时 执行异步/开销较大的操作时，使用监听器是最有用的
path:"/a/:id"
监听路由对象变化，变化时获取到参数
1、watch:{
$route(to,from){
this.id=this.$route.params.id
}
}
2、组件内守卫
beforeRouteUpdate(to,from,next){
this.id=to.params.id;
to(路由对象).params.id：动态路由参数
}
二十三、Vue-router导航(跳转路由)
1、<router-link to=" ">创建a标签定义导航链接
2、借助router实例方法
在Vue实例内部，可通过$router访问路由实例，可用this.$router.
1.this.$router..push("路径/对象")向history栈添加一个新的记录
this.$router..push('/a')、({path:"/a"})
this.$router.push({path:'register',query:{plan:'private'}})
this.$router.push({name:'user',params:{userId:'123'}})
path带参只带在query上，name都可以
params参数刷新会消失，query不会消失
2.this.$router.replace(参数)
不在history中加入新的记录——>替换当前的history记录
3.this.$router.go(整数num)
在history记录中向前或者后退多少步，类似window.history.go(n)
二十四、Vuex——状态管理模式
Vuex在Vue项目中的应用
管理组件 共享的状态(数据)——从后台接口获取到的数据
有多个组件都依赖于一个数据来渲染视图
采用集中式存储管理应用的所有组件的状态，
并以相应的规则保证状态以一种可预测的方式发生变化
需求：a组件用b数据，b组件用a数据
把共享数据放到Vuex中，Vuex中有a数据和b数据
组件从Vuex中获取数据
可以直接通过$store.state来调用，通过commit()来修改值；
也可以在create的时候，读取存在state里面的值，在destroyed的时候，写回state；
API、视图层、Vuex——相当于一个仓库，保存公用数据
组件派发任务到actions，触发mutations中的方法，改变state中的数据，组件重新渲染
声明仓库配置对象
创建仓库对象
注册仓库
引入 import Vuex from "vuex"
使用 Vue.use(Vuex)
一、声明仓库配置对象，可设置好几个仓库配置对象
let storeConf={ //状态存储的位置
namespaced:true, //设置命名空间，代表将来可被命名
//状态，和getters中的数据不会冲突
state:{ 保存所有数据，保存数据方法：通过disptach派发给actions，让actions去触发
msg: ,
},
//派生状态，获取到state中的数据，处理再返回
getters:{
msgUpper(state){
return state.msg.upperCase();
}
},
//突变(同步操作) 修改state中数据(仅这一种方式)
mutations:{
changeMsg(state,payload载荷){
state.msg=payload;
}
},
//动作，可发异步请求，提交突变、分发动作
//可能所有和后台相关的都在Vuex的actions里
actions:{
getAll(st仓库对象,payload){
let arr=[];
//state.msg=arr;
//提交突变
st.commit('changeMsg',arr)
//分发动作
st.dispatch('getAll',[]) //死循环
}
} 借此触发mutations中的方法
}
二、创建仓库对象，获取一个store实例对象，注入到Vue实例中
let store=new Vuex.Store({ //放仓库配置对象
modules:{
//storeConf:storeConf
storeConf,
storeConf2
}
})
三、注册仓库
new Vue({ //注册后在Vue实例的模板中可使用仓库中的东西
el:"",
store,
data(){}
})
四、组件内使用Vuex仓库中的内容
this.$store.state
.getters
.commit("突变名",参数)
.dispatch("动作名",参数)
五、组件辅助函数(命名空间(可选),数组/对象)
Vue.mapState()
Vue.mapGetters()
Vue.mapMutations()
Vue.mapActions()
computed:{
...Vue.mapState()
...Vue.mapGetters()
},
methods:{
...Vue.mapMutations()
...Vue.mapActions()
}
应用场景
详细分析Vuex的应用场景
数据和组件分离，分别处理
组件会被销毁
组件基于数据而创建
多对多事件——多处触发，影响多处
二十五、Ajax——前后端数据交互
如何发请求、发url、带参、接受响应
一、原生Ajax：
get 头部不设置，参数转为查询字符串拼接到url上
post发表单，设置头部为表单格式，数据是表单格式数据
发json，设置头部为json格式，数据是json格式数据
let xhr=new XMLHttpRequest();
打开连接：xhr.open("get","url?查询字符串")
post请求，不带参，放在send里
可设置请求头：xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8")
/json
发送请求：xhr.send(qs.stringify(post参数)); 相当于请求体
JSON.stringify(post参数)
监听响应：xhr.onreadystatechange=function(){
if(xhr.readyState==4(已经响应完成)&&xhr.status==200){
//获取响应数据
xhr.responseText
}
}
二、jQuery的ajax(默认发送表单格式数据)
get：头部不设置，参数对象放到data上，jQuery帮转为查询字符串拼接到url上
post：发表单格式，头部不设置，参数对象放到data上，jQuery帮转为表单格式数据放到请求体里
发json格式，头部设置为json，参数对象转为json字符串放到data上，jQuery帮放到请求体里
引入qs.js文件、jQuery.js文件
qs.Qs;
$.ajax({
url:"",
method:"get", //带的就是表单格式数据
post
data:{id=1}, 带js对象(会转成表单格式数据发)
headers:{}
请求头的设置：content-type
'Authorization':'token值',
请求成功和失败的回调函数——后台响应的数据
success(res){}
error(err){}
})
结果：控制台——>网络(重新载入)——>findAllUser?id=1(消息头)
三、axios的ajax(默认发json)
二十六、Ajax和Axios的区别、使用场景
Ajax是一种技术实现，是前端和后端数据交互的桥梁
Axios是一个基于promise的HTTP库，可以用在浏览器和node.js中，对Ajax实现了封装，更容易实现接口调用
JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常不合理
二十七、axios插件()
一个基于promise的http库，可以用在浏览器和node.js中(jQuery仅适用于浏览器)
1.从浏览器中创建XMLHttpRequests
2.从node.js创建http请求
3.支持PromiseAPI
4.拦截请求和响应
5.转换请求数据和响应数据
6.取消请求
7.自动转换json数据
8.客户端支持防御XSRF
axios中的发送字段的参数是data跟params两个
两者的区别在于params是跟请求地址一起发送的，data的作为一个请求体进行发送
params一般适用于get请求
data一般适用于post put 请求
引入
axios({
url:'/getUsers',
method:'get',
responseType:'json', // 默认的
data:{
//'a': 1,
//'b': 2,
}
}).then(function (response) {
console.log(response);
console.log(response.data);
}).catch(function (error) {
console.log(error);
}）
$.ajax({
url:'/getUsers',
type:'get',
dataType:'json',
data: {
//'a':1,
//'b':2,
},
success:function(response){
console.log(response)；
}
})
下载 axios cnpm i -D axios
使用在main.js import axios from 'axios'
创建实例
let instance = axios.create({
baseURL:'',
headers:{
"Auth2":token
}
})
拦截器
instance.interceptors.request.use((config)=>{
if (config.method == 'post' && config.url !== '/user/login') {
// 表单数据
config.data = qs.stringify(config.data);
}
},(err)=>{})
instance.interceptors.response.use((res)=>{
let result = {
...res,
data:res.data.data,
status:res.data.status,
statusText:res.data.message
};
return result;
},(err)=>{})
export default instance;
使用
import axios from './axios.js';
async function test(){
try{
let res = await axios.get('')
}catch(err){
//提示用户什么出错
}
}
请求拦截器和响应拦截器
在请求发送前进行一些操作，例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易
所谓的请求拦截，其实就是先执行要添加的数据，然后再执行ajax
如果把这个添加数据的过程抽出来，就成了所谓的请求拦截器；
请求拦截器的实际应用场景：
在进行权限管理的时候；每个接口都需要携带token;
避免每次都手动拼接token——难道每次我们都需要手动拼接token;
可以用拦截器来使token自动增加
响应拦截器：对响应体的一些处理，通常是数据统一处理等，也常来判断登录失效等
作用：在接收到响应后进行一些操作，例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页。
所谓的响应拦截，就是在请求结果返回后，先不直接导出，而是先对响应码等等进行处理，处理好后再导出给页面，
如果将这个对响应码的处理过程抽出来，就成了所谓的响应拦截器；
二十八、fetch
提供了一个获取资源的接(包括跨域请求）
是ajax的升级版，与XMLHttpRequest一样同样能实现异步请求
fetch和ajax相同都是用来发送请求的，但实现原理并不同
fetch('https://www.haha.com/test.js')
.then((response)=>{
return response.json();//返回的响应是JSON格式的，需要转换数据。
}).then((json)=>{
//do something
})
fetch('test.json')
.then(function(response){
return response.json(); //返回的结果是一个可读流形式，(想要读取的数据)
})
.then(function(data){
console.log(data) //{name: "test", sex: "nan"}
})
简单几行代码就实现一个请求且fetch会自动解析数据，
请求的是json则转换为js对象，
请求的是文本还是返回文本，
取决于调用对应的函数如本文使用了response.json()返回json数据
response.json()返回json
response.text()返回文件
response.blob()返回二进制数据，如图片，视频等等
基于promise实现的
优点：语法简单
可被使用到更多地应用场景中
加强了代码的可维护性
避免回调地狱（Callback Hell）问题
缺点：兼容性问题
二十九、过滤器filter(格式化)函数
为什么用过滤器，不在methods里面直接写函数
1、过滤掉不需要的内容，也可对内容进行加工处理
2、可通过管道符|写多个过滤器{{messa | filter1 | fliter2}}
而写多个函数是很麻烦的，可能会产生很多的对象代理、依赖收集等一大推降低性能的问题
三十、渲染函数render
操作比原来html代码灵活，比模板更接近编译器，效率高
Vue推荐绝大多数情况下用模板创建html
三十一、echarts
一个基于JavaScript的开源可视化图表库
底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表
通俗的理解：是一个JS插件
性能好可流畅运行在PC与移动设备上
兼容主流浏览器
提供很多常用图表【折线图、柱状图、散点图、饼图、K线图】，且可定制（支持自定义）
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
