HTML5有哪些新特性诈豌？如何處理HTML5新標(biāo)簽的瀏覽器兼容問(wèn)題婆翔？如何區(qū)分HTML和HTML5姥宝？

*HTML5 現(xiàn)在已經(jīng)不是 SGML(標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言爸业，是一種定義電子文檔結(jié)構(gòu)和描述其內(nèi)容的國(guó)際標(biāo)準(zhǔn)語(yǔ)言) 的子集其骄，主要是關(guān)于圖像，位置扯旷，存儲(chǔ)拯爽，多任務(wù)等功能的增加。

*拖拽釋放(Drag and drop) API

? 語(yǔ)義化更好的內(nèi)容標(biāo)簽（header,nav,footer,aside,article,section）

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

? 畫(huà)布(Canvas) API

? 地理(Geolocation) API

? 本地離線(xiàn)存儲(chǔ) localStorage 長(zhǎng)期存儲(chǔ)數(shù)據(jù)毯炮，瀏覽器關(guān)閉后數(shù)據(jù)不丟失；

? sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除

*支持HTML5新標(biāo)簽：

* IE8/IE7/IE6支持通過(guò)document.createElement方法產(chǎn)生的標(biāo)簽耸黑，

? 可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽桃煎，

? 瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J(rèn)的樣式：

* 當(dāng)然最好的方式是直接使用成熟的框架大刊、使用最多的是html5shim框架

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

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

? <![endif]-->

*如何區(qū)分： DOCTYPE聲明\新增的結(jié)構(gòu)元素\功能元素

css3中的transform有哪些屬性备禀？分別用來(lái)實(shí)現(xiàn)什么效果？

*transform 可用于內(nèi)聯(lián)(inline)元素和塊級(jí)(block)元素，它有幾個(gè)屬性值參數(shù)：

translate 位移：基于 X 和 Y 坐標(biāo)重新定位元素曲尸，當(dāng)使用一個(gè)參數(shù)時(shí)表示 X 軸和 Y 軸的參數(shù)相同赋续，效果類(lèi)似 position:relative 。

scale 縮放：可以讓任一元素變大另患、變小纽乱。它使用一個(gè)或者兩個(gè)正數(shù)和負(fù)數(shù)以及小數(shù)作為參數(shù)，當(dāng)使用一個(gè)參數(shù)時(shí)表示 X 軸和 Y 軸的縮放相同昆箕。

rotate 旋轉(zhuǎn)：通過(guò)傳遞一個(gè)度數(shù)值來(lái)轉(zhuǎn)動(dòng)一個(gè)對(duì)象鸦列。

skew 傾斜：參數(shù)是度數(shù)，當(dāng)使用一個(gè)參數(shù)時(shí)表示 X 軸和 Y 軸的參數(shù)相同鹏倘。

matrix 矩陣變換：基于 X 和 Y 坐標(biāo)重新定位元素薯嗤，它使用 6 個(gè)參數(shù)。

localStorage纤泵、sessionStorage骆姐、cookie有什么區(qū)別？

*sessionStorage用于本地存儲(chǔ)一個(gè)會(huì)話(huà)（session）中的數(shù)據(jù)捏题，這些數(shù)據(jù)只有在同一個(gè)會(huì)話(huà)中的頁(yè)面才能訪(fǎng)問(wèn)并且當(dāng)會(huì)話(huà)結(jié)束后數(shù)據(jù)也隨之銷(xiāo)毀玻褪。

因此sessionStorage不是一種持久化的本地存儲(chǔ)，僅僅是會(huì)話(huà)級(jí)別的存儲(chǔ)公荧。

而localStorage用于持久化的本地存儲(chǔ)带射，除非主動(dòng)刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠(yuǎn)不會(huì)過(guò)期的循狰。

localstorage和cookie的區(qū)別

localStorage的概念和cookie相似窟社，區(qū)別是它是為了更大容量存儲(chǔ)設(shè)計(jì)的。

Cookie的大小是受限的绪钥，并且每次你請(qǐng)求一個(gè)新的頁(yè)面的時(shí)候Cookie都會(huì)被發(fā)送過(guò)去桥爽，這樣無(wú)形中浪費(fèi)了帶寬，另外cookie還需要指定作用域昧识，不可以跨域調(diào)用。

