一年左右工作经验前端面试分享(vue 方向)

ゝ一纸荒年。 2022-12-21 14:58 239阅读 0赞

我上传了一个XMind的脑图(free)给大家， go ahead! [XMinde脑图][XMinde]

--------------------

# HTML #

1.  p标签是块级元素，常理来说，块级元素是可以嵌套块级元素和行内元素的，但是p标签是个特殊，它里面不能嵌套块级元素。
2.  网页中，rem 作为元素尺寸单位时，是相对 文档根节点的 font-size 进行计算的。
3.  块级元素实际占用的宽度与它的 background 属性有关。

--------------------

# CSS #

### CSS盒模型 box-sizing (常问) ###

1.  标准盒模型 content-box  
    width 只等于内容区域，不包括border和padding
2.  怪异(IE)盒模型 border-box  
    width = 内容区宽度 + border + padding

### CSS权重 (常问) ###

!important > 内联样式(1000) > id选择器(100) > class选择器(10) = 伪类选择器(10) = 属性选择器(10) > 元素选择器(1)

内联样式: 写在标签里的style  
id: id = “id-selector”  
class: class = “class-selector”  
伪类: .class-selector:first-child  
属性: a\[href=“https://example.org”\]  
元素： .class-selector > div

### 让一个盒子 居中的方法 (常问) ###

这个光背没有用，自己去codepen写一下！[CodePen][]

1.  flex
2.  position
3.  transform： slateX slateY
4.  margin

### Flex布局 (常问) ###

属于必须知道的知识点吧，当前最流行的布局方式。  
参考：[Flex 布局教程：语法篇 - 阮一峰的网络日志][Flex _ -]

我们平常开发一般用到 `flex: 1` 这个属性  
这个属性由哪3个属性组成，各自的作用是什么？ 可以去了解一下

### CSS的position ###

1.  static 默认值  
    默认值，元素按照正常的文档流排布
2.  relative 相对定位  
    相对于当前文档排布的位置进行一个定位，不会脱离文档流，与absolute不同
3.  absolute 绝对定位  
    相对于一直往上找父亲元素直到找到position的属性值不为static的元素定位，定位以后元素会脱离文档流，影响排布
4.  fixed 固定  
    相对于浏览器视口进行定位
5.  后面还有一些新的暂时不管

### 伪类和伪元素 ###

伪类： 用来选择那些不能够被普通选择器选择的文档之外的元素，比如:hover。

伪元素：创建通常不存在于文档中的元素，比如::before

< 伪类和伪元素的区别，最关键的点在于如果没有伪元素(或伪类)，是否需要添加元素才能达到目的，如果是则是伪元素，反之则是伪类。> 我是用这个来理解区分的

### 使用过css3的什么新属性 ###

border-radius  
box-shadow  
text-shadow  
transition 过渡  
transform  
animate  
flex  
…

### link和@import的区别： ###

1.  link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
2.  link可以加载CSS，Javascript；@import只能加载CSS。
3.  link加载的内容是与页面同时加载；@import需要页面网页完全载入以后加载。

### 什么是文档流 ###

浮动(float)、绝对定位(absolute)、固定定位(fixed)三种方式定位会脱离文档流

块状元素 / 行内块状元素 / 行内元素 在web中的正常排布，从上往下，从左往右的一个排布顺序

### Less/Sass 变量的使用 ###

@width: 10px;
    @height: @width + 10px;
    
    .header {
      width: @width;
      height: @height;
    }

### 可继承元素 和 不可继承元素 ###

参考：[CSS常见可继承属性与不可继承属性\_风从北方来的博客-CSDN博客][CSS_-CSDN]

1.  可继承  
    font 字体系列属性 比如 font-size  
    text 文本系列属性 比如 color  
    元素可见性：visibility  
    光标属性：cursor  
    列表布局属性 / 表格布局属性
2.  不可继承 太多了

--------------------

# JS相关 #

#### **< 前端JS三大问： this / 闭包 / 原型和原形链 >** ####

废话不多说，这三个东西，必须弄懂，不懂就别说自己是前端了退役吧。

#### this相关 (常问) ####

1.  如果一个函数有this，但是它没有被上一级对象所调用，严格模式下 this 指向 undefined， 否则指向window
2.  如果一个函数中有this，这个函数有被上一级所调用，那么它指向的就是调用它的对象。
3.  如果是一个链式的调用，则最内层的this指向最后一个调用他的对象

#### 与this有关 (常问) ####

###### 1.箭头函数 ######

this 绑定的是最近一层非箭头函数的 this

###### 2. this的指向 ######

call / apply / bind 方法

###### 3. new 的过程 ######

var a = new myFunction("Li","Cherry");
    
    new myFunction{
        var obj = {};
        obj.__proto__ = myFunction.prototype;
        var result = myFunction.call(obj,"Li","Cherry");
        return typeof result === 'obj'? result : obj;
    }

1.  创建一个空对象 obj;
2.  将新创建的空对象的隐式原型指向其构造函数的显示原型。
3.  使用 call 改变 this 的指向
4.  如果无返回值或者返回一个非对象值，则将 obj 返回作为新对象；如果返回值是一个新对象的话那么直接直接返回该对象。

#### 闭包 (常问) ####

1.  简单简述一下什么是闭包
2.  简单说一下自己在什么地方用过闭包
3.  其实防抖和节流的原理就是使用到闭包，可以提一嘴，然后一般面试官就会继续问你，什么是防抖和节流，诱导面试官问你这个问题，然后其实你已经准备好了，这波在第几层？

#### 原型和原型链 (常问) ####

原型： 用来存储公用的变量和方法的对象，所有的引用数据类型(数组/对象/函数)的实例都会有一个\_\_proto\_\_的属性，指向自己的原型。注意：原型也是一个对象，它也有自己的\_\_proto\_\_

自己下去补一下课，很重要的东西！JS的继承相关其实也跟这个有关系。太重要了！太重要了！太重要了！重要的事情说三遍

所有的函数 都有 **proto** 和 prototype 属性  
普通的对象 数组 只有 **proto** 属性

--------------------

#### **< 其他的JS知识 >** ####

一般会先问了解使用过ES6的什么新特性，然后就代入问题

#### let 和 var 的区别 (常问) ####

1.  let定义的变量不能重复声明
2.  var 定义的变量重复声明会覆盖之前的值
3.  let定义的变量值在块级作用域内有效
4.  var 定义变量存在声明提前的问题
5.  let 定义的变量不存在声明提前的问题

#### undefined 和 null 的区别 ####

1.  undefined == null // true
2.  undefined === null //false
3.  undefined: 没有定义
4.  null：定义了没有给值
5.  typeof undefined // ‘undefined’
6.  typeof null // ‘object’

#### 判断类型的方式 (常问) ####

typeof / instanceof / Object.prototype.toString.call() 三种方式 口头简述 不举例了这么简单x

**typeof** 可以较好的判断基本数据类型 ， 对引用数据类型的判断不友好，不能区分数组和对象和null，结果都为object。

**instanceof** 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。对引用数据类型判断较好，对基本数据类型的判断不友好。

**Object.prototype.toString.call(\[\])** 最准确的判断方式 好用的一p 自个可以试试

Object.prototype.toString.call() // "[object Undefined]"
    Object.prototype.toString.call('') // "[object String]"
    Object.prototype.toString.call(2) //"[object Number]"
    Object.prototype.toString.call(false) // "[object Boolean]"
    Object.prototype.toString.call(undefined) // "[object Undefined]"
    Object.prototype.toString.call(null) // "[object Null]"
    Object.prototype.toString.call([1,2]) // "[object Array]"
    Object.prototype.toString.call({
        }) // "[object Object]"

--------------------

#### JS的事件机制 (常问) ####

JavaScript 事件触发有三个阶段。  
CAPTURING\_PHASE ，即捕获阶段  
AT\_TARGET ，即目标阶段  
BUBBLING\_PHASE ，即冒泡阶段

addEventListener(‘click’, function()\{\}, false); // 默认为false 冒泡阶段

继续往下问可能会问到 **事件委托**，简述使用场景，好处。其实是性能优化的一种方式

举个例子，手写一个计算器，可以把事件绑定在父亲最外层，点击后通过currentTarget / target 来判断当前点击的元素是哪个，从而编写我处理逻辑。

这里又可以引入另一个问题(层层套哈哈哈，又可以诱导面试官来问你)，  
**currentTarget和target的区别是什么** < 参考文章：[currentTarget和target的区别][currentTarget_target] >

这个文章可以看看哈。简单来说，target就是我们点击的那个元素，currentTarget就是当前冒泡冒到了的那个元素。

--------------------

#### EventLoop JS的事件循环机制 (常问) ####

参考文章： [阮一峰 - EventLoop][- EventLoop]

1.  所有同步任务都在主线程上执行，形成一个 [执行栈][Link 1] （execution context stack）。
2.  主线程之外，还存在一个”任务队列”（task queue）。只要异步任务有了运行结果，就在”任务队列”之中放置一个事件。
3.  一旦”执行栈”中的所有同步任务执行完毕，系统就会读取”任务队列”，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
4.  主线程不断重复上面的第三步。

#### 分支： 谈谈异步的问题 ####

经典的，非常经典的问题题目，笔试题经常出现！

setTimeout(() => {
        
    	console.log(1);
    }, 0);
    
    new Promise((resolve) => {
        
    	console.log(2);
    	resolve();
    	console.log(3);
    }).then(() => {
        
    	console.log(4);
    })
    
    console.log(5);

搞懂它！跟事件循环/微任务 有关。

#### 线程和进程 ####

参考：[从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理][JS_JS]

setTimeout导致往后延了才执行 是为什么呢  
setTimeout和setInterval的运行机制是，将指定的代码移出本次执行，放到任务队列中，等到下一轮Event Loop时，再检查是否到了指定时间。如果到了，就执行对应的代码；如果不到，就等到再下一轮Event Loop时重新判断。这意味着，setTimeout指定的代码，必须等到本次执行的所有代码都执行完，才会执行。Promise的任务也是如此。

**为什么Promise的then操作输出比setTimeout的先执行？**  
promise属于一种微任务，当他的代码执行完以后会推入到本次的事件循环中，而setTimeout要等到下一次的事件循环，所以promise比setTimeout先执行。

再往下衍生，就会开始问promise的问题

--------------------

#### **< Promise 和 async awiat >** (常问) ####

直接看下面的链接看内容，一般牵涉的问题有以下几点。

#### Promise ####

参考文章：[ES6 Promise][]

#### async await ####

参考文章：[async][]

1.对promise的理解  
2.简述一下平常怎么使用，使用场景  
3.回调地狱  
4.这两者的区别是什么 promise 和 async await

#### 回调函数 ####

参考：[深入理解 JavaScript 回调函数][JavaScript]  
按照 MDN 的描述：回调函数是作为参数传给另一个函数的函数，然后通过在外部函数内部调用该回调函数以完成某种操作。

当多个异步函数一个接一个地执行时，会产生回调地狱。  
如何解决？1. 使用promise 2.借助 async-await

*  async/await: 回调地狱的终极解决方案

async function request () {
        try {
            const result = await doSomething()
            const newResult = await doSomethingElse(result)
            const finalResult = await doThirdThing(newResult)
            console.log('Got the final result: ' + finalResult)
        } catch (error) {
            failureCallback(error)
        }
    }

--------------------

### Cookie 、LocalStorage和SessionStorage的区别 (常问) ###

这篇文章可以看一看 讲解了所有数据存储的方式 [JS数据存储][JS]

一、Cookie

1.  cookie 的存放数据大小 为4K左右。 一般由服务器生成，可设置失效时间。
2.  如果在浏览器端生成Cookie，默认是关闭浏览器后失效。
3.  cookie因为保存在客户端中，其中包含的任何数据都可以被他人访问，cookie安全性比较低。
4.  与服务器通信时，每次都会携带在HTTP头中。
5.  cookie需要在客户端和服务器端之间来回传送，会浪费不必要的资源如果过多会带来性能问题。

二、localStorage

1.  localStorage的大小一般为5MB，保存在本地，除非被清除，否则永久保存。
2.  仅在客户端中保存，不参与和服务器的通信。
3.  是以key/value的形式进行存储，value值只能存储字符串。如果想要存储对象，可以用JSON.stringify()进行转换为字符串，取值的时候再使用JSON.parse()解析。

// 存储的两种方式
    localStorage.setItem("isConfirm", "true");
    localStorage.isConfirm= "true";
    
    // 读取
    localStorage.getItem("isConfirm");
    localStorage.isConfirm;

三、sessionStorage

1.  一般为5MB，仅在当前会话下有效，关闭页面或浏览器后被清除。
2.  仅在客户端（即浏览器）中保存，不参与和服务器的通信。
3.  存储在sessionStorage中的数据可以跨越页面刷新而存在。
4.  受到同源策略限制，若想在不同页面之间对同一个sessionStorage进行操作，这些页面必须在同一协议、同一主机名和同一端口下。
5.  是以key/value的形式进行存储，value值只能存储字符串

// 存储的两种方式
    sessionStorage.setItem("isConfirm", "true");
    sessionStorage.isConfirm= "true";
    
    // 读取
    sessionStorage.getItem("isConfirm");
    sessionStorage.isConfirm;

--------------------

#### 如何解决跨域问题 (常问) ####

这个自己去搜吧哈哈，之前没怎么记录这个问题，倒是挺常问的

--------------------

# Vue相关 #

(了解更多看我另一篇文章) < [写给自己的Vue知识][Vue] >

#### 简述vue双向绑定的原理 (常问) ####

1.  数据劫持
2.  构建模板
3.  发布订阅模式

#### Vue的生命周期 及 每个阶段做了什么事情 (常问) ####

官方的vue生命周期图，来自[vue生命周期图][vue]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvblRpbnlCbGFjaw_size_16_color_FFFFFF_t_70]

