1. 專案介紹

簡單介紹

2. 專案中遇到的問題

簡單介紹

3. 最近一個專案用到哪些技術

Vue，Vant，對接微信小程式和支付寶小程式

4. 移動端適配方案

①　定高適配

②　流式佈局

③　響應式佈局

④　Rem適配

5. 陣列的求最大值，排序，刪除

氣泡排序，arr.sort(( a, b )=>{ b-a }), splice(0, 1, ***)

6. 清除浮動

(1) 父級div定義 height

(2) 結尾處加空div標籤 clear:both 

(3) 父級div定義 偽類:after 和 zoom 

(4) 父級div定義 overflow:hidden

(5) 父級div定義 overflow:auto 

(6) 父級div定義 display:table 

7. Es6的新特性

1. 新增了塊級作用域(let,const)
2. 提供了定義類的語法糖(class)
3. 新增了一種基本資料型別(Symbol)
4. 新增了變數的解構賦值
5. 新增了箭頭函式
6. 陣列新增了一些API，如 isArray / from / of 方法
7. 物件和陣列新增了擴充套件運算子
8. 新增了模組化(import/export)
9. 新增了 Set 和 Map 資料結構
10. 原生提供 Promise建構函式

8. 說說你瞭解的promise

   Promise是一個建構函式，用來解決非同步操作的

promise有三種狀態: fulfilled, rejected, pending.

Promise 的優點:

一旦狀態改變，就不會再變，任何時候都可以得到這個結果

可以將非同步操作以同步操作的流程表達出來，避免了層層巢狀的回撥函式

Promise 的缺點:

無法取消 Promise

當處於pending狀態時，無法得知目前進展到哪一個階段

Promise的建構函式是同步執行的；then 中的方法是非同步執行的。

Promise 是微任務，setTimeout 是巨集任務，同一個事件迴圈中，promise.then總是先於 setTimeout 執行。

9. Css3做輪播圖原理

     我們會在同樣的位置準備好多個大小相同的圖片，並且橫放在div容器內，然後在div容器之上設定一個展示容器，其中展示容器的大小和圖片大小相同，最後給圖片容器新增自定義動畫，並且在動畫不同階段設定遞增的偏移值。

     首先必須保證展示容器大小與圖片大小相同，再為圖片新增float效果，然後確定插入的圖片數量並且為每個圖片設定動畫階段，其中每個階段都是通過使用keyframes設定遞增的margin-left值達到切換的效果。

10. let, const和var

1. let 和 const 定義的變數不會出現變數提升，而 var 定義的變數會提升。
2. let 和 const 是JS中的塊級作用域
3. let 和 const 不允許重複宣告(會丟擲錯誤)
4. let 和 const 定義的變數在定義語句之前，如果使用會丟擲錯誤(形成了暫時性死區)，而 var 不會。
5. const 宣告一個只讀的常量。一旦宣告，常量的值就不能改變(如果宣告是一個物件，那麼不能改變的是物件的引用地址)

const只是一個指標，指向一個記憶體空間，記憶體空間的內容可以改變，但是const指向一個新的空間就會會丟擲錯誤

11. 如何做個三角形

設定width: 0; height: 0;border-left，border-right為50px solid transpa'rent；border-bottom：50px solid red;即可

12. Vue的常用鉤子函式

1. beforeCreate

這個時候，this變數還不能使用，在data下的資料，和methods下的方法，watcher中的事件都不能獲得到；

1. created

這個時候可以操作vue例項中的資料和各種方法，但是還不能對"dom"節點進行操作；

1. mounted

這個時候掛載完畢，這時dom節點被渲染到文件內，一些需要dom的操作在此時才能正常進行。
注意：mounted在整個例項的生命週期中只執行一次。

1. computed

是把所有需要依賴其他值計算的值寫成物件的key值。

1. watch

把監聽的值寫成物件的key值

13. 如何隱藏一個元素，會不會引起重繪和迴流

①　display: none;

②　position:absolute;left: -99999px;

③　margin-left: -99999px;height: 0;

④　transform: scale(0);height: 0;

⑤　opacity: 0;

⑥　visibility: hidden;

⑦　position: relative;z-index: -999;

迴流必將引起重繪，而重繪不一定會引起迴流。比如：只有顏色改變的時候就只會發生重繪而不會引起迴流
當頁面佈局和幾何屬性改變時就需要回流
比如：新增或者刪除可見的DOM元素，元素位置改變，元素尺寸改變——邊距、填充、邊框、寬度和高度，內容改變

14. Vue載入完成在哪個階段，在created可以Windows查詢嗎

完成是在mounted,created可以windows查詢

15. H5和Css3的新特性

H5新特性：

1. 拖拽釋放(Drag and drop) API 

2. 語義化更好的內容標籤（header,nav,footer,aside,article,section）

3. 音訊、視訊API(audio,video)

