HTML5有哪些新特性？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分HTML和HTML5？

*HTML5 現在已經不是 SGML(標準通用標記語言，是一種定義電子文檔結構和描述其內容的國際標準語言) 的子集，主要是關于圖像，位置，存儲，多任務等功能的增加。

*拖拽釋放(Drag and drop) API

? 語義化更好的內容標簽（header,nav,footer,aside,article,section）

? 音頻、視頻API(audio,video)

? 畫布(Canvas) API

? 地理(Geolocation) API

? 本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉后數據不丟失；

? sessionStorage 的數據在瀏覽器關閉后自動刪除

*支持HTML5新標簽：

* IE8/IE7/IE6支持通過document.createElement方法產生的標簽，

? 可以利用這一特性讓這些瀏覽器支持HTML5新標簽，

? 瀏覽器支持新標簽后，還需要添加標簽默認的樣式：

* 當然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

? <!--[if lt IE 9]>

? <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>

? <![endif]-->

*如何區分： DOCTYPE聲明\新增的結構元素\功能元素

css3中的transform有哪些屬性？分別用來實現什么效果？

*transform 可用于內聯(inline)元素和塊級(block)元素，它有幾個屬性值參數：

translate 位移：基于 X 和 Y 坐標重新定位元素，當使用一個參數時表示 X 軸和 Y 軸的參數相同，效果類似 position:relative 。

scale 縮放：可以讓任一元素變大、變小。它使用一個或者兩個正數和負數以及小數作為參數，當使用一個參數時表示 X 軸和 Y 軸的縮放相同。

rotate 旋轉：通過傳遞一個度數值來轉動一個對象。

skew 傾斜：參數是度數，當使用一個參數時表示 X 軸和 Y 軸的參數相同。

matrix 矩陣變換：基于 X 和 Y 坐標重新定位元素，它使用 6 個參數。

localStorage、sessionStorage、cookie有什么區別？

*sessionStorage用于本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問并且當會話結束后數據也隨之銷毀。

因此sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。

而localStorage用于持久化的本地存儲，除非主動刪除數據，否則數據是永遠不會過期的。

localstorage和cookie的區別

localStorage的概念和cookie相似，區別是它是為了更大容量存儲設計的。

Cookie的大小是受限的，并且每次你請求一個新的頁面的時候Cookie都會被發送過去，這樣無形中浪費了帶寬，另外cookie還需要指定作用域，不可以跨域調用。

除此之外，localStorage擁有setItem,getItem,removeItem,clear等方法，不像cookie需要前端開發者自己封裝setCookie，getCookie。

但是Cookie也是不可以或缺的：Cookie的作用是與服務器進行交互，作為HTTP規范的一部分而存在，而localStorage僅僅是為了在本地“存儲”數據而生。

什么是同源策略？你都知道哪些解決跨域的方法？

同源策略（Same origin policy）是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能都會受到影響。

可以說Web是構建在同源策略基礎之上的，瀏覽器只是針對同源策略的一種實現。

當一個瀏覽器的兩個tab頁中分別打開來 百度和谷歌的頁面當瀏覽器的百度tab頁執行一個腳本的時候會檢查這個腳本是屬于哪個頁面的，即檢查是否同源，只有和百度同源的腳本才會被執行。

如果非同源，那么在請求數據時，瀏覽器會在控制臺中報一個異常，提示拒絕訪問。

同源

域名、協議、端口相同，也就是在同一個域里。

JSONP的基本原理 動態添加一個<script>標簽，而script標簽的src屬性是沒有跨域的限制的。

CORS（跨域資源共享）

圖像 Ping 跨域

document.domain 跨域

服務器代理

window.name 跨域

location.hash 跨域

postMessage 跨域

列舉JavaScript的基本數據類型和引用數據類型

Number、String 、Boolean、Null和Undefined。基本數據類型是按值訪問的，因為可以直接操作保存在變量中的實際值。

引用類型數據：也就是對象類型Object type，比如：Object 、Array 、Function 、Data等

Vue2.0的生命周期有哪些？分別解釋其意思

1.beforeCreate

創建前的狀態(創建實例前，vue實例的屬性值為undefined)。

2.created

實例創建完成后(data被定義了，但el屬性為undefined)。然而，掛載階段還沒開始，$el屬性目前不可見。