// vue生命周期
    beforeCreate
    created
    beforeMount
    mounted
    updated
    beforeUpdate
    updated
    beforeDestroy
    destroyed
    // 使用了keep-alive 后存在这两个生命周期
    activated
    deactivated

beforeCreate的时候，数据/事件还未初始化，无法访问到数据和真实到dom。

beforeCreated —> created 这一段时间内，进行初始化事件和数据。

created的时候，数据和事件已经初始化了，在这个阶段可以对数据进行更改，在这里更改数据不会触发updated函数。

created —> beforeMounted 这一段时间内，会先判断vue内有没有el这个元素，如果有则继续往下执行，如果没有则停止编译，直到在该vue实例上调用vm.$mount(el)。

然后会进行判断，在vue对象中有没有定义template，如果有的话则使用定义的template作为模版，如果没有则定义使用vue的el属性绑定的dom区域作为模版。

beforeMount —> mounted 这一段时间内，开始编译模板 (下面一个板块Vue的编译过程)，挂载$el。替换真实节点。

mounted —> 挂载完成，模板中的html渲染到了页面中，mounted只会执行一次。这个时候页面的事件和数据都已经挂载了，真实dom也渲染好了。在这一步可以执行DOM操作。

在vue的对象中，当data的值发生改变时就会先调用beforeUpdate函数。