4. 畫布(Canvas) API

5. 地理(Geolocation) API

6. 本地離線儲存 localStorage 長期儲存資料，瀏覽器關閉後資料不丟失；

7. sessionStorage 的資料在瀏覽器關閉後自動刪除

8. 表單控制元件，calendar、date、time、email、url、search  

9. 新的技術webworker, websocket, Geolocation

10.本地離線儲存 localStorage 長期儲存資料，瀏覽器關閉後資料不丟失；sessionStorage 的資料在瀏覽器關閉後自動刪除。

Css3的新特性：

1. 顏色：新增RGBA，HSLA模式
2. 文字陰影（text-shadow、）
3. 邊框： 圓角（border-radius）邊框陰影： box-shadow

4. 盒子模型：box-sizing

5. 背景：background-size 設定背景圖片的尺寸background-origin 設定背景圖片的原點

background-clip 設定背景圖片的裁切區域，以”，”分隔可以設定多背景，用於自適應佈局

1. 漸變：linear-gradient、radial-gradient

7. 過渡：transition，可實現動畫

8. 自定義動畫

9. 在CSS3中唯一引入的偽元素是 ：：selection.

10. 媒體查詢，多欄佈局

11. border-image

12. 2D/3D轉換

16. 介紹下盒模型，如何轉換

所有HTML元素可以看作盒子，在CSS中，"box model"這一術語是用來設計和佈局時使用。

CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素

Margin(外邊距) - 清除邊框外的區域，外邊距是透明的。

Border(邊框) - 圍繞在內邊距和內容外的邊框。

Padding(內邊距) - 清除內容周圍的區域，內邊距是透明的。

Content(內容) - 盒子的內容，顯示文字和影象。、

如何轉換：

box-sizing值為content-box時：即 標準盒模型

box-sizing值為border-box時：即 怪異盒模型

17. js資料型別，基本型別和引用型別區別

基本資料型別： Number， String，Bollean，Null，Undefined, Symbol(Es6新增)

引用資料型別： Array， Object， Function

區別：

基本資料型別指的是簡單的資料段，引用資料型別指的是有多個值構成的物件。

基本資料型別是按值訪問的，因為可以直接操作儲存在變數中的實際值。引用資料型別是儲存在堆記憶體中的物件。複製變數和引數傳遞不同。

18. 如何解決使用者登入許可權判斷

在每一個路由的 meta 屬性裡，將能訪問該路由的角色新增到 roles 裡。使用者每次登陸後，將使用者的角色返回。然後在訪問頁面時，把路由的 meta 屬性和使用者的角色進行對比，如果使用者的角色在路由的 roles 裡，那就是能訪問，如果不在就拒絕訪問。

19. 如何解決跨域問題

1.比如jsonp;在頁面中新增script標籤,通過src屬性請求不同域的js程式碼,只能支援get請求.

2. window.postMessage

3. 跨域資源共享（CORS）

4. nginx正向代理代理客戶端，反向代理代理伺服器；反向代理，其實客戶端對代理是無感知的，因為客戶端不需要任何配置就可以訪問，我們只需要將請求傳送到反向代理伺服器，由反向代理伺服器去選擇目標伺服器獲取資料後，在返回給客戶端，此時反向代理伺服器和目標伺服器對外就是一個伺服器，暴露的是代理伺服器地址，隱藏了真實伺服器IP地址。

15. Jsonp工作原理

利用<script>標籤沒有跨域限制的“漏洞”（歷史遺蹟啊）來達到與第三方通訊的目的。當需要通訊時，本站指令碼建立一個<script>元素，地址指向第三方的API網址，形如：
<script src="http://www.example.net/api?param1=1¶m2=2"></script>
並提供一個回撥函式來接收資料（函式名可約定，或通過地址引數傳遞）。
第三方產生的響應為json資料的包裝（故稱之為jsonp，即json padding），形如：
callback({"name":"hax","gender":"Male"})
這樣瀏覽器會呼叫callback函式，並傳遞解析後json物件作為引數。本站指令碼可在callback函式裡處理所傳入的資料。

20. flex佈局下如何換行

Flex-wrap: wrap;

21. 陣列的常用方法有哪些，foreach和map有什麼區別

修改原陣列的API有:

splice/reverse/fill/copyWithin/sort/push/pop/unshift/shift

不修改原陣列的API有:

slice/map/forEach/every/filter/reduce/entries/find

1、forEach()返回值是undefined，不可以鏈式呼叫。

2、map()返回一個新陣列，原陣列不會改變。

3、沒有辦法終止或者跳出forEach()迴圈，除非丟擲異常，所以想執行一個數組是否滿足什麼條件，返回布林值，可以用一般的for迴圈實現，或者用Array.every()或者Array.some();

4、$.each()方法規定為每個匹配元素規定執行的函式，可以返回 false 可用於及早停止迴圈。