除此之外盗扒，localStorage擁有setItem,getItem,removeItem,clear等方法跪楞，不像cookie需要前端開(kāi)發(fā)者自己封裝setCookie，getCookie侣灶。

但是Cookie也是不可以或缺的：Cookie的作用是與服務(wù)器進(jìn)行交互甸祭，作為HTTP規(guī)范的一部分而存在，而localStorage僅僅是為了在本地“存儲(chǔ)”數(shù)據(jù)而生褥影。

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

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

可以說(shuō)Web是構(gòu)建在同源策略基礎(chǔ)之上的寨典，瀏覽器只是針對(duì)同源策略的一種實(shí)現(xiàn)氛雪。

當(dāng)一個(gè)瀏覽器的兩個(gè)tab頁(yè)中分別打開(kāi)來(lái) 百度和谷歌的頁(yè)面當(dāng)瀏覽器的百度tab頁(yè)執(zhí)行一個(gè)腳本的時(shí)候會(huì)檢查這個(gè)腳本是屬于哪個(gè)頁(yè)面的，即檢查是否同源耸成，只有和百度同源的腳本才會(huì)被執(zhí)行报亩。

如果非同源，那么在請(qǐng)求數(shù)據(jù)時(shí)井氢，瀏覽器會(huì)在控制臺(tái)中報(bào)一個(gè)異常弦追，提示拒絕訪(fǎng)問(wèn)。

同源

域名花竞、協(xié)議劲件、端口相同，也就是在同一個(gè)域里左胞。

JSONP的基本原理 動(dòng)態(tài)添加一個(gè)<script>標(biāo)簽寇仓，而script標(biāo)簽的src屬性是沒(méi)有跨域的限制的。

CORS（跨域資源共享）

圖像 Ping 跨域

document.domain 跨域

服務(wù)器代理

window.name 跨域

location.hash 跨域

postMessage 跨域

列舉JavaScript的基本數(shù)據(jù)類(lèi)型和引用數(shù)據(jù)類(lèi)型

Number烤宙、String 遍烦、Boolean、Null和Undefined躺枕》恚基本數(shù)據(jù)類(lèi)型是按值訪(fǎng)問(wèn)的，因?yàn)榭梢灾苯硬僮鞅４嬖谧兞恐械膶?shí)際值拐云。

引用類(lèi)型數(shù)據(jù)：也就是對(duì)象類(lèi)型Object type罢猪，比如：Object 、Array 叉瘩、Function 膳帕、Data等

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

1.beforeCreate

創(chuàng)建前的狀態(tài)(創(chuàng)建實(shí)例前薇缅，vue實(shí)例的屬性值為undefined)危彩。

2.created

實(shí)例創(chuàng)建完成后(data被定義了，但el屬性為undefined)泳桦。然而汤徽，掛載階段還沒(méi)開(kāi)始，$el屬性目前不可見(jiàn)灸撰。

3.beforeMount

掛鉤前(DOM渲染前)谒府，el屬性已經(jīng)拿到對(duì)應(yīng)的DOM元素拼坎。

4.mounted

掛載結(jié)束(Dom渲染完成，el屬性的Dom的數(shù)據(jù)將被渲染)完疫，對(duì)已有dom節(jié)點(diǎn)的操作可以在這期間進(jìn)行泰鸡。

5.beforeUpdate

數(shù)據(jù)變化前的調(diào)用。

6.updated

數(shù)據(jù)變化后的鉤子趋惨。

7.beforeDestroy

實(shí)例銷(xiāo)毀之前調(diào)用鸟顺。在這一步，實(shí)例仍然完全可用器虾。

8.destroyed

Vue 實(shí)例銷(xiāo)毀后調(diào)用讯嫂。調(diào)用后，Vue 實(shí)例指示的所有東西都會(huì)解綁定兆沙，所有的事件監(jiān)聽(tīng)器會(huì)被移除欧芽，所有的子實(shí)例也會(huì)被銷(xiāo)毀。

詳述組件通信

父組件傳值給子組件

1葛圃、給子組件綁定一個(gè)自定義屬性用來(lái)掛載父組件的變量

2千扔、在子組件中用props來(lái)接受自定義屬性? props:['屬性1'，‘屬性2’……]

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

子組件傳值給父組件