beforeUpdate --> updated vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染。渲染完以后就会执行updated钩子函数。

beforeDestroy钩子函数在实例销毁之前调用。在这一步，实例仍然完全可用。  
destroyed钩子函数在Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

--------------------

#### vif 和 vshow的区别 回流和重绘 (常问) ####

这是我自己唧唧歪歪的，献丑了

v-if：添加了vif的标签，类似于给标签定义了display 的css属性，当值为true时正常显示，当值为false就类似diaplay: none。它带来的影响就是会影响到当前的文档流排布，该dom元素会被隐藏不会被渲染，它不占据空间。如果是定义在组件标签上，vif的值在true和false来回切换时，相当于是重渲染，是会执行该组件的正常生命周期函数的。因为影响到了文档流排布，会引起了回流的现象。

v-show：添加了vshow的标签，类似于给标签定义了visibility 的css属性，当值为true时正常显示，当值为false就类似visilibity: hidden。设置了该值的区域会隐藏起来，但是它还会占据原本的空间，不影响文档流的排布。就只是单纯的“看不见”。当值在true和false来回切换时，是不会执行该组件的正常生命周期函数的。但是会触发重绘的现象。

当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。  
当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。

--------------------

#### Vue的组件通信方式 (常问) ####

参考： [Vue组件通信][Vue 1]

