目錄：

三十一.? css實現(xiàn)垂直水平居中

三十二. SCSS或者LESS他們與普通的CSS有什么區(qū)別?

三十三. 請寫出你知道的css的選擇符類型。

三十四. 簡述同步和異步的區(qū)別

三十五. Promise使用方式

三十六.如何把類數(shù)組轉(zhuǎn)換為標準數(shù)組

三十七. 事件種類有哪幾種

三十八. 請寫出三個以上的jquery選擇器

三十九.了解過各種框架中的路由嗎?你對路由如何理解的？請簡單概述一下

四十. 實現(xiàn)對象淺拷貝

四十一. 使用你學(xué)習過的框架或者庫發(fā)出HTTP請求

四十二. ES6模塊和COMMONJS模塊(nodejs)的區(qū)別

四十三. ES6的繼承

四十四. 創(chuàng)建一個函數(shù)，返回0-100之間的隨機數(shù)

四十五. 判斷對象是否是空對象

四十六. 寫一個函數(shù)使用Promise將request方法封裝成異步調(diào)用的形式，request方法傳參說明如下：

四十七. 常見的瀏覽器端跨域通訊方法有哪些

四十八. 常見前端優(yōu)化方案

四十九. split,splice,join的作用

五十. 單向數(shù)據(jù)流和雙向綁定的區(qū)別

五十一. new RegExp（‘正則表達式’）和/正則表達式/(字面量寫法)的區(qū)別

五十二. TCP連接過程中，三次握手和四次揮手的理解

五十三. jquery和vue的區(qū)別

五十四. 簡述一下在項目中在自己開發(fā)的組件，解決了什么問題，如何實現(xiàn)

五十五. 行內(nèi)元素和塊級元素的區(qū)別，行內(nèi)塊級元素的兼容性如何使用？

五十六. 前后端分離的概念

五十七. 前后端數(shù)據(jù)交互

五十八. 簡述一下vuex和作用

五十九. vue路由中的動態(tài)路由

六十. 什么是git

六十一. axios跨域解決方案

三十一.??css實現(xiàn)垂直水平居中

???思路一:text-align?+?line-height實現(xiàn)單行文本水平垂直居中

???思路二: text-align +?vertical-align

???思路三；設(shè)置margin:0?auto

?

三十二. SASS或者LESS他們與普通的CSS有什么區(qū)別?

?

???? Sass?和 Less 都是 CSS 擴展，目的都是使 CSS 更方便、更強大。它們的區(qū)別：

?

? ? ? ? 1. Sass 更強大，Less 更簡單。

?

? ? ? ? 2. 編譯環(huán)境不同，Sass 安裝時需要?Ruby?環(huán)境，Sass 是在服務(wù)端處理的；而 Less 需要引入 Less.js 來處理 Less 代碼輸出css 到瀏覽器。

?

? ? ? ? 3. 變量符不一樣，Sass 是 $，Less 是 @。

?

1.?Sass 允許使用條件語句，例如 if { } else { }， for { } 等，而 Less 不允許。

?

sass

ruby

三十三. 請寫出你知道的css的選擇符類型。

1、標簽選擇符：