在子組件中調(diào)用父組件的方法

1曲楚、給父組件創(chuàng)建方法

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

3褥符、在子組件的方法中 調(diào)用父組件的方法

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

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

路由鉤子函數(shù)（導(dǎo)航守衛(wèi)）

概念

導(dǎo)航發(fā)生變化時(shí)，導(dǎo)航鉤子主要用來(lái)攔截導(dǎo)航喷楣，讓它完成跳轉(zhuǎn)或取消

攔截方式

全局的

beforeEach - 前置鉤子函數(shù)

參數(shù)to趟大、from、next

to：去哪里

from：從哪里

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

使用場(chǎng)景 - 未登錄去下單铣焊，跳轉(zhuǎn)到登錄頁(yè)

afterEach - 后置鉤子函數(shù)

參數(shù)to逊朽、from

to:去哪里

from:從哪來(lái)

使用場(chǎng)景 - 改變?yōu)g覽器title

單個(gè)路由獨(dú)享的

beforeEnter

參數(shù)to、from曲伊、next

同beforeEach

組件級(jí)的

beforeRouteEnter - 進(jìn)入組件前

參數(shù)to叽讳、from、next

同beforeEach

使用場(chǎng)景 - 進(jìn)入這個(gè)組件前你要做什么初始化操作

beforeRouteUpdate - 組件更新或改變時(shí)

參數(shù)to坟募、from岛蚤、next

同beforeEach

使用場(chǎng)景 - 復(fù)用組件時(shí)（對(duì)于一個(gè)帶有動(dòng)態(tài)參數(shù)的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時(shí)候）

beforeRouteLeave - 離開(kāi)組件時(shí)

參數(shù)to婿屹、from、next

同beforeEach

使用場(chǎng)景 - 清除定時(shí)器等等

v-show和v-if有什么區(qū)別推溃？及使用場(chǎng)景

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)先級(jí)

v-for 比 v-if 具有更高的優(yōu)先級(jí)

Vue常用的指令

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

Vue常用修飾符

.lazy

在默認(rèn)情況下昂利，v-model 在每次 input 事件觸發(fā)后將輸入框的值與數(shù)據(jù)進(jìn)行同步 届腐。你可以添加 lazy 修飾符，從而轉(zhuǎn)變?yōu)槭褂?change 事件進(jìn)行同步：

<!-- 在“change”時(shí)而非“input”時(shí)更新 -->

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

.number

如果想自動(dòng)將用戶(hù)的輸入值轉(zhuǎn)為數(shù)值類(lèi)型蜂奸，可以給 v-model 添加 number 修飾符

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

.trim

如果要自動(dòng)過(guò)濾用戶(hù)輸入的首尾空白字符犁苏，可以給 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>

<!-- 提交事件不再重載頁(yè)面 -->

<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)聽(tīng)器時(shí)使用事件捕獲模式 -->

<!-- 即元素自身觸發(fā)的事件先在此處處理，然后才交由內(nèi)部元素進(jìn)行處理 -->

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

<!-- 只當(dāng)在 event.target 是當(dāng)前元素自身時(shí)觸發(fā)處理函數(shù) -->

<!-- 即事件不是從內(nèi)部元素觸發(fā)的 -->

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

使用修飾符時(shí)扩所，順序很重要围详；相應(yīng)的代碼會(huì)以同樣的順序產(chǎn)生。因此祖屏，用 v-on:click.prevent.self 會(huì)阻止所有的點(diǎn)擊助赞，而 v-on:click.self.prevent 只會(huì)阻止對(duì)元素自身的點(diǎn)擊。

在監(jiān)聽(tīng)鍵盤(pán)事件時(shí)袁勺，我們經(jīng)常需要檢查常見(jiàn)的鍵值雹食。Vue 允許為 v-on 在監(jiān)聽(tīng)鍵盤(pán)事件時(shí)添加按鍵修飾符：

<!-- 只有在 `keyCode` 是 13 時(shí)調(diào)用 `vm.submit()` -->

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

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

<!-- 同上 -->

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

<!-- 縮寫(xiě)語(yǔ)法 -->

<input @keyup.enter="submit">

v-on可以監(jiān)聽(tīng)多個(gè)方法嗎期丰？

可以

vue中key值的作用