3.beforeMount

掛鉤前(DOM渲染前)，el屬性已經拿到對應的DOM元素。

4.mounted

掛載結束(Dom渲染完成，el屬性的Dom的數據將被渲染)，對已有dom節點的操作可以在這期間進行。

5.beforeUpdate

數據變化前的調用。

6.updated

數據變化后的鉤子。

7.beforeDestroy

實例銷毀之前調用。在這一步，實例仍然完全可用。

8.destroyed

Vue 實例銷毀后調用。調用后，Vue 實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷毀。

詳述組件通信

父組件傳值給子組件

1、給子組件綁定一個自定義屬性用來掛載父組件的變量

2、在子組件中用props來接受自定義屬性? props:['屬性1'，‘屬性2’……]

3、在方法中中或者模板輸出（接受的自定義屬性）即可

子組件傳值給父組件

在子組件中調用父組件的方法

1、給父組件創建方法

2、在子組件綁定自定義事件（v-on）,在自定義事件上掛載父組件的方法名

3、在子組件的方法中 調用父組件的方法

調用方式? this.$emit('自定義的事件名'，)

this.$emit(自定義的事件名,實參列表);

路由鉤子函數（導航守衛）

概念

導航發生變化時，導航鉤子主要用來攔截導航，讓它完成跳轉或取消

攔截方式

全局的

beforeEach - 前置鉤子函數

參數to、from、next

to：去哪里

from：從哪里

next()：是否跳轉由它決定

使用場景 - 未登錄去下單，跳轉到登錄頁

afterEach - 后置鉤子函數

參數to、from

to:去哪里

from:從哪來

使用場景 - 改變瀏覽器title

單個路由獨享的

beforeEnter

參數to、from、next

同beforeEach

組件級的

beforeRouteEnter - 進入組件前

參數to、from、next

同beforeEach

使用場景 - 進入這個組件前你要做什么初始化操作

beforeRouteUpdate - 組件更新或改變時

參數to、from、next

同beforeEach

使用場景 - 復用組件時（對于一個帶有動態參數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候）

beforeRouteLeave - 離開組件時

參數to、from、next

同beforeEach

使用場景 - 清除定時器等等

v-show和v-if有什么區別？及使用場景

v-show? 操作的是css 中display屬性 給不符合條件的數據加上display：none

v-if 不符合條件的數據 不渲染

v-show 與v-if的區別：

v-show 有更高的渲染成本 v-if有更高的切換成本

v-for和v-if的優先級

v-for 比 v-if 具有更高的優先級

Vue常用的指令

v-if//v-show//v-else//v-for//v-bind//v-on

Vue常用修飾符

.lazy

在默認情況下，v-model 在每次 input 事件觸發后將輸入框的值與數據進行同步 。你可以添加 lazy 修飾符，從而轉變為使用 change 事件進行同步：

<!-- 在“change”時而非“input”時更新 -->

<input v-model.lazy="msg" >

.number

如果想自動將用戶的輸入值轉為數值類型，可以給 v-model 添加 number 修飾符

<input v-model.number="age" type="number">

.trim

如果要自動過濾用戶輸入的首尾空白字符，可以給 v-model 添加 trim 修飾符：

<div id='other'>

? ? ? ? <input v-model.trim='trim'>

? ? ? ? <p ref='tr'>{{trim}}</p>

? ? ? ? <button @click='getStr'>獲取</button>

</div>

事件修飾符

<!-- 阻止單擊事件繼續傳播 -->

<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重載頁面 -->

<form v-on:submit.prevent="onSubmit"></form>

<!-- 修飾符可以串聯 -->

<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修飾符 -->

<form v-on:submit.prevent></form>

<!-- 添加事件監聽器時使用事件捕獲模式 -->

<!-- 即元素自身觸發的事件先在此處處理，然后才交由內部元素進行處理 -->

<div v-on:click.capture="doThis">...</div>

<!-- 只當在 event.target 是當前元素自身時觸發處理函數 -->

<!-- 即事件不是從內部元素觸發的 -->

<div v-on:click.self="doThat">...</div>

使用修飾符時，順序很重要；相應的代碼會以同樣的順序產生。因此，用 v-on:click.prevent.self 會阻止所有的點擊，而 v-on:click.self.prevent 只會阻止對元素自身的點擊。