一、父子间通信 props / $emit (太常见了不举例了)

父亲组件通过将值传递给子组件，子组件在props中定义并接住父组件传递的值。

子组件通过调用$emit传递一个名称和值，在父亲组件中用@名称的形式定义一个方法，并在方法中接住子组件传递过来的值

二、通过 $parent / $children

父组件

<template>
    	<div>
    		<sonComponent :msg="msg" />
    		<button @click="updateSonValue">点击我修改子组件的sonValue值</button>
    	</div>
    </template>
    <script>
    import sonComponent from './sonComponent.vue';
    export default {
          
    	name: 'FatherComponent',
    	components: {
           sonComponent },
    	data() {
          
    		return {
          
    			msg: '我来自父亲组件'
    		}
    	},
    	methods: {
          
    		updateSonValue() {
          
    			this.$children[0].sonValue = '子组件的值被父组件修改拉！'
    		}
    	}
    }
    </script>

子组件

<template>
    	<div>
    		<span>{
       {msg}}</span>
    		<button @click="onClick()">点击修改父组件的值!</button>
    	</div>
    </template>
    <script>
    export default {
          
    	name: 'sonComponent',
    	props: ['msg']
    	data() {
          
    		return {
          
    			sonValue: '我来自子组件'
    		}
    	},
    	methods: {
          
    		onClick() {
          
    			this.$parent.msg = '父组件的值被子组件修改了！';
    		}
    	}
    }
    </script>