key的作用主要是為了高效的更新虛擬DOM群叶。另外vue中在使用相同標(biāo)簽名元素的過(guò)渡切換時(shí)，也會(huì)使用到key屬性钝荡，其目的也是為了讓vue可以區(qū)分它們街立，否則vue只會(huì)替換其內(nèi)部屬性而不會(huì)觸發(fā)過(guò)渡效果。

用于管理可復(fù)用的元素 因?yàn)関ue會(huì)盡可能高效的渲染埠通，通常會(huì)復(fù)用已有元素而不是從頭渲染赎离、

需要使用key來(lái)給每個(gè)節(jié)點(diǎn)做一個(gè)唯一標(biāo)識(shí)，Diff算法就可以正確的識(shí)別此節(jié)點(diǎn)植阴，找到正確的位置區(qū)插入新的節(jié)點(diǎn)蟹瘾。

Vue組件中的data為什么必須是函數(shù)

因?yàn)榻M件是要共享的，但他們的data是私有的掠手，所以每個(gè)組件都要return一個(gè)新的data對(duì)象

組件中的data寫(xiě)成一個(gè)函數(shù)憾朴，數(shù)據(jù)以函數(shù)返回值形式定義，這樣每復(fù)用一次組件喷鸽，就會(huì)返回一份新的data众雷，類(lèi)似于給每個(gè)組件實(shí)例創(chuàng)建一個(gè)私有的數(shù)據(jù)空間，讓各個(gè)組件實(shí)例維護(hù)各自的數(shù)據(jù)做祝。

而單純的寫(xiě)成對(duì)象形式砾省，就使得所有組件實(shí)例共用了一份data，就會(huì)造成一個(gè)變了全都會(huì)變的結(jié)果混槐。

keep-alive組件的作用编兄？

keep-alive?是 Vue 內(nèi)置的一個(gè)組件，可以在組件切換過(guò)程中將狀態(tài)保留在內(nèi)存中声登，防止重復(fù)渲染dom

單頁(yè)面應(yīng)用和多頁(yè)面應(yīng)用區(qū)別及優(yōu)缺點(diǎn)

單頁(yè)面應(yīng)用狠鸳，通俗一點(diǎn)說(shuō)就是指只有一個(gè)主頁(yè)面的應(yīng)用揣苏，瀏覽器一開(kāi)始要加載所有必須的 html, js, css。所有的頁(yè)面內(nèi)容都包含在這個(gè)所謂的主頁(yè)面中件舵。

但在寫(xiě)的時(shí)候卸察，還是會(huì)分開(kāi)寫(xiě)（頁(yè)面片段），然后在交互的時(shí)候由路由程序動(dòng)態(tài)載入铅祸，單頁(yè)面的頁(yè)面跳轉(zhuǎn)坑质，僅刷新局部資源。

多應(yīng)用于pc端临梗。多頁(yè)面涡扼，就是指一個(gè)應(yīng)用中有多個(gè)頁(yè)面，頁(yè)面跳轉(zhuǎn)時(shí)是整頁(yè)刷新

單頁(yè)應(yīng)用? 優(yōu)點(diǎn)：頁(yè)面切換快? ?缺點(diǎn)：首屏加載稍慢夜焦，seo差壳澳；多頁(yè)應(yīng)用? ?優(yōu)點(diǎn)：首屏?xí)r間快，seo效果好? 缺點(diǎn)：頁(yè)面切換慢

什么是計(jì)算屬性茫经？什么情況使用

computed 是vue實(shí)例中的計(jì)算屬性computed是實(shí)時(shí)響應(yīng)的巷波，要根據(jù)data里一個(gè)值隨時(shí)變化做出一些處理時(shí)，就需要用conputed去實(shí)時(shí)計(jì)算

computed卸伞，methods的區(qū)別抹镊？

computed計(jì)算屬性的方式在用屬性時(shí)不用加(),而methods方式在使用時(shí)要像方法一樣去用，必須加()?computed是基于它的依賴(lài)緩存荤傲，只有相關(guān)依賴(lài)發(fā)生改變時(shí)才會(huì)重新取值垮耳。?

methods在重新渲染的時(shí)候，函數(shù)總會(huì)重新調(diào)用執(zhí)行遂黍。

什么是自定義指令终佛，有哪些鉤子函數(shù)及自定義指令的使用場(chǎng)景