在監聽鍵盤事件時，我們經常需要檢查常見的鍵值。Vue 允許為 v-on 在監聽鍵盤事件時添加按鍵修飾符：

<!-- 只有在 `keyCode` 是 13 時調用 `vm.submit()` -->

<input v-on:keyup.13="submit">

記住所有的 keyCode 比較困難，所以 Vue 為最常用的按鍵提供了別名：

<!-- 同上 -->

<input v-on:keyup.enter="submit">

<!-- 縮寫語法 -->

<input @keyup.enter="submit">

v-on可以監聽多個方法嗎？

可以

vue中key值的作用

key的作用主要是為了高效的更新虛擬DOM。另外vue中在使用相同標簽名元素的過渡切換時，也會使用到key屬性，其目的也是為了讓vue可以區分它們，否則vue只會替換其內部屬性而不會觸發過渡效果。

用于管理可復用的元素 因為vue會盡可能高效的渲染，通常會復用已有元素而不是從頭渲染、

需要使用key來給每個節點做一個唯一標識，Diff算法就可以正確的識別此節點，找到正確的位置區插入新的節點。

Vue組件中的data為什么必須是函數

因為組件是要共享的，但他們的data是私有的，所以每個組件都要return一個新的data對象

組件中的data寫成一個函數，數據以函數返回值形式定義，這樣每復用一次組件，就會返回一份新的data，類似于給每個組件實例創建一個私有的數據空間，讓各個組件實例維護各自的數據。

而單純的寫成對象形式，就使得所有組件實例共用了一份data，就會造成一個變了全都會變的結果。

keep-alive組件的作用？

keep-alive?是 Vue 內置的一個組件，可以在組件切換過程中將狀態保留在內存中，防止重復渲染dom

單頁面應用和多頁面應用區別及優缺點

單頁面應用，通俗一點說就是指只有一個主頁面的應用，瀏覽器一開始要加載所有必須的 html, js, css。所有的頁面內容都包含在這個所謂的主頁面中。

但在寫的時候，還是會分開寫（頁面片段），然后在交互的時候由路由程序動態載入，單頁面的頁面跳轉，僅刷新局部資源。

多應用于pc端。多頁面，就是指一個應用中有多個頁面，頁面跳轉時是整頁刷新

單頁應用? 優點：頁面切換快? ?缺點：首屏加載稍慢，seo差；多頁應用? ?優點：首屏時間快，seo效果好? 缺點：頁面切換慢

什么是計算屬性？什么情況使用

computed 是vue實例中的計算屬性computed是實時響應的，要根據data里一個值隨時變化做出一些處理時，就需要用conputed去實時計算

computed，methods的區別？

computed計算屬性的方式在用屬性時不用加(),而methods方式在使用時要像方法一樣去用，必須加()?computed是基于它的依賴緩存，只有相關依賴發生改變時才會重新取值。?

methods在重新渲染的時候，函數總會重新調用執行。

什么是自定義指令，有哪些鉤子函數及自定義指令的使用場景

有的情況下，你仍然需要對普通 DOM 元素進行底層操作，這時候就會用到自定義指令。

一個指令定義對象可以提供如下幾個鉤子函數 (均為可選)

bind：只調用一次，指令第一次綁定到元素時調用。在這里可以進行一次性的初始化設置。

inserted：被綁定元素插入父節點時調用 (僅保證父節點存在，但不一定已被插入文檔中)。

update：所在組件的 VNode 更新時調用，但是可能發生在其子 VNode 更新之前。指令的值可能發生了改變，也可能沒有。但是你可以通過比較更新前后的值來忽略不必要的模板更新 (詳細的鉤子函數參數見下)。

componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調用。

unbind：只調用一次，指令與元素解綁時調用。

父組件獲取異步動態數據傳遞給子組件，報錯如何解決？

開始的時候讓子組件隱藏,然后等數據返回的時候，讓子組件顯示

通過v-if，也就是判斷數據是否為空，為空就不渲染，也能解決了

為不能讀取的屬性添加一個默認值，就可以很好的解決了

query和params的區別

- 地址欄的展現形式不同

? - query：?key=value

? - params:：/value

- 接收方式不同

? - query：this.$route.query

? - params:this.$route.params

- 使用場景的不同

? - query一般用在搜索

? - params一般用在詳情頁