三、provide / inject  
可以用于父子组件，隔代组件之间的通信

父组件

<template>
    	<div>
    		<sonComponent :msg="msg" />
    	</div>
    </template>
    <script>
    import sonComponent from './sonComponent.vue';
    export default {
          
    	components: {
           sonComponent },
    	data() {
          
    		return {
          
    			msg: '我来自父亲组件'
    		}
    	},
    	provide: {
          
    		aaprovide: "aaprovide"
    	}
    }
    </script>

子组件或者孙子组件

<template>
    	<div>
    		<span>{
       {provide}}</span>
    	</div>
    </template>
    <script>
    export default {
          
    	data() {
          
    		return {
          
    			provide: this.aaprovide
    		}
    	},
    	inject: ['aaprovide']
    }
    </script>

四、EventBus （参考自标题文章）  
eventBus 又称为事件总线，在vue中可以使用它来作为沟通桥梁的概念, 就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件， 所以组件都可以通知其他组件。eventBus也有不方便之处, 当项目较大,就容易造成难以维护的灾难

// event-bus.js
    import Vue from 'vue'
    export const EventBus = new Vue()

// 需要在组件中先引入EventBus
    import {
        EventBus} from './event-bus.js'
    
    // 在代码中调用即可
    EventBus.$emit('addition', {
        
    	num: 5 // 可以传入当前组件的变量
    })
    
    // 响应
    EventBus.$on('addition', param => {
        
    	this.count = this.count + param.num;
    })
    
    // 移除该事件
    EventBus.$off('addition', {
        })

五、Vuex  
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。分为五个模块：

state类似与vue的data，用于数据的存储。  
getter类似与computed，计算属性。基于state数据的二次包装，常用于数据的筛选和多个数据的相关性计算。  
mutation中定义了同步的方法，通过它来修改state，是修改state数据的唯一途径。  
action中定义了异步的方法，一般用于请求，可以通过调用mutation来修改state。  
modules用于项目中将各个模块的状态分开定义和操作，便于维护。

将需要进行通信的数据存储在store中，需要数据的组件通过连接store获取state的值即可实现组件间的通信。该方式可实现全部组件的通信。

六、localStorage / sessionStorage  
该方法是最常见的组件通信方法之一了。在不同的组件，跨页面都可以进行通信的一种方式。

// 存储的两种方式
    localStorage.setItem("isConfirm", "true");
    localStorage.isConfirm= "true";
    
    // 读取
    localStorage.getItem("isConfirm");
    localStorage.isConfirm;

七、$attrs / $listeners（参考自标题文章）

<template>
    	<div>
    		<child-com1
    			:name="name"
    			:age="age"
    			:gender="gender"
    			title="程序员成长指北"
    		></child-com1>
    	</div>
    </template>
    <script>
    const childCom1 = () => import("./childCom1.vue");
    export default {
          
    	components: {
           childCom1 },
    	data() {
          
    		return {
          
    			name: "zhang",
    			age: "18",
    			gender: "女"
    		};
    	}
    };
    </script>

// childCom1.vue
    <template class="border">
    	<div>
    		<p>name: {
       { name}}</p>
    		<p>childCom1的$attrs: {
       { $attrs }}</p>
    		<child-com2 v-bind="$attrs"></child-com2>
    	</div>
    </template>
    <script>
    const childCom2 = () => import("./childCom2.vue");
    export default {
          
    	components: {
          
    		childCom2
    	},
    	inheritAttrs: false, // 可以关闭自动挂载到组件根元素上的没有在props声明的属性
    	props: {
          
    		name: String // name作为props属性绑定
    	},
    	created() {
          
    		console.log(this.$attrs);
    		// { "age": "18", "gender": "女", "height": "158", "title": "程序员成长指北" }
    	}
    };
    </script>

