一名前端小白的学习笔记(1/N)--vue（渐进式javascript框架）
分类:
文章
•
2023-10-12 23:22:19
- vue
- 渐进式
- 声明式渲染->组件系统->客户端路由->集中式状态管理->项目构建
- 库
- 小而美，对一些常用方法进行了封装
- 形成了一个新方法进行使用
- 框架
- 大而全，不仅提供了路由操作，还提供可数据的统一管理，同时还提供了创建项目结构目录的库
- vue技术栈
- vue、vue-router、vuex、vue-cli、axios
- vue实例参数
- vue插值表达式
- vue编译过程
- 前端渲染
- 模板与数据结合，填充到HTML标签中，生成静态html的过程
- js原生--拼接字符串
- jquery模板字符串
- vue提供的模板字符串
- vue指令
- Mustache”语法 (双大括号)
- 模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。你不应该在模板表达式中试图访问用户定义的全局变量
- 动态参数
- 本质就是自定义属性
- 格式:v-开始
- v-cloak
- 不需要表达式
- CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕
- aim
- 解决插值表达式存在的闪动问题(先显示{{}},再显示数据)
- v-text
- 更新元素的 textContent。如果要更新部分的 textContent ，需要使用 {{ Mustache }} 插值。
- 并不会显示大括号、
- v-html
- 更新元素的 innerHTML 。
- 注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译 。如果试图使用 v-html 组合模板，可以重新考虑是否通过使用组件来替代
- 在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上
- v-pre
- 双向数据绑定
- v-model
- Views（视图层） <=>data(数据层)
- MVVM（前端的一种设计思想，将网站开发进行分层，每层之间不影响，方便软件的迭代和后期的维护）
- M model
- V view
- VM view-model视图逻辑层
- 数据响应式
- 数据绑定
- v-once
- 只编译一次
- 显示内容之不再具有响应式功能
- 应用场景
- v-on(缩写:@)（监听 DOM 事件）
- 好处
- 扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
- 因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。
- 当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们。
- <标签名 v-on:click="doSomething">...</标签名>
- 绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。
- 用在普通元素上时，只能监听原生 DOM 事件，用在自定义元素组件上时，也可以监听子组件触发的自定义事件。
- 从 2.4.0 开始，v-on 同样支持不带参数绑定一个事件/监听器键值对的对象。注意当使用对象语法时，是不支持任何修饰器的。
- 如果使用内联语句
- <button v-on:click="counter += 1">Add 1</button>
- 如果使用方法名（不传参），以事件为唯一参数
- <button v-on:click="doThis"></button>
- 如果使用方法名（传参），以事件为最后参数，且参数为$event
- 语句可以访问一个 $event 属性(作为最后一个参数)：v-on:click="handle('ok', $event)"。
- <button v-on:click="doThat('hello', $event)"></button>
- v-bind
- <标签名 v-bind:href="url">...</标签名>
- 在这里 href 是参数，告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定
- 修饰符（修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定）
- 原因：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节
- 使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生
- 事件修饰符
- .stop - 调用 event.stopPropagation()。
- .prevent - 调用 event.preventDefault()。
- .capture - 添加事件侦听器时使用 capture 模式。
- .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
- .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
- .native - 监听组件根元素的原生事件。
- .once - 只触发一次回调。
- .left - (2.2.0) 只当点击鼠标左键时触发。
- .right - (2.2.0) 只当点击鼠标右键时触发。
- .middle - (2.2.0) 只当点击鼠标中键时触发。
- .passive - (2.3.0) 以 { passive: true } 模式添加侦听器（告诉浏览器你不想阻止事件的默认行为）
- 按键修饰符
- .enter
- .tab
- .delete (捕获“删除”和“退格”键)
- .esc
- .space
- .up
- .down
- .left
- .right
- 自定义按键修饰符别名
- Vue.config.keyCodes.自定义别名= 键值
- 系统修饰符
- .ctrl
- .alt
- .shift
- .meta
- .exact
- 鼠标按钮修饰符
- v-model（本质上不过是语法糖）
- 在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定
- 负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理
- v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值
- text 和 textarea 元素使用 value 属性和 input 事件
- checkbox 和 radio 使用 checked 属性和 change 事件
- select 字段将 value 作为 prop 并将 change 作为事件
- 当需要在输入法组合文字过程进行更新，使用input事件
- 修饰符
- .lazy转化为使用change事件进行同步
- .number自动将用户的输入值转化成数值类型
- .trim自动过滤用户输入的首尾空白字符
- class与style绑定
- class
- 对象
- v-bind:class 指令也可以与普通的 class 属性共存（普通在最后）
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>data: { isActive: true, hasError: false}当 isActive 或者 hasError 变化时，class 列表将相应地更新
- 绑定的数据对象不必内联定义在模板
<div v-bind:class="classObject"></div>data: { classObject: { active: true, 'text-danger': false }}
- 在这里绑定一个返回对象的计算属性
<div v-bind:class="classObject"></div>data: { isActive: true, error: null},computed: { classObject: function () { return { active: this.isActive && !this.error, 'text-danger': this.error && this.error.type === 'fatal' } }}
- 数组
- 基本
<div v-bind:class="[activeClass, errorClass]"></div>data: { activeClass: 'active', errorClass: 'text-danger'}
- 根据条件切换列表中的 class，可以用三元表达式
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
- 数组语法中也可以使用对象语法
<div v-bind:class="[{ active: isActive }, errorClass]"></div>
- style
- 对象
- CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>data: { activeColor: 'red', fontSize: 30}
- 直接绑定到一个样式对象通常更好，这会让模板更清晰
<div v-bind:style="styleObject"></div>data: { styleObject: { color: 'red', fontSize: '13px' }}
- 数组
- v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上
<div v-bind:style="[baseStyles, overridingStyles]"></div>
- 自动添加前缀
- 当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀
- 多重值
- 条件渲染·
- v-if
- v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
- v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别
- v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用
- v-show
- v-if与v-show区别
- v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
- v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
- 相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
- 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好
- 列表渲染
- 数组
- v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名
- 在 v-for 块中，我们可以访问所有父作用域的属性。v-for 还支持一个可选的第二个参数，即当前项的索引
- 也可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法
- 不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值
- Vue 将被侦听的数组的变异方法进行了包裹，所以它们也将会触发视图更新
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
- 由于 JavaScript 的限制，Vue 不能检测以下数组的变动：
- 当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
- 当你修改数组的长度时，例如：vm.items.length = newLength
- 对象
- 提供第二个的参数为 property 名称 (也就是键名)
- 用第三个参数作为索引
- 遍历对象时，会按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下都一致
- key
- 要为每项提供一个唯一 key 属性
- 当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染
- 只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出
- v-if和v-for使用
- 不推荐在同一元素上使用 v-if 和 v-for
- 当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你只想为部分项渲染节点时，这种优先级的机制会十分有用
- 数组更新检测
- 变异方法
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
- 替换数组
- filter()
- concat()
- slice()
- 它们不会改变原始数组，而总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组
- 由于 JavaScript 的限制，Vue 不能检测以下数组的变动：
- 当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
- 处理方法
- Vue.set(vm.items, indexOfItem, newValue)
- // Array.prototype.splice
- vm.items.splice(indexOfItem, 1, newValue)
- vm.$set(vm.items, indexOfItem, newValue)
- 当你修改数组的长度时，例如：vm.items.length = newLength
- 解决方法
- vm.items.splice(newLength)
- 计算属性和监听器
- computed属性（计算属性）
- 为什么需要计算属性
- 模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护
- 将冗余的代码进行提取，提取到计算属性中
- 计算属性和方法
- 计算属性是基于它们的响应式依赖进行缓存的
- 只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
- 每当触发重新渲染时，调用方法将总会再次执行函数
- 不希望有缓存，请用方法来替代
- 计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter
- watched属性(监听属性)
- 通过 watch 选项（data同级）提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的
- 使用 watch 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。
- 除了 watch 选项之外，您还可以使用命令式的 vm.$watch API
- 回调函数第一个参数是更新之后的值第二个值是更新之前的值
- 过滤器
- Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。
- 过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。
- 过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示（|）
- 自定义指令
- 全局指令
// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时……//inserted钩子函数 inserted: function (el) { // 聚焦元素 el.focus() }})
- 局部指令
directives: { focus: { // 指令的定义 inserted: function (el) { el.focus() } }}
- 一个指令定义对象可以提供如下几个钩子函数 (均为可选)：
- bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
- inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
- update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
- 指令钩子函数会被传入以下参数：
- el：指令所绑定的元素，可以用来直接操作 DOM 。
- binding：一个对象，包含以下属性：
- name：指令名，不包括 v- 前缀。
- value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
- oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
- expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
- arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
- modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
- vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
- oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
- 组件基础
- 组件是可复用的 Vue 实例，且带有一个名字(可以扩展HTML元素，封装可重用的代码)
- 在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用
- 可以将组件进行任意次数的复用，每用一次组件，就会有一个它的新实例被创建
- 代码优势(代码解耦和并行开发)
- 规范--web Component
- 核心思想:通过自定义元素进行包装UI和复用
- 组件注册
- 全局注册
- Vue.component('组件名称', { }) 第1个参数是标签名称，第2个参数是一个选项对象(data)
// 定义一个名为 button-counter 的新组件Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'})<div id="components-demo"> <button-counter></button-counter></div>new Vue({ el: '#components-demo' })
- data 必须是一个函数
- 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：因为data中返回的是一个对象所以每个组件中的数据是私有的
- 单个根元素(组件模板必须是根元素)
- 尽量使prop对象接收单独的对象，对对象的属性进行添加
- 组件名称!!!
- 使用kebab-case
- 定义组件时使用，引用自定义元素也必须使用Kebab-case
- 使用PascalCase
- 定义组件·时使用，应用自定义元素时都可以使用，单直接在DOM（即非字符串模板中使用只有Kebab-case有效）
- 局部注册
- 只能在当前注册它的Vue实例中使用
- 可以通过一个普通的 JavaScript 对象来定义组件
var ComponentA = { /* ... */ }var ComponentB = { /* ... */ }var ComponentC = { /* ... */ }
- 然后在 components 选项中定义你想要使用的组件
new Vue({ el: '#app', components: { 'component-a': ComponentA, 'component-b': ComponentB }})
- 对于 components 对象中的每个属性来说，其属性名就是自定义元素的名字，其属性值就是这个组件的选项对象
- 如果你希望 ComponentA 在 ComponentB 中可用
var ComponentA = { /* ... */ }var ComponentB = { components: { 'component-a': ComponentA }, // ...}
- 父元素通过Prop向子组件传递数据（父组件发送的形式是以属性的形式绑定值到子组件身上）
- Prop大小写
- 当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名
- 如果你使用字符串模板，那么这个限制就不存在
- 单项数据流
- 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解
- 可以用一个 props 选项将其包含在该组件可接受的 prop 列表
Vue.component('blog-post', {// props: ['title', 'likes', 'isPublished', 'commentIds', 'author'], title: String, likes: Number, isPublished: Boolean, commentIds: Array, author: Object, callback: Function, contactsPromise: Promise // or any other constructortemplate: '<h3>{{ title }}</h3>'})
- 静态传值
<blog-post title="My journey with Vue"></blog-post>
- 可以使用 v-bind 来动态传递 prop
<!-- 动态赋予一个变量的值 --><blog-post v-bind:title="post.title"></blog-post><!-- 动态赋予一个复杂表达式的值 --><blog-post v-bind:title="post.title + ' by ' + post.author.name"></blog-post>
- 传入数字
<!-- 即便 `42` 是静态的，我们仍然需要 `v-bind` 来告诉 Vue --><!-- 这是一个 JavaScript 表达式而不是一个字符串。--><blog-post v-bind:likes="42"></blog-post><!-- 用一个变量进行动态赋值。-->
- 传入一个布尔值
<!-- 包含该 prop 没有值的情况在内，都意味着 `true`。--><blog-post is-published></blog-post><!-- 即便 `false` 是静态的，我们仍然需要 `v-bind` 来告诉 Vue --><!-- 这是一个 JavaScript 表达式而不是一个字符串。--><blog-post v-bind:is-published="false"></blog-post><!-- 用一个变量进行动态赋值。-->
- 传入一个数组
<!-- 即便数组是静态的，我们仍然需要 `v-bind` 来告诉 Vue --><!-- 这是一个 JavaScript 表达式而不是一个字符串。--><blog-post v-bind:comment-ids="[234, 266, 273]"></blog-post><!-- 用一个变量进行动态赋值。-->
- 传入一个对象
<!-- 即便对象是静态的，我们仍然需要 `v-bind` 来告诉 Vue --><!-- 这是一个 JavaScript 表达式而不是一个字符串。--><blog-post v-bind:author="{ name: 'Veronica', company: 'Veridian Dynamics' }"></blog-post><!-- 用一个变量进行动态赋值。-->
- 传入一个对象的所有属性直接将对象绑定，也就将内部进行了绑定
- 子组件向父组件传值
- $emit(event,args)，$emit有2个参数，第一个参数event是自定义响应的事件，args可以理解为传递给父组件的内容。
- 监听子组件事件
- 父级组件可以像处理 native DOM 事件一样通过 v-on 监听子组件实例的任意事件
- 同时子组件可以通过调用内建的 $emit 方法 并传入事件名称来触发一个事件
- 使用事件抛出一个值
- 可以使用 $emit 的第二个参数来提供这个值
- 当在父级组件监听这个事件的时候，我们可以通过 $event 访问到被抛出的这个值
- 如果这个事件处理函数是一个方法
- 兄弟之间传值
- 兄弟之间传递数据需要借助于事件中心，通过事件中心传递数据
- 提供事件中心 var hub = new Vue()
- 传递数据方，通过一个事件触发hub.$emit(方法名，传递的数据)
- 接收数据方，通过mounted(){} 钩子中 触发hub.$on(方法名,function(传递的数据){})
- 销毁事件 通过hub.$off()方法名销毁之后无法进行传递数据
- 生命周期
- 创建
- beforeCreate
- created
- beforeMount
- mounted
- 运行
- 销毁
- 组件插槽（组件的最大特性就是复用性，而用好插槽能大大提高组件的可复用能力）
- <slot> 元素作为承载分发内容的出口
- 后备内容
- 匿名插槽（一个不带name的<slot>出口会带有隐含的名字default）
- 任何没有被包裹在带有v-slot的<template>中的内容会被视为默认插槽的内容（也可以在一个v-slot中包裹默认插槽的内容）
- 具名插槽
- <slot> 元素有一个特殊的特性：name
- 在向具名插槽提供内容的时候，我们可以在一个 <template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称
- v-slot 只能添加在一个 <template> 上
- 作用域插槽
- 父组件对子组件加工处理
- 既可以复用子组件的slot，又可以使slot内容不一致
- 父元素和子元素都可以提供形式和内容，但是父元素有，就把子元素总内容和形式替换掉
- 为了让 父元素中的内容 在父级的插槽内容中可用，我们可以将 父元素的内容 作为 <slot> 元素的一个特性绑定上去：使用V-bind
- 绑定在 <slot> 元素上的特性被称为插槽 prop。现在在父级作用域中，我们可以给 v-slot（缩写#） 带一个值来定义我们提供的插槽 prop 的名字
<template v-slot:default="slotProps">{{slotProps.info.name}} </template> <slot :info="item"></slot>
- axios
- promise
- 主要是为了了解决异步深层嵌套的问题(回调地狱)
var promise = new Promise(function(resolve,reject) {setTimeout(()=>{var flag=1if(flag){resolve('成功吧')}else{ reject('error')}},2000)})promise.then(function(data) {console.log(data)},function(err){ console.log(err)})
- 基本API
- then
- then中可以定义两个（一成功、一失败）或者一个
- 成功函数返回的值由下一个then获取并进行处理
- catch
- finally
- 静态方法
- .all
- 接收一个数组
- 数组中对象均为promise实例
- 如果不是一个promise，该项会被用Promise.resolve转换为一个promise
- .race
- 接收一个数组
- 当p1, p2, p3中有一个实例的状态发生改变（变为fulfilled或rejected），p的状态就跟着改变。并把第一个改变状态的promise的返回值，传给p的回调函数
- 剩余丢弃
- fetch
- 返回一个promise对象
- 是一种新的前后台信息就会解决方案
- fetch(url, options).then(）
- fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象
- HTTP协议，它给我们提供了很多的方法，如POST，GET，DELETE，UPDATE，PATCH和PUT
- 默认的是 GET 请求
- 需要在 options 对象中 指定对应的 method
- post 和 put请求的时候 需要在options 中 设置 请求头 headers 和 body
- 'Content-Type':'applicaiton/x-www-form-urlencoded'（表单提交）
- 'Content-Type':'applicaiton/json'
- body使用json.stringIfy转换成json字符串
- fetch(url,options).then(fucntion(data) {
//return data.json()return data.text()}).then(funciton(data){//对数据进行处理})
- 优点
- 基于promise用于浏览器和node.js的http客户端
- 支持浏览器和node.js
- 支持promise
- 能拦截请求和响应
- 自动转换JSON数据
- 能转换请求和响应数据
- get和 delete请求传递参数
- 通过传统的url 以 ? 的形式传递参数
- restful 形式传递参数
- 通过params 形式传递参数
- post 和 put 请求传递参数
- 通过选项传递参数
- 通过 URLSearchParams 传递参数
- 全局配置
- axios.defaults.baseURL
- axios.defaults.timeout
- axios.defaults.header
- 拦截器
- 请求拦截器
- 请求拦截器的作用是在请求发送前进行一些操作
- 例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易
# 1. 请求拦截器 axios.interceptors.request.use(function(config) { console.log(config.url) # 1.1 任何请求都会经过这一步 在发送请求之前做些什么 config.headers.mytoken = 'nihao'; # 1.2 这里一定要return 否则配置不成功 return config; }, function(err){ #1.3 对请求错误做点什么 console.log(err) })
- 响应拦截器
- 响应拦截器的作用是在接收到响应后进行一些操作
- 例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页
#2. 响应拦截器 axios.interceptors.response.use(function(res) { #2.1 在接收响应做些什么 var data = res.data; return data; }, function(err){ #2.2 对响应错误做点什么 console.log(err) })
- async和await
- async作为一个关键字放到函数前面
- 任何一个async函数都会隐式返回一个promise
- await关键字只能在使用async定义的函数中使用
- await后面可以直接跟一个 Promise实例对象
- await函数不能单独使用
- vue Router