有的情況下，你仍然需要對(duì)普通 DOM 元素進(jìn)行底層操作雾家，這時(shí)候就會(huì)用到自定義指令铃彰。

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

bind：只調(diào)用一次，指令第一次綁定到元素時(shí)調(diào)用芯咧。在這里可以進(jìn)行一次性的初始化設(shè)置牙捉。

inserted：被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用 (僅保證父節(jié)點(diǎn)存在，但不一定已被插入文檔中)敬飒。

update：所在組件的 VNode 更新時(shí)調(diào)用邪铲，但是可能發(fā)生在其子 VNode 更新之前。指令的值可能發(fā)生了改變无拗，也可能沒(méi)有带到。但是你可以通過(guò)比較更新前后的值來(lái)忽略不必要的模板更新 (詳細(xì)的鉤子函數(shù)參數(shù)見(jiàn)下)。

componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用英染。

unbind：只調(diào)用一次揽惹，指令與元素解綁時(shí)調(diào)用晌纫。

父組件獲取異步動(dòng)態(tài)數(shù)據(jù)傳遞給子組件，報(bào)錯(cuò)如何解決永丝？

開(kāi)始的時(shí)候讓子組件隱藏,然后等數(shù)據(jù)返回的時(shí)候，讓子組件顯示

通過(guò)v-if箭养，也就是判斷數(shù)據(jù)是否為空慕嚷，為空就不渲染，也能解決了

為不能讀取的屬性添加一個(gè)默認(rèn)值毕泌，就可以很好的解決了

query和params的區(qū)別

- 地址欄的展現(xiàn)形式不同

? - query：?key=value

? - params:：/value

- 接收方式不同

? - query：this.$route.query

? - params:this.$route.params

- 使用場(chǎng)景的不同

? - query一般用在搜索

? - params一般用在詳情頁(yè)

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

官方介紹：Vuex 是一個(gè)專(zhuān)為 Vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)撼泛，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化挠说。

Vuex其實(shí)就是一個(gè)Vue的集中狀態(tài)管理工具，類(lèi)似于redux愿题，但使用方法很明顯優(yōu)化了許多

什么時(shí)候使用Vuex损俭？

官方的話(huà)說(shuō)，在你需要用的時(shí)候自然而然就知道自己什么時(shí)候要用了

在我看來(lái)潘酗，當(dāng)項(xiàng)目需要使用公共數(shù)據(jù)杆兵，并且這個(gè)公共數(shù)據(jù)的訪(fǎng)問(wèn)量較大的時(shí)候，我們可以使用Vuex仔夺，用來(lái)集中管理公共的數(shù)據(jù)琐脏，而一些小型的項(xiàng)目，我們可以靠中央通信總線(xiàn)的發(fā)布訂閱模式來(lái)實(shí)現(xiàn)數(shù)據(jù)管理與通信

Vuex的工作流程

首先通過(guò)dispatch提交一個(gè)action

在action中我們可以執(zhí)行一些異步的操作缸兔，或者根據(jù)不同的情況分發(fā)不同的mutation

接著在action中調(diào)用commit日裙，觸發(fā)一個(gè)mutation

所有修改state的操作，全部應(yīng)該放在mutation中來(lái)做

而state更新之后惰蜜，會(huì)調(diào)用Vue的底層方法昂拂，通知視圖進(jìn)行更新渲染

Vuex不像redux，redux在任何項(xiàng)目工程內(nèi)都可以使用蝎抽，不僅限于react政钟，但是Vuex是基于Vue的底層實(shí)現(xiàn)的一個(gè)狀態(tài)管理工具，其實(shí)Vuex中的store本質(zhì)就是沒(méi)有template的隱藏著的vue組件

詳述Vuex的核心屬性及使用

state

state存儲(chǔ)了Vuex的基本數(shù)據(jù)樟结，在state中存儲(chǔ)的數(shù)據(jù)都是經(jīng)過(guò)Vue底層watcher偵聽(tīng)的數(shù)據(jù)养交，可以實(shí)現(xiàn)響應(yīng)式數(shù)據(jù)

actions

actions存放了Vuex中所有的異步操作，可以在actions中通過(guò)commit分發(fā)不同的mutation瓢宦，在不同的情況下執(zhí)行不同的方法

