HTML5有哪些新特性？如何處理HTML5新標簽的瀏覽器兼容問題？如何區(qū)分HTML和HTML5？
*HTML5 現(xiàn)在已經(jīng)不是 SGML(標準通用標記語言，是一種定義電子文檔結(jié)構(gòu)和描述其內(nèi)容的國際標準語言) 的子集，主要是關(guān)于圖像，位置，存儲，多任務(wù)等功能的增加。
*拖拽釋放(Drag and drop) API
? 語義化更好的內(nèi)容標簽（header,nav,footer,aside,article,section）
? 音頻、視頻API(audio,video)
? 畫布(Canvas) API
? 地理(Geolocation) API
? 本地離線存儲 localStorage 長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失；
? sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除
*支持HTML5新標簽：
* IE8/IE7/IE6支持通過document.createElement方法產(chǎn)生的標簽，
? 可以利用這一特性讓這些瀏覽器支持HTML5新標簽，
? 瀏覽器支持新標簽后，還需要添加標簽?zāi)J的樣式：
* 當然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
? <!--[if lt IE 9]>
? <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
? <![endif]-->
*如何區(qū)分： DOCTYPE聲明\新增的結(jié)構(gòu)元素\功能元素
css3中的transform有哪些屬性？分別用來實現(xiàn)什么效果？
*transform 可用于內(nèi)聯(lián)(inline)元素和塊級(block)元素，它有幾個屬性值參數(shù)：
translate 位移：基于 X 和 Y 坐標重新定位元素，當使用一個參數(shù)時表示 X 軸和 Y 軸的參數(shù)相同，效果類似 position:relative 。
scale 縮放：可以讓任一元素變大、變小。它使用一個或者兩個正數(shù)和負數(shù)以及小數(shù)作為參數(shù)，當使用一個參數(shù)時表示 X 軸和 Y 軸的縮放相同。
rotate 旋轉(zhuǎn)：通過傳遞一個度數(shù)值來轉(zhuǎn)動一個對象。
skew 傾斜：參數(shù)是度數(shù)，當使用一個參數(shù)時表示 X 軸和 Y 軸的參數(shù)相同。
matrix 矩陣變換：基于 X 和 Y 坐標重新定位元素，它使用 6 個參數(shù)。
localStorage、sessionStorage、cookie有什么區(qū)別？
*sessionStorage用于本地存儲一個會話（session）中的數(shù)據(jù)，這些數(shù)據(jù)只有在同一個會話中的頁面才能訪問并且當會話結(jié)束后數(shù)據(jù)也隨之銷毀。
因此sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。
而localStorage用于持久化的本地存儲，除非主動刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠不會過期的。
localstorage和cookie的區(qū)別
localStorage的概念和cookie相似，區(qū)別是它是為了更大容量存儲設(shè)計的。
Cookie的大小是受限的，并且每次你請求一個新的頁面的時候Cookie都會被發(fā)送過去，這樣無形中浪費了帶寬，另外cookie還需要指定作用域，不可以跨域調(diào)用。
除此之外，localStorage擁有setItem,getItem,removeItem,clear等方法，不像cookie需要前端開發(fā)者自己封裝setCookie，getCookie。
但是Cookie也是不可以或缺的：Cookie的作用是與服務(wù)器進行交互，作為HTTP規(guī)范的一部分而存在，而localStorage僅僅是為了在本地“存儲”數(shù)據(jù)而生。
什么是同源策略？你都知道哪些解決跨域的方法？
同源策略（Same origin policy）是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能都會受到影響。
可以說Web是構(gòu)建在同源策略基礎(chǔ)之上的，瀏覽器只是針對同源策略的一種實現(xiàn)。
當一個瀏覽器的兩個tab頁中分別打開來 百度和谷歌的頁面當瀏覽器的百度tab頁執(zhí)行一個腳本的時候會檢查這個腳本是屬于哪個頁面的，即檢查是否同源，只有和百度同源的腳本才會被執(zhí)行。
如果非同源，那么在請求數(shù)據(jù)時，瀏覽器會在控制臺中報一個異常，提示拒絕訪問。
同源
域名、協(xié)議、端口相同，也就是在同一個域里。
JSONP的基本原理 動態(tài)添加一個<script>標簽，而script標簽的src屬性是沒有跨域的限制的。
CORS（跨域資源共享）
圖像 Ping 跨域
document.domain 跨域
服務(wù)器代理
window.name 跨域
location.hash 跨域
postMessage 跨域
列舉JavaScript的基本數(shù)據(jù)類型和引用數(shù)據(jù)類型
Number、String 、Boolean、Null和Undefined?；緮?shù)據(jù)類型是按值訪問的，因為可以直接操作保存在變量中的實際值。
引用類型數(shù)據(jù)：也就是對象類型Object type，比如：Object 、Array 、Function 、Data等
Vue2.0的生命周期有哪些？分別解釋其意思
1.beforeCreate
創(chuàng)建前的狀態(tài)(創(chuàng)建實例前，vue實例的屬性值為undefined)。
2.created
實例創(chuàng)建完成后(data被定義了，但el屬性為undefined)。然而，掛載階段還沒開始，$el屬性目前不可見。
3.beforeMount
掛鉤前(DOM渲染前)，el屬性已經(jīng)拿到對應(yīng)的DOM元素。
4.mounted
掛載結(jié)束(Dom渲染完成，el屬性的Dom的數(shù)據(jù)將被渲染)，對已有dom節(jié)點的操作可以在這期間進行。
5.beforeUpdate
數(shù)據(jù)變化前的調(diào)用。
6.updated
數(shù)據(jù)變化后的鉤子。
7.beforeDestroy
實例銷毀之前調(diào)用。在這一步，實例仍然完全可用。
8.destroyed
Vue 實例銷毀后調(diào)用。調(diào)用后，Vue 實例指示的所有東西都會解綁定，所有的事件監(jiān)聽器會被移除，所有的子實例也會被銷毀。
詳述組件通信
父組件傳值給子組件
1、給子組件綁定一個自定義屬性用來掛載父組件的變量
2、在子組件中用props來接受自定義屬性? props:['屬性1'，‘屬性2’……]
3、在方法中中或者模板輸出（接受的自定義屬性）即可
子組件傳值給父組件
在子組件中調(diào)用父組件的方法
1、給父組件創(chuàng)建方法
2、在子組件綁定自定義事件（v-on）,在自定義事件上掛載父組件的方法名
3、在子組件的方法中 調(diào)用父組件的方法
調(diào)用方式? this.$emit('自定義的事件名'，)
this.$emit(自定義的事件名,實參列表);
路由鉤子函數(shù)（導(dǎo)航守衛(wèi)）
概念
導(dǎo)航發(fā)生變化時，導(dǎo)航鉤子主要用來攔截導(dǎo)航，讓它完成跳轉(zhuǎn)或取消
攔截方式
全局的
beforeEach - 前置鉤子函數(shù)
參數(shù)to、from、next
to：去哪里
from：從哪里
next()：是否跳轉(zhuǎn)由它決定
使用場景 - 未登錄去下單，跳轉(zhuǎn)到登錄頁
afterEach - 后置鉤子函數(shù)
參數(shù)to、from
to:去哪里
from:從哪來
使用場景 - 改變?yōu)g覽器title
單個路由獨享的
beforeEnter
參數(shù)to、from、next
同beforeEach
組件級的
beforeRouteEnter - 進入組件前
參數(shù)to、from、next
同beforeEach
使用場景 - 進入這個組件前你要做什么初始化操作
beforeRouteUpdate - 組件更新或改變時
參數(shù)to、from、next
同beforeEach
使用場景 - 復(fù)用組件時（對于一個帶有動態(tài)參數(shù)的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時候）
beforeRouteLeave - 離開組件時
參數(shù)to、from、next
同beforeEach
使用場景 - 清除定時器等等
v-show和v-if有什么區(qū)別？及使用場景
v-show? 操作的是css 中display屬性 給不符合條件的數(shù)據(jù)加上display：none
v-if 不符合條件的數(shù)據(jù) 不渲染
v-show 與v-if的區(qū)別：
v-show 有更高的渲染成本 v-if有更高的切換成本
v-for和v-if的優(yōu)先級
v-for 比 v-if 具有更高的優(yōu)先級
Vue常用的指令
v-if//v-show//v-else//v-for//v-bind//v-on
Vue常用修飾符
.lazy
在默認情況下，v-model 在每次 input 事件觸發(fā)后將輸入框的值與數(shù)據(jù)進行同步 。你可以添加 lazy 修飾符，從而轉(zhuǎn)變?yōu)槭褂?change 事件進行同步：
<!-- 在“change”時而非“input”時更新 -->
<input v-model.lazy="msg" >
.number
如果想自動將用戶的輸入值轉(zhuǎn)為數(shù)值類型，可以給 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>
事件修飾符
<!-- 阻止單擊事件繼續(xù)傳播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯(lián) -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件監(jiān)聽器時使用事件捕獲模式 -->
<!-- 即元素自身觸發(fā)的事件先在此處處理，然后才交由內(nèi)部元素進行處理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只當在 event.target 是當前元素自身時觸發(fā)處理函數(shù) -->
<!-- 即事件不是從內(nèi)部元素觸發(fā)的 -->
<div v-on:click.self="doThat">...</div>
使用修飾符時，順序很重要；相應(yīng)的代碼會以同樣的順序產(chǎn)生。因此，用 v-on:click.prevent.self 會阻止所有的點擊，而 v-on:click.self.prevent 只會阻止對元素自身的點擊。
在監(jiān)聽鍵盤事件時，我們經(jīng)常需要檢查常見的鍵值。Vue 允許為 v-on 在監(jiān)聽鍵盤事件時添加按鍵修飾符：
<!-- 只有在 `keyCode` 是 13 時調(diào)用 `vm.submit()` -->
<input v-on:keyup.13="submit">
記住所有的 keyCode 比較困難，所以 Vue 為最常用的按鍵提供了別名：
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 縮寫語法 -->
<input @keyup.enter="submit">
v-on可以監(jiān)聽多個方法嗎？
可以
vue中key值的作用
key的作用主要是為了高效的更新虛擬DOM。另外vue中在使用相同標簽名元素的過渡切換時，也會使用到key屬性，其目的也是為了讓vue可以區(qū)分它們，否則vue只會替換其內(nèi)部屬性而不會觸發(fā)過渡效果。
用于管理可復(fù)用的元素 因為vue會盡可能高效的渲染，通常會復(fù)用已有元素而不是從頭渲染、
需要使用key來給每個節(jié)點做一個唯一標識，Diff算法就可以正確的識別此節(jié)點，找到正確的位置區(qū)插入新的節(jié)點。
Vue組件中的data為什么必須是函數(shù)
因為組件是要共享的，但他們的data是私有的，所以每個組件都要return一個新的data對象
組件中的data寫成一個函數(shù)，數(shù)據(jù)以函數(shù)返回值形式定義，這樣每復(fù)用一次組件，就會返回一份新的data，類似于給每個組件實例創(chuàng)建一個私有的數(shù)據(jù)空間，讓各個組件實例維護各自的數(shù)據(jù)。
而單純的寫成對象形式，就使得所有組件實例共用了一份data，就會造成一個變了全都會變的結(jié)果。
keep-alive組件的作用？
keep-alive?是 Vue 內(nèi)置的一個組件，可以在組件切換過程中將狀態(tài)保留在內(nèi)存中，防止重復(fù)渲染dom
單頁面應(yīng)用和多頁面應(yīng)用區(qū)別及優(yōu)缺點
單頁面應(yīng)用，通俗一點說就是指只有一個主頁面的應(yīng)用，瀏覽器一開始要加載所有必須的 html, js, css。所有的頁面內(nèi)容都包含在這個所謂的主頁面中。
但在寫的時候，還是會分開寫（頁面片段），然后在交互的時候由路由程序動態(tài)載入，單頁面的頁面跳轉(zhuǎn)，僅刷新局部資源。
多應(yīng)用于pc端。多頁面，就是指一個應(yīng)用中有多個頁面，頁面跳轉(zhuǎn)時是整頁刷新
單頁應(yīng)用? 優(yōu)點：頁面切換快? ?缺點：首屏加載稍慢，seo差；多頁應(yīng)用? ?優(yōu)點：首屏?xí)r間快，seo效果好? 缺點：頁面切換慢
什么是計算屬性？什么情況使用
computed 是vue實例中的計算屬性computed是實時響應(yīng)的，要根據(jù)data里一個值隨時變化做出一些處理時，就需要用conputed去實時計算
computed，methods的區(qū)別？
computed計算屬性的方式在用屬性時不用加(),而methods方式在使用時要像方法一樣去用，必須加()?computed是基于它的依賴緩存，只有相關(guān)依賴發(fā)生改變時才會重新取值。?
methods在重新渲染的時候，函數(shù)總會重新調(diào)用執(zhí)行。
什么是自定義指令，有哪些鉤子函數(shù)及自定義指令的使用場景
有的情況下，你仍然需要對普通 DOM 元素進行底層操作，這時候就會用到自定義指令。
一個指令定義對象可以提供如下幾個鉤子函數(shù) (均為可選)
bind：只調(diào)用一次，指令第一次綁定到元素時調(diào)用。在這里可以進行一次性的初始化設(shè)置。
inserted：被綁定元素插入父節(jié)點時調(diào)用 (僅保證父節(jié)點存在，但不一定已被插入文檔中)。
update：所在組件的 VNode 更新時調(diào)用，但是可能發(fā)生在其子 VNode 更新之前。指令的值可能發(fā)生了改變，也可能沒有。但是你可以通過比較更新前后的值來忽略不必要的模板更新 (詳細的鉤子函數(shù)參數(shù)見下)。
componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用。
unbind：只調(diào)用一次，指令與元素解綁時調(diào)用。
父組件獲取異步動態(tài)數(shù)據(jù)傳遞給子組件，報錯如何解決？
開始的時候讓子組件隱藏,然后等數(shù)據(jù)返回的時候，讓子組件顯示
通過v-if，也就是判斷數(shù)據(jù)是否為空，為空就不渲染，也能解決了
為不能讀取的屬性添加一個默認值，就可以很好的解決了
query和params的區(qū)別
- 地址欄的展現(xiàn)形式不同
? - query：?key=value
? - params:：/value
- 接收方式不同
? - query：this.$route.query
? - params:this.$route.params
- 使用場景的不同
? - query一般用在搜索
? - params一般用在詳情頁
什么是Vuex？詳述Vuex的工作流程
官方介紹：Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。
Vuex其實就是一個Vue的集中狀態(tài)管理工具，類似于redux，但使用方法很明顯優(yōu)化了許多
什么時候使用Vuex？
官方的話說，在你需要用的時候自然而然就知道自己什么時候要用了
在我看來，當項目需要使用公共數(shù)據(jù)，并且這個公共數(shù)據(jù)的訪問量較大的時候，我們可以使用Vuex，用來集中管理公共的數(shù)據(jù)，而一些小型的項目，我們可以靠中央通信總線的發(fā)布訂閱模式來實現(xiàn)數(shù)據(jù)管理與通信
Vuex的工作流程
首先通過dispatch提交一個action
在action中我們可以執(zhí)行一些異步的操作，或者根據(jù)不同的情況分發(fā)不同的mutation
接著在action中調(diào)用commit，觸發(fā)一個mutation
所有修改state的操作，全部應(yīng)該放在mutation中來做
而state更新之后，會調(diào)用Vue的底層方法，通知視圖進行更新渲染
Vuex不像redux，redux在任何項目工程內(nèi)都可以使用，不僅限于react，但是Vuex是基于Vue的底層實現(xiàn)的一個狀態(tài)管理工具，其實Vuex中的store本質(zhì)就是沒有template的隱藏著的vue組件
詳述Vuex的核心屬性及使用
state
state存儲了Vuex的基本數(shù)據(jù)，在state中存儲的數(shù)據(jù)都是經(jīng)過Vue底層watcher偵聽的數(shù)據(jù)，可以實現(xiàn)響應(yīng)式數(shù)據(jù)
actions
actions存放了Vuex中所有的異步操作，可以在actions中通過commit分發(fā)不同的mutation，在不同的情況下執(zhí)行不同的方法
mutations
mutations存放了Vuex中所有關(guān)于state的操作，修改state只能通過mutations，否則的話數(shù)據(jù)不會響應(yīng)式更新
getters
getters就類似與Vue實例中的computed，計算屬性，所有關(guān)于數(shù)據(jù)的復(fù)雜計算應(yīng)該放在getters中來操作
modules
modules，類似于redux中的reducer，每一個module都擁有自己的state、mutations、actions、getters；將整個store根據(jù)功能或者數(shù)據(jù)分解成不同的模塊，最后合并在一個Store中
Vue和Jquery的區(qū)別
Jquery直接操作DOM，使用選擇器以及便捷的DOM操作方式來修改視圖以及數(shù)據(jù)
Vue不直接操作DOM，而是通過雙向數(shù)據(jù)綁定的方式，將DOM節(jié)點在Vue內(nèi)部轉(zhuǎn)化對象的形式，通過修改數(shù)據(jù)直接修改視圖
Jquery是一個前端類庫，只是提供了很多便捷操作DOM的方法，而Vue是一個框架，有一套完整的體系
Vue中的slot是什么？
在Vue中，我們一般使用UI界面來劃分組件，而每一個UI界面可以劃分很多個組件，不同的UI界面中難免會有相似之處，這種相似的地方，我們?nèi)绾瓮ㄟ^一種優(yōu)雅的方式來達到復(fù)用這個UI組件呢？就是使用slot插槽了
slot插槽，其實就是用來做內(nèi)容分發(fā)，使得可以最大程度的復(fù)用組件，達到每次使用同一個組件的時候可以根據(jù)情況創(chuàng)建不同的內(nèi)容的功能
匿名插槽
不具有name屬性的slot就是匿名插槽，也可以叫默認插槽
由父組件提供樣式和內(nèi)容，子組件只負責(zé)顯示
匿名插槽/默認插槽只可以使用一次
<slot>里邊寫的是默認值</slot>
在子組件內(nèi)定義slot時，內(nèi)部可以定義默認值，當父組件有內(nèi)容分發(fā)的時候，顯示父組件的內(nèi)容，沒有的時候，顯示默認內(nèi)容
具名插槽
有name屬性
在組件中可以使用N次（name值不同的情況下）
父組件通過html模板上的slot屬性關(guān)聯(lián)具名插槽
<template v-slot:插槽名稱><div>插槽內(nèi)容</div></template>
沒有slot屬性的html模板默認關(guān)聯(lián)匿名模板
父組件提供樣式和內(nèi)容
<slot name="插槽名稱"></slot>
作用域插槽（帶數(shù)據(jù)的插槽）
父組件只提供樣式，子組件提供內(nèi)容
在slot上面綁定數(shù)據(jù)
子組件的值可以傳給父組件使用
父組件展示子組件數(shù)據(jù)有3種方式：flex顯示、列表顯示、直接顯示
使用v-slot必須使用template;之前使用的是slot-scope，但是這個屬性已經(jīng)在2.6.0廢棄了，現(xiàn)在使用v-slot指令來代替原有的slot-scope屬性
scope返回的值是slot標簽上返回的所有屬性值，并且是一個對象的形式保存起來
// 子組件中// 父組件中{{item}}{{scope.message}}
SPA首屏加載慢，該如何解決？
抽取css文件
使用CDN資源
使用路由模塊化加載
按照頁面或者組件分塊懶加載
使用gzip減小網(wǎng)絡(luò)傳輸?shù)牧髁看笮?/p>
使用服務(wù)端渲染的方式
使用預(yù)渲染的方式