如p{color:#F00; font-size:36px;}，使用<p>直接作用</p>

?2、類選擇符：

如 .red{color:#C00;}，使用<p class=‘?red‘>直接作用</p>

3、ID選擇符：

???如 #two{color:#600; font-family:'漢儀行楷簡';}，使用<p id="two">直接作用</p>

4、包含選擇符：

???如 p strong{color:#F00;}，使用<p><strong>直接作用</strong></p>

?5、通配選擇符：

????如 *{color:#0C0;?font-size:18px;}，可以控制所有的html元素，作用范圍很廣，但是效率較低

6、分組選擇符（選擇符分組）：

???如p,h1,div{color:#F00;font-size:36px;}，對p,h1,div都有效

7、標簽指定式選擇符：

???如p#one{ color:#F00;font-size:36px;}，只對id為one的p標簽有效

8、組合選擇符：

???將所有選擇符類型組合使用

font

color

#0C0

?

三十四. 簡述同步和異步的區(qū)別

同步：按照一定的順序去執(zhí)行，執(zhí)行完一個才能執(zhí)行下一個

異步：執(zhí)行順序是不確定的，由觸發(fā)條件決定，什么時間執(zhí)行也是不確定的

?

三十五. Promise使用方式

?var p = new Promise(function(resolve,reject){

? ? ? //做一些異步操作

? ? ??setTimeout(function(){

? ? ? ? ? console.log("執(zhí)行完成");

? ? ? ? ? resolve("隨便什么數(shù)據(jù)");? ? ?//執(zhí)行成功的回調(diào)

// ?reject("數(shù)據(jù)"); ?? ?//失敗回調(diào)

? ? ? }, 2000);

??});

?

三十六.如何把類數(shù)組轉(zhuǎn)換為標準數(shù)組

【1、Array.prototype.slice.call

這種方法是借用了數(shù)組原型中的slice方法，返回一個數(shù)組。slice方法的內(nèi)部實現(xiàn):

Array.prototype.slice = function(start,end){

var?result?= new Array();

start = startII 0;

end = end | this.length; //使用call之后this指向了類數(shù)組對象

for(var i = start; i < end; i++){

result.?push(this[i]);

}

return result;

}

用法: [].slice.call(類數(shù)組)，這是es5的用法

2、Array.form(類數(shù)組)，這是es6新增的函數(shù)

3、擴展運算符(...)】

參考第九題答案：

1.[].slice.call(類數(shù)組)

2.?Array.from(類數(shù)組)

?

三十七. 事件種類有哪幾種

鼠標事件 （繼承MouseEvent接口）

鍵盤事件 （繼承KeyboardEvent接口）

進度事件 （繼承ProgressEvent接口）

拖拉事件 （繼承DragEvent接口）

?

三十八. 請寫出三個以上的jQuery選擇器

1、#id ????

?????用法: $("#myDiv"); ???返回值 ?單個元素的組成的集合

?????說明: 這個就是直接選擇html中的id="myDiv"

?

????2、Element

??????用法: $("div") ????返回值 ?集合元素

??????說明:?element的英文翻譯過來是”元素”,所以element其實就是html已經(jīng)定義的標簽元素,例如div,

???????input, a等等.

?

??????3、class ?????????

??????用法: $(".myClass") ?????返回值 ?集合元素

??????說明: 這個標簽是直接選擇html代碼中class="myClass"的元素或元素組(因為在同一html頁面中

??????class是可以存在多個同樣值的)

?

??????4、* ?????????

??????用法: $("*") ?????返回值 ?集合元素

??????說明: 匹配所有元素,多用于結(jié)合上下文來搜索

?element

?

三十九.了解過各種框架中的路由嗎?你對路由如何理解的？請簡單概述一下

路由的作用，通常都是用于URI與組件之間的映射，當訪問不同的路徑的時候可以通過路由找到對應(yīng)的組件。

vue-router的用法:

1.?創(chuàng)建vue組件

2.?配置路由，把路徑和創(chuàng)建的vue組件關(guān)聯(lián)起來

3.?通過<router-link></router-link>中的路徑，根據(jù)路由配置，找到對應(yīng)的組件，并且把組件內(nèi)容顯示在<router-view/>

React中路由的用法:

創(chuàng)建組件，配置路由，通過jsx的方式創(chuàng)建。使用Link標簽實現(xiàn)路由跳轉(zhuǎn)，再通過Router,Route,RoutePath標簽實現(xiàn)路由定義。

angular中路由的用法:

路由功能是由routeProvider服務(wù) 和 ng-view 搭配實現(xiàn)，ng-view相當于提供了頁面模板的掛載點，當切換URL進行跳轉(zhuǎn)時，不同的頁面模板會放在ng-view所在的位置; 然后通過routeProvider?配置路由的映射

React

?

四十. 實現(xiàn)對象深拷貝

1，Object.assign

????let a={

????????age:1

????}

????let b=Object.assign({},a)

????a.age=2

????console.log(b.age)

?2,let a={

?????age:1

??}

???let b={...a}

???a.age=2

???console.log(b.age)

?

深拷貝是指源對象與拷貝對象互相獨立，其中任何一個對象的改動都不會對另外一個對象造成影響。

四十一. 使用你學(xué)習過的框架或者庫發(fā)出HTTP請求

axios.get("").then(function(res){}).catch(function(error){})

fetch("").then(function(res){return res.json();}).then(function(data){})

?

四十二. ES6模塊和COMMONJS模塊(nodejs)的區(qū)別

CommonJS 輸出是值的拷貝，即原來模塊中的值改變不會影響已經(jīng)加載的該值，ES6靜態(tài)分析，動態(tài)引用，輸出的是值的引用，值改變，引用也改變，即原來模塊中的值改變則該加載的值也改變。

??????CommonJS 模塊是運行時加載，ES6 模塊是編譯時輸出接口。

??????CommonJS 加載的是整個模塊，即將所有的接口全部加載進來，ES6 可以單獨加載其中的某個接口（方法），

??????CommonJS this 指向當前模塊，ES6 this 指向undefined

??????CommonJS 模塊輸出的是一個值的拷貝，ES6 模塊輸出的是值的引用。

?

四十三. ES6的繼承

//聲明一個類

class People{

constructor(name,age){

this.name=name; this.age=age;

}

say(){

console.log(`大家好我是${this.name},今年${this.age}歲！`)//es6語法的模板字符串

}

}

var person = new People('邱權(quán)武',18)//新建People對象

person.say()//調(diào)用方法 //類的繼承

class Student?extends?People{

constructor(name,age,score){

super(name,age)

this.score=score

}

?

say(){

console.log(`大家好我是${this.name},今年${this.age}歲,我這次的成績是${this.score}！`)

?}

?}

var student =new Student('小王',23,98)

?student.say()

?

?

四十四. 創(chuàng)建一個函數(shù)，返回0-100之間的隨機數(shù)

function?random(min, max) {

??????return Math.floor(Math.random() * (max - min)) + min;

?}

?（含min不含max）

function?random(min, max) {

??????return?Math.floor(Math.random() * (max?-?min+1)) + min;

?}

?（含min含max）

floor

四十五. 判斷對象是否是空對象

方法一：

if(JSON.stringify(value) === "{}"){

console.log（value+"為空對象"）

）

方法二：

if (Object.keys(value || {}).length ==?0) {

console.log（value+"為空對象"）

}

?

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>小白教程(json.cn)</title>

</head>

<body>

<h1>Array keys()</h1>

<p>從數(shù)組中創(chuàng)建一個可迭代的對象，該對象包含數(shù)組的鍵。</p>

<p id="demo1"></p>

<p id="demo2"></p>

<p id="demo3"></p>

<p><strong>注意:</strong> IE11 及其更早的瀏覽器版本不支持 keys 方法。</p>

<script>

var fruits = ["Banana", "Orange", "Apple", "Mango"];

var x = fruits.keys();

document.getElementById("demo1").innerHTML = x.next().value;

document.getElementById("demo2").innerHTML = x.next().value;

document.getElementById("demo3").innerHTML = x.next().value;

</script>

</body>

四十六. 寫一個函數(shù)使用Promise將request方法封裝成異步調(diào)用的形式，request方法傳參說明如下：

?

答案:

?

sucess

?

四十七. 常見的瀏覽器端跨域通訊方法有哪些

1. JSONP

通常為了優(yōu)化靜態(tài)資源的加載，會把靜態(tài)資源單獨放到一臺服務(wù)器上，通過img，script,link標簽等等，引入靜態(tài)資源。

缺點: 不方便調(diào)試，只支持GET請求，前后端都要寫代碼

2.?CORS

只需要在服務(wù)端設(shè)置響應(yīng)頭

Access-Control-Allow-Origin?表示限制來源域名，可以用*代表所有域名，也可以明確指定一個或多個域名。

Access-Control-Allow-Headers?常見值：x-request-with,Origin,Content-Type,Authorization

Access-Control-Allow-Methods?常見值: get，post,delete,put,options

基本所有現(xiàn)代瀏覽器都支持，除了ie8/9以下瀏覽器,因為ie8/9是基于XDomainRequest對象。

目前CORS是應(yīng)用最廣泛的解決方案

3.?postMessage

window.postMessage(message,targetOrigin)方法是html5新引進的特性，可以使用它來向其它的window對象發(fā)送消息，無論這個window對象是屬于同源或不同源，目前IE8+、FireFox、Chrome、Opera等瀏覽器都已經(jīng)支持window.postMessage方法。

四十八. 常見前端優(yōu)化方案

一、減少http請求，如css精靈、懶加載

二、壓縮圖片(gzip),圖片懶加載

三、盡量減少DOM的操作，減少重排、重繪，盡可能減少重繪，因為每重排一次，就需要重新加載一遍渲染樹，

四、cdn加速，cdn全名內(nèi)容分發(fā)網(wǎng)絡(luò)，緩存網(wǎng)站的靜態(tài)內(nèi)容，并且放到距離客戶最近的服務(wù)器上，解決網(wǎng)絡(luò)服務(wù)商不兼容的問題。例如阿里云cdn加速，騰訊云cdn加速。

五、利用流行框架進行模塊化開發(fā)，進行組件復(fù)用。

六、合理的使用標簽、選擇器

七、控制cookie大小，避免污染

八、壓縮css，js文件大小(也是減少http請求)

九、使用icon-font來代替一些圖標，減少圖片的數(shù)量

十、盡量使用css3動畫（css3會開啟GPU加速），使用requestAnimationFrame加快動畫速度

十一、將CSS放在<head></head>中

十二、將js放在<body></body>末尾

requestAnimationFrame 會把每一幀中的所有DOM操作集中起來，在一次重繪或回流中就完成，并且重繪或回流的時間間隔緊緊跟隨瀏覽器的刷新頻率，一般來說，這個頻率為每秒60幀。

css精靈，即CSS Sprite，是一種網(wǎng)頁圖片應(yīng)用處理方式。它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。

懶加載(Load On Demand)是一種獨特而又強大的數(shù)據(jù)獲取方法,它能夠在用戶滾動頁面的時候自動獲取更多的數(shù)據(jù),而新得到的數(shù)據(jù)不會影響原有數(shù)據(jù)的顯示,同時最大程度上減少服務(wù)器端的資源耗用。

gzip

?

四十九. split,splice,join的作用

字符串.split(“分隔符”),根據(jù)分隔符把字符串轉(zhuǎn)換為數(shù)組

數(shù)組.splice(起始索引，長度)，用于刪除數(shù)組中的指定元素

數(shù)組.join(“分隔符”),用于使用指定的分隔符把數(shù)組轉(zhuǎn)為字符串

?

五十. 單向數(shù)據(jù)流和雙向綁定的區(qū)別

單向數(shù)據(jù)流

優(yōu)點: 所有狀態(tài)的改變 可記錄、可跟蹤，源頭易追溯;

使得程序更直觀更容易理解，有利于應(yīng)用的可維護性;

一旦數(shù)據(jù)變化，就去更新頁面(data-頁面,data——>頁面)，但是如果用戶在頁面上做了變動(頁面-data,頁面——>data)，那么就手動收集起來(雙向是自動)，合并到原有的數(shù)據(jù)中。

缺點: HTML 代碼渲染完成，無法改變，有新數(shù)據(jù)，就須把舊 HTML 代碼去掉，整合新數(shù)據(jù)和模板重新渲染;代碼量上升，數(shù)據(jù)流轉(zhuǎn)過程 變長，出現(xiàn)很多類似的樣板代碼;在處理局部狀態(tài)較多的場景時(如編輯表單獲取元素，表單比較多的情況下)，會顯得啰嗦及繁瑣。

雙向數(shù)據(jù)流:

雙向綁定

優(yōu)點:

用戶在視圖上的修改會自動同步到數(shù)據(jù)模型中去，數(shù)據(jù)模型中值的變化也會立刻同步到視圖中去；無需進行和單向數(shù)據(jù)綁定的那些相關(guān)操作；在表單交互較多的場景下，會簡化大量業(yè)務(wù)無關(guān)的代碼。

缺點:

無法追蹤局部狀態(tài)的變化,增加了出錯時?debug?的難度；

?

五十一. new?RegExp（‘正則表達式’）和/正則表達式/(字面量寫法)的區(qū)別

1.?寫法不一樣，一個是寫在構(gòu)造函數(shù)里面，一個是寫在字符串里面。

2.?正則表達式字面量每次被計算時都會被轉(zhuǎn)換成一個正則對象，即使內(nèi)容一致，這些對象也并不相同,所以說new的方式性能更好，只不過字面量方式書寫代碼更少，更方便

?

五十二. TCP連接過程中，三次握手和四次揮手的理解

三次握手通俗理解(握手是連接之前的準備過程):

?

四次揮手通俗理解(揮手是指斷開連接的之前的準備過程):

解析

Seq:就是我們常說的序號。對于要發(fā)送的數(shù)據(jù)的第一個序號而言這個序號是通過一個算法計算得到一個初始序號（ISN）加1。至于ISN怎么計算而來這里不討論。這里我們以wireshark序號為準。假設(shè)某時序號為1000，簡單的理解就是發(fā)送方告訴接收端“我發(fā)送的數(shù)據(jù)是從第1000開始的”。

ACK序號：就是我們常說的確認序號。確認序號是上一次已經(jīng)成功接收到數(shù)據(jù)字節(jié)序號加1。還可以理解為接收端告訴發(fā)送端下一次想接收開始序號。假設(shè)某時確認序號為1000，簡單的理解就是接收方告訴發(fā)送方“我已經(jīng)收到第999序號了，我下一次想接收的數(shù)據(jù)是從1000開始的”。

TCP

傳輸控制協(xié)議（TCP，Transmission Control Protocol）是一種面向連接的、可靠的、基于字節(jié)流的傳輸層通信協(xié)議，

SYN(建立聯(lián)機)?ACK(確認)?PSH(傳送)?FIN(結(jié)束)?RST(重置)?URG(緊急)

syn是同步，ack是確認，1為是，0為否，就是收到同步和確認信號

SYN(synchronous建立聯(lián)機) ACK(acknowledgement 確認) PSH(push傳送) FIN(finish結(jié)束) RST(reset重置) URG(urgent緊急)Sequence number(順序號碼) Acknowledge number(確認號碼)

TCP

傳輸控制協(xié)議（Transmission Control Protocol）是一種面向連接的、可靠的、基于字節(jié)流傳的傳輸層協(xié)議。

?

同學(xué)們答題的時候，就不要太通俗了，用正式一點的思路來寫。

?

五十三. jquery和vue的區(qū)別

1.?概念不一樣。

vue是一個漸進式的基于組件開發(fā)的js框架

jquery是一個簡化原生js操作的js庫。

2.?特點不同

vue.js：vue操作元素方式不同，遵循MVVM模式，Vue 被設(shè)計為可以自底向上逐層應(yīng)用。Vue 的核心庫只關(guān)注視圖層，方便與第三方庫或既有項目整合。

jquery：經(jīng)典的MVC模式，具有獨特的鏈式語法和短小清晰的多功能接口；具有高效靈活的css選擇器，并且可對CSS選擇器進行擴展；擁有便捷的插件擴展機制和豐富的插件。

3.?優(yōu)勢不同

vue.js：通過雙向綁定，虛擬DOM，diff算法，大大優(yōu)化DOM操作的效率。目標是通過盡可能簡單的 API 實現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。

jquery：操作DOM簡單，提供了對基本JavaScript結(jié)構(gòu)的增強，比如元素迭代和數(shù)組處理等操作。

?

五十四. 簡述一下在項目中，在自己開發(fā)的組件中，解決了什么問題，如何實現(xiàn)

在小程序中，為了解決tab選項卡在多個頁面中重復(fù)使用的問題，自定義了一個tab選項卡組件。

實現(xiàn)1. 通過組件父傳子，解決每個頁面選項卡按鈕顯示的字不一樣的問題。

實現(xiàn)2. 選項卡內(nèi)容的切換，是通過插槽來傳遞的，因為這樣可以把自定義組件的內(nèi)容由調(diào)用頁面去決定。

實現(xiàn)3. 解決通過點擊子組件按鈕，觸發(fā)調(diào)用頁面的一些操作，使用了子傳父的方式（告訴父頁面當前點的是選項卡的哪一個按鈕）。

?

tab

五十五. 行內(nèi)元素和塊級元素的區(qū)別，行內(nèi)塊級元素的兼容性如何使用？

塊級元素:

獨占一行，可以設(shè)置寬度和高度

不管設(shè)置的寬度有多寬，都是獨占一行

有margin和padding

行內(nèi)元素變塊級元素用display:block

行內(nèi)元素:

不會獨占一行，不能設(shè)置寬度和高度，所有行內(nèi)元素會排成一行，一行排不下會自動換行

水平方向，margin都起作用

垂直方向，只有padding-bottom起作用

塊級元素變行內(nèi)元素用display:inline

行內(nèi)塊級元素：

同時具有行內(nèi)元素特點和塊級元素特點，原生的行內(nèi)塊級元素有img標簽，想讓某個標簽具有行內(nèi)塊元素的特點，使用display:inline-block

五十六. 前后端分離的概念

所謂的前后端分離，并不是說前端代碼和后端代碼在一個文件夾里面分開寫，而是前端獨立部署在一個服務(wù)端口上，后端獨立部署在一個服務(wù)端口上。

從開發(fā)角度來講，后端是指java,c#，nodejs等開發(fā)的后端項目，前端是指使用html,css,js開發(fā)的前端項目，瀏覽器并不是前端也不是后端，它只是一個界面顯示的容器。

?

前后端分離把前端和后端作為單獨的服務(wù)部署，可以使前端和后端開發(fā)人人員的工作互相不影響，任何一邊出了問題，也不會影響另一邊的開發(fā)進度。

而且前端和后端的開發(fā)可以同時進行，只需要在開發(fā)之前，把接口的規(guī)范定義好，請求參數(shù)和返回結(jié)果的數(shù)據(jù)結(jié)構(gòu)定義好，那么前端開發(fā)人員和后端開發(fā)人員可以同時進行開發(fā)工作，大大縮短開發(fā)周期，前端開發(fā)人員只需要根據(jù)接口規(guī)范制作模擬接口和模擬數(shù)據(jù)即可進行開發(fā)工作。

后端獨立出來以后，除了給html頁面提供數(shù)據(jù)以外，還可以同時給手機app端，H5端，小程序，公眾號等等提供數(shù)據(jù)。

?

五十七. 前后端數(shù)據(jù)交互

所謂交互，那就是有來有往，在項目中是指，發(fā)送請求和響應(yīng)請求。

在請求和響應(yīng)的過程中，都是需要有數(shù)據(jù)的。數(shù)據(jù)的格式，如果不采用統(tǒng)一標準的話，會增加開發(fā)的成本，也就是說，不同的客戶端，比如說，小程序，h5,手機app都采用不同的請求數(shù)據(jù)格式，那么后端，接收請求之后，就需要針對不同的請求數(shù)據(jù)格式來處理，會增加很多冗余代碼。解決這個問題，就是采用統(tǒng)一的數(shù)據(jù)格式，目前流行的格式就是json格式。不管是什么客戶端都統(tǒng)一采用json發(fā)送數(shù)據(jù)，服務(wù)端也統(tǒng)一響應(yīng)json數(shù)據(jù)，這樣的話，服務(wù)的兼容性和開發(fā)效率大大提高。

還有就是安全問題，前后端分離的情況下，特別是系統(tǒng)規(guī)模比較大，比如說分布式項目，微服務(wù)項目，接口的安全性通常是采用token的方式和https來保證。目前比較簡單且流行的方式，就是請求的規(guī)范按照jwt來開發(fā)。jwt簡單的講，就是把請求數(shù)據(jù)，按照json的格式進行封裝和加密。封裝加密后會得到一個字符串token，可以放在請求頭和響應(yīng)頭中，后端可以檢查請求頭的token是否符合要求，不符合要求的token或者不帶token的請求，都是非法的不會進行處理。

?

五十八. 簡述一下vuex和vuex的作用

?Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式,它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)

作用:多組件、多頁面間的數(shù)據(jù)共享。解決了組件之間統(tǒng)一狀態(tài)的共享問題，實現(xiàn)組件之間的數(shù)據(jù)持久化。

在項目中可以用vuex存放數(shù)據(jù)，不用每次都要請求后端服務(wù)器，這就在保證了數(shù)據(jù)新鮮度的同時，提高了使用性能

屬性：

?state：用于存儲數(shù)據(jù)

?getters：用于獲得需要計算state后得出的值，比較簡單的數(shù)據(jù)轉(zhuǎn)換。

?mutations：更改自身state的值

?actions：通過調(diào)用mutations修改state值,通常在這里發(fā)送異步請求

?modules：類似包的概念，封裝各個state，避免沖突，便于維護

?

五十九. vue路由中的動態(tài)路由

在路由配置中，通過匹配符來匹配不同的請求路徑，可以大大減少路由的配置，減少配置文件中的代碼，便于維護。

?

六十. 什么是git

Git是一個開源的分布式版本控制系統(tǒng)，用以有效、高速地處理從很小到非常大的項目版本管理。相比CVS、SVN等版本控制工具，Git可以不用依賴遠程服務(wù)器來管理項目，可以在本地進行管理，更加的靈活安全。

使用Git來管理項目有兩種方式：

一種是本地部署Git版本管理系統(tǒng)。

另一種是通過在線代碼托管。

本地部署Git版本管理系統(tǒng)，在自己負責的這一部分項目開發(fā)過程中，可以不需要聯(lián)網(wǎng)，在自己電腦上就可以進行版本管理，等到功能全部開發(fā)完畢，再連接遠程git服務(wù)器，與其他人員的負責的項目部分進行合并，最終形成完整項目。

常用的遠程git服務(wù):

GitHub就是基于Git的在線代碼托管平臺。

GitHub為當前最流行的開源項目托管平臺，數(shù)以萬計優(yōu)秀的開源項目被托管在GitHub上面。隨著越來越多的應(yīng)用程序轉(zhuǎn)移到云上，Github已經(jīng)成為了管理軟件開發(fā)以及發(fā)現(xiàn)已有代碼的首選方法。

對于普通開發(fā)人員來講，其在GitHub上托管的項目已經(jīng)成為了他的一張個人名片。許多優(yōu)秀的互聯(lián)網(wǎng)公司在招聘開發(fā)人員時都希望對方能提供個人的GitHub地址。當然，GitHub作為一個開源軟件的大寶庫，學(xué)習和使用它，也會為我們的日常開發(fā)帶來許多便利。

github在國外服務(wù)器，訪問不太穩(wěn)定，國內(nèi)也有類似的服務(wù)，比如碼云。

還可以自己購買云服務(wù)器，搭建自己的git服務(wù)。

?

六十一.?axios跨域解決方案

通常有兩種，一種前端配置，一種是后端解決方案，比較流行的是后端解決方案。

前端方案:

1.?在main.js中設(shè)置axios.defaults.baseURL = '/api'

2.?在config下的index.js中，創(chuàng)建一個虛擬的服務(wù)代理，請求的時候，由這個虛擬服務(wù)器發(fā)送跨域請求，就不會發(fā)生跨域問題

后端方案:

通過三種響應(yīng)頭配置來實現(xiàn)允許跨域

access-control-allow-origin: 允許訪問的來源主機

access-control-allow-header: 允許哪些頭設(shè)置,比如:?Authorization

access-control-allow-method: 允許哪些請求方法，比如get,post,options

?