mutations

mutations存放了Vuex中所有關(guān)于state的操作碎连，修改state只能通過(guò)mutations，否則的話(huà)數(shù)據(jù)不會(huì)響應(yīng)式更新

getters

getters就類(lèi)似與Vue實(shí)例中的computed驮履，計(jì)算屬性鱼辙，所有關(guān)于數(shù)據(jù)的復(fù)雜計(jì)算應(yīng)該放在getters中來(lái)操作

modules

modules廉嚼，類(lèi)似于redux中的reducer，每一個(gè)module都擁有自己的state倒戏、mutations怠噪、actions、getters杜跷；將整個(gè)store根據(jù)功能或者數(shù)據(jù)分解成不同的模塊傍念，最后合并在一個(gè)Store中

Vue和Jquery的區(qū)別

Jquery直接操作DOM，使用選擇器以及便捷的DOM操作方式來(lái)修改視圖以及數(shù)據(jù)

Vue不直接操作DOM葛闷，而是通過(guò)雙向數(shù)據(jù)綁定的方式憋槐，將DOM節(jié)點(diǎn)在Vue內(nèi)部轉(zhuǎn)化對(duì)象的形式，通過(guò)修改數(shù)據(jù)直接修改視圖

Jquery是一個(gè)前端類(lèi)庫(kù)淑趾，只是提供了很多便捷操作DOM的方法阳仔，而Vue是一個(gè)框架，有一套完整的體系

Vue中的slot是什么扣泊？

在Vue中近范，我們一般使用UI界面來(lái)劃分組件，而每一個(gè)UI界面可以劃分很多個(gè)組件延蟹，不同的UI界面中難免會(huì)有相似之處顺又，這種相似的地方，我們?nèi)绾瓮ㄟ^(guò)一種優(yōu)雅的方式來(lái)達(dá)到復(fù)用這個(gè)UI組件呢等孵？就是使用slot插槽了

slot插槽稚照，其實(shí)就是用來(lái)做內(nèi)容分發(fā)，使得可以最大程度的復(fù)用組件俯萌，達(dá)到每次使用同一個(gè)組件的時(shí)候可以根據(jù)情況創(chuàng)建不同的內(nèi)容的功能

匿名插槽

不具有name屬性的slot就是匿名插槽果录，也可以叫默認(rèn)插槽

由父組件提供樣式和內(nèi)容，子組件只負(fù)責(zé)顯示

匿名插槽/默認(rèn)插槽只可以使用一次

<slot>里邊寫(xiě)的是默認(rèn)值</slot>

在子組件內(nèi)定義slot時(shí)咐熙，內(nèi)部可以定義默認(rèn)值弱恒，當(dāng)父組件有內(nèi)容分發(fā)的時(shí)候，顯示父組件的內(nèi)容棋恼，沒(méi)有的時(shí)候返弹，顯示默認(rèn)內(nèi)容

具名插槽

有name屬性

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

父組件通過(guò)html模板上的slot屬性關(guān)聯(lián)具名插槽

<template v-slot:插槽名稱(chēng)><div>插槽內(nèi)容</div></template>

沒(méi)有slot屬性的html模板默認(rèn)關(guān)聯(lián)匿名模板

父組件提供樣式和內(nèi)容

<slot name="插槽名稱(chēng)"></slot>

作用域插槽（帶數(shù)據(jù)的插槽）

父組件只提供樣式，子組件提供內(nèi)容

在slot上面綁定數(shù)據(jù)

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

父組件展示子組件數(shù)據(jù)有3種方式：flex顯示爪飘、列表顯示义起、直接顯示

使用v-slot必須使用template;之前使用的是slot-scope，但是這個(gè)屬性已經(jīng)在2.6.0廢棄了师崎，現(xiàn)在使用v-slot指令來(lái)代替原有的slot-scope屬性

scope返回的值是slot標(biāo)簽上返回的所有屬性值默终，并且是一個(gè)對(duì)象的形式保存起來(lái)

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

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

抽取css文件

使用CDN資源

使用路由模塊化加載

按照頁(yè)面或者組件分塊懶加載

使用gzip減小網(wǎng)絡(luò)傳輸?shù)牧髁看笮?/p>

使用服務(wù)端渲染的方式

使用預(yù)渲染的方式