// childCom2.vue
    <template>
    	<div class="border">
    		<p>age: {
       { age}}</p>
    		<p>childCom2: {
       { $attrs }}</p>
    	</div>
    </template>
    <script>
    
    export default {
          
    	inheritAttrs: false,
    	props: {
          
    		age: String
    	},
    	created() {
          
    		console.log(this.$attrs); 
    		// { "gender": "女", "height": "158", "title": "程序员成长指北" }
    	}
    };
    </script>

--------------------

#### computed 和 watch 的区别 (常问) ####

computed是计算属性，需要依赖一个数据，基于data中声明过或者父组件传递的props中的数据通过计算得到的值，当依赖当数据发生改变时，会重新进行计算得到新值。是不支持异步的。如果computed的属性值是函数，那么默认会调用get方法，函数的返回值就是属性值。

watch是一个监听函数，如下，watch是支持异步的。当他监听的属性发生改变时则会调用这个监听方法handler，该监听方法接收两个参数，一个值属性改变后的值，一个是修改前的值。还可以为该监听方法定义两个属性，deep和immediate。immediate为true时，则组件一加载就立即触发handler函数的执行。deep为true时，进行深度监听，为了发现对象内部值的变化，复杂类型的数据时使用。

watch: {
        
    	cityName: {
        
    		handler(newName, oldName) {
        },
    		deep: true,
    		immediate: true
    	}
    }

--------------------

#### Vue 自定义指令 ####

有没有了解过… 是怎样的等等

--------------------

#### 前端性能优化的方式 (常问) ####

我的另一篇文章写了 < [前端性能优化][Link 2] >

--------------------

# 下面的是不怎么常问的但也问过的东西 #

#### Webpack ####

参考官网： [webpack][]

--------------------

# 网略通信 #

#### HTTP 超文本传输协议 ####

[HTTP 超文本传输协议][HTTP]

#### GET 和 POST 的区别 ####

参考：[HTTP 方法：GET 对比 POST][HTTP _GET _ POST]

1.  get 的参数信息都是写在url里的，敏感信息不能使用get方法，  
    post 的参数信息是写在request body 里的，相对于get较安全
2.  get 对参数的数据长度有限制，post没有
3.  get 的参数会被保存在浏览器的历史中(就是因为携带在url中)，post不会
4.  get 请求参数只允许 ASCII 字符，post没有限制
5.  页面刷新或后退 post请求的数据会被重新提交，get不会

W3C的解释：  
GET 请求可被缓存  
GET 请求保留在浏览器历史记录中  
GET 请求可被收藏为书签  
GET 请求不应在处理敏感数据时使用  
GET 请求有长度限制  
GET 请求只应当用于取回数据

POST 请求不会被缓存  
POST 请求不会保留在浏览器历史记录中  
POST 不能被收藏为书签  
POST 请求对数据长度没有要求

--------------------

#### 同源策略 ####

--------------------

#### Github的使用 ####

[XMinde]: https://download.csdn.net/download/GonTinyBlack/20542548
[CodePen]: https://codepen.io/
[Flex _ -]: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
[CSS_-CSDN]: https://blog.csdn.net/beifangdefengchuilai/article/details/82431288
[currentTarget_target]: https://www.jianshu.com/p/1dd668ccc97a
[- EventLoop]: https://www.ruanyifeng.com/blog/2014/10/event-loop.html
[Link 1]: http://www.ruanyifeng.com/blog/2013/11/stack.html
[JS_JS]: https://segmentfault.com/a/1190000012925872
[ES6 Promise]: https://es6.ruanyifeng.com/#docs/promise
[async]: https://es6.ruanyifeng.com/#docs/async
[JavaScript]: https://juejin.im/post/6844903987771097102
[JS]: https://www.cnblogs.com/sylvia-Camellia/p/11589569.html
[Vue]: https://blog.csdn.net/GonTinyBlack/article/details/114296538
[vue]: https://cn.vuejs.org/v2/guide/instance.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dvblRpbnlCbGFjaw_size_16_color_FFFFFF_t_70]: /images/20221120/c982deadc33c4bcbb5cb5b43c3d07f1c.png
[Vue 1]: https://www.jb51.net/article/167304.htm
[Link 2]: https://blog.csdn.net/GonTinyBlack/article/details/118738092
[webpack]: https://webpack.docschina.org/concepts/
[HTTP]: https://developer.mozilla.org/zh-CN/docs/Web/HTTP
[HTTP _GET _ POST]: https://www.w3school.com.cn/tags/html_ref_httpmethods.asp