22. 使用過slot插槽嗎，介紹下

slot 插槽可以在元件的內容預留一個位置.類似於 placeholder.

在需要的使用,把你需要的任何內容填充進去.

單個 Slot
在子元件內使用特殊的<slot>元素就可以為這個子元件新增一個 slot (插槽),在父元件模板裡,插入在子元件標籤內的所有內容將替代子元件的<slot>標籤及它的內容.

23. Vuex的理解

Vuex簡單說就是全域性狀態管理的,專案中常常需要有幾個引數所有元件都要用,或者同級元件之間的資料傳遞和通訊。此時使用vuex非常方便開發。

核心屬性為：state，getter，mutation，action，module

state：儲存資料，儲存狀態；在根例項中註冊了store 後，用 this.$store.state 來訪問；對應vue裡面的data；存放資料方式為響應式，vue元件從store中讀取資料，如資料發生變化，元件也會對應的更新。

getters：可以認為是 store 的計算屬性，相當於 vue中的 computed，依賴於 state裡面的值。它的返回值會根據它的依賴被快取起來，且只有當它的依賴值發生了改變才會被重新計算。

mutations：用於修改狀態，store裡面的數僅能通過mutations裡面的方法改變,但是必須是同步的。更改 vuex 的 store 中的狀態的唯一方法是提交 mutation，也就是$store.commit。

actions：包含任意非同步操作，用它處理完後再觸發mutations來改變狀態。

module：將 store 分割成模組，每個模組都具有state、mutation、action、getter、甚至是巢狀子模組。

24. v-if和v-show的區別

手段：v-if是動態的向DOM樹內新增或者刪除DOM元素；v-show是通過設定DOM元素的display樣式屬性控制顯隱

編譯過程：v-if切換有一個區域性編譯/解除安裝的過程，切換過程中合適地銷燬和重建內部的事件監聽和子元件；v-show只是簡單的基於css切換

編譯條件：v-if是惰性的，如果初始條件為假，則什麼也不做；只有在條件第一次變為真時才開始區域性編譯（編譯被快取？編譯被快取後，然後再切換的時候進行區域性解除安裝); v-show是在任何條件下（首次條件是否為真）都被編譯，然後被快取，而且DOM元素保留

效能消耗：v-if有更高的切換消耗；v-show有更高的初始渲染消耗

使用場景：v-if適合運營條件不大可能改變；v-show適合頻繁切換

相同點 v-show 都可以動態控制著dom元素的顯示隱藏

不同點：v-if 的顯示隱藏是將DOM元素整個新增或刪除，v-show 的顯示隱藏是為DOM元素新增css的樣式display，設定none或者是block，DOM元素是還存在的

在渲染多個元素的時候，可以把一個 元素作為包裝元素，並使用v-if 進行條件判斷，最終的渲染不會包含這個元素，v-show是不支援 語法

25. 專案開發中git的使用，如何合併

一. git clone專案到本地

在多人開發中，一般的專案有master和其他分支，那麼clone操作就需要你指定對應的分支把專案工程clone到本地，

1.首先新建一個空資料夾，把資料夾進行git初始化操作,在資料夾的根目錄下，右鍵選擇git bash here，在彈出的窗體中輸入命令：git init

這樣就把該資料夾git初始化了

2.接下來就是clone操作了，繼續輸入命令：git clone xx(此處為你的專案的git地址），一般這個命令clone下來的是master分支的專案，你也可以clone指定分支的工程，命令：git clone -b 分支名 git地址

二. 使用git把本地專案提交到github

1.如果該工程沒有git初始化，那麼在工程根目錄下使用git init進行初始化，如果已經初始化，則省略這步

2.將專案的檔案新增到倉庫中使用git add，（git add . ）表示將所有檔案都新增，（git add xx(指定檔案)）表示將指定檔案新增進去

3.將add的檔案commit到倉庫，命令：git commit -m "你想寫的註釋"

4.將本地的倉庫關聯到github上，命令如下：git remote add origin xxx（此處為你的git地址）

5.在進行push之前，先進行pull操作，命令如下：git pull origin xxx(此處為你的分支名，master或者其他分支名)

6.上傳程式碼到github遠端倉庫，命令如下：git push -u origin xxx（此處為你的分支名），在這個步驟中可能會有彈窗要你輸入你的使用者名稱和密碼，按照指示操作即可

衝突是如何解決的

情況1： 無衝突

先拉取遠端程式碼，更新原生代碼。然後提交自己的更新程式碼即可。

情況2：有衝突

拉去遠端程式碼，存在衝突，會報錯。此時我們需要將原生代碼暫存起來stash;更新原生代碼，將原生代碼版本更新和遠端的程式碼一致，將暫存的程式碼合併到更新後的程式碼後，有衝突的要手動解決衝突，然後提交解決衝突後的代