什么是Vuex？詳述Vuex的工作流程

官方介紹：Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。

Vuex其實就是一個Vue的集中狀態管理工具，類似于redux，但使用方法很明顯優化了許多

什么時候使用Vuex？

官方的話說，在你需要用的時候自然而然就知道自己什么時候要用了

在我看來，當項目需要使用公共數據，并且這個公共數據的訪問量較大的時候，我們可以使用Vuex，用來集中管理公共的數據，而一些小型的項目，我們可以靠中央通信總線的發布訂閱模式來實現數據管理與通信

Vuex的工作流程

首先通過dispatch提交一個action

在action中我們可以執行一些異步的操作，或者根據不同的情況分發不同的mutation

接著在action中調用commit，觸發一個mutation

所有修改state的操作，全部應該放在mutation中來做

而state更新之后，會調用Vue的底層方法，通知視圖進行更新渲染

Vuex不像redux，redux在任何項目工程內都可以使用，不僅限于react，但是Vuex是基于Vue的底層實現的一個狀態管理工具，其實Vuex中的store本質就是沒有template的隱藏著的vue組件

詳述Vuex的核心屬性及使用

state

state存儲了Vuex的基本數據，在state中存儲的數據都是經過Vue底層watcher偵聽的數據，可以實現響應式數據

actions

actions存放了Vuex中所有的異步操作，可以在actions中通過commit分發不同的mutation，在不同的情況下執行不同的方法

mutations

mutations存放了Vuex中所有關于state的操作，修改state只能通過mutations，否則的話數據不會響應式更新

getters

getters就類似與Vue實例中的computed，計算屬性，所有關于數據的復雜計算應該放在getters中來操作

modules

modules，類似于redux中的reducer，每一個module都擁有自己的state、mutations、actions、getters；將整個store根據功能或者數據分解成不同的模塊，最后合并在一個Store中

Vue和Jquery的區別

Jquery直接操作DOM，使用選擇器以及便捷的DOM操作方式來修改視圖以及數據

Vue不直接操作DOM，而是通過雙向數據綁定的方式，將DOM節點在Vue內部轉化對象的形式，通過修改數據直接修改視圖

Jquery是一個前端類庫，只是提供了很多便捷操作DOM的方法，而Vue是一個框架，有一套完整的體系

Vue中的slot是什么？

在Vue中，我們一般使用UI界面來劃分組件，而每一個UI界面可以劃分很多個組件，不同的UI界面中難免會有相似之處，這種相似的地方，我們如何通過一種優雅的方式來達到復用這個UI組件呢？就是使用slot插槽了

slot插槽，其實就是用來做內容分發，使得可以最大程度的復用組件，達到每次使用同一個組件的時候可以根據情況創建不同的內容的功能

匿名插槽

不具有name屬性的slot就是匿名插槽，也可以叫默認插槽

由父組件提供樣式和內容，子組件只負責顯示

匿名插槽/默認插槽只可以使用一次

<slot>里邊寫的是默認值</slot>

在子組件內定義slot時，內部可以定義默認值，當父組件有內容分發的時候，顯示父組件的內容，沒有的時候，顯示默認內容

具名插槽

有name屬性

在組件中可以使用N次（name值不同的情況下）

父組件通過html模板上的slot屬性關聯具名插槽

<template v-slot:插槽名稱><div>插槽內容</div></template>

沒有slot屬性的html模板默認關聯匿名模板

父組件提供樣式和內容

<slot name="插槽名稱"></slot>

作用域插槽（帶數據的插槽）

父組件只提供樣式，子組件提供內容

在slot上面綁定數據

子組件的值可以傳給父組件使用

父組件展示子組件數據有3種方式：flex顯示、列表顯示、直接顯示

使用v-slot必須使用template;之前使用的是slot-scope，但是這個屬性已經在2.6.0廢棄了，現在使用v-slot指令來代替原有的slot-scope屬性

scope返回的值是slot標簽上返回的所有屬性值，并且是一個對象的形式保存起來

// 子組件中// 父組件中{{item}}{{scope.message}}

SPA首屏加載慢，該如何解決？

抽取css文件

使用CDN資源

使用路由模塊化加載

按照頁面或者組件分塊懶加載

使用gzip減小網絡傳輸的流量大小

使用服務端渲染的方式

使用預渲染的方式