1.什么是同源策略湾盒？你都知道哪些解決跨域的方法湿右？

同源策略（Same origin policy）是一種約定，它是瀏覽器最核心也最基本的安全功能罚勾，如 ? 果缺少了同源策略毅人，則瀏覽器的正常功能可能都會受到影響〖庋辏可以說 Web 是構(gòu)建在同源策略基礎(chǔ)之上的丈莺，瀏覽器只是針對同源策略的一種實現(xiàn)。

所謂同源是指：域名送丰、協(xié)議缔俄、端口相同。

同源策略又分為以下兩種：

DOM 同源策略：禁止對不同源頁面 DOM 進行操作蚪战。這里主要場景是 iframe 跨域的情況牵现，不同域名的 iframe 是限制互相訪問的。

XMLHttpRequest 同源策略：禁止使用 XHR 對象向不同源的服務(wù)器地址發(fā)起 HTTP 請求邀桑。

1.?通過jsonp跨域

通常為了減輕web服務(wù)器的負載瞎疼，我們把js、css壁畸，img等靜態(tài)資源分離到另一臺獨立域名的服務(wù)器上贼急，在html頁面中再通過相應的標簽從不同域名下加載靜態(tài)資源茅茂，而被瀏覽器允許，基于此原理太抓，我們可以通過動態(tài)創(chuàng)建script空闲，再請求一個帶參網(wǎng)址實現(xiàn)跨域通信。

2走敌、 document.domain + iframe跨域

此方案僅限主域相同碴倾，子域不同的跨域應用場景。

實現(xiàn)原理：兩個頁面都通過js強制設(shè)置document.domain為基礎(chǔ)主域掉丽，就實現(xiàn)了同域跌榔。

3、 location.hash + iframe

實現(xiàn)原理： a欲與b跨域相互通信捶障，通過中間頁c來實現(xiàn)僧须。 三個頁面，不同域之間利用iframe的location.hash傳值项炼，相同域之間直接js訪問來通信担平。

具體實現(xiàn)：A域：a.html -> B域：b.html -> A域：c.html，a與b不同域只能通過hash值單向通信锭部，b與c也不同域也只能單向通信暂论，但c與a同域，所以c可通過parent.parent訪問a頁面所有對象拌禾。

實現(xiàn)原理： a欲與b跨域相互通信空另，通過中間頁c來實現(xiàn)。 三個頁面蹋砚，不同域之間利用iframe的location.hash傳值，相同域之間直接js訪問來通信摄杂。

具體實現(xiàn)：A域：a.html -> B域：b.html -> A域：c.html坝咐，a與b不同域只能通過hash值單向通信，b與c也不同域也只能單向通信析恢，但c與a同域墨坚，所以c可通過parent.parent訪問a頁面所有對象。

4映挂、 window.name + iframe跨域

window.name屬性的獨特之處：name值在不同的頁面（甚至不同域名）加載后依舊存在泽篮，并且可以支持非常長的 name 值（2MB）。

5柑船、 postMessage跨域

postMessage是HTML5 XMLHttpRequest Level 2中的API帽撑，且是為數(shù)不多可以跨域操作的window屬性之一，它可用于解決以下方面的問題：

a.） 頁面和其打開的新窗口的數(shù)據(jù)傳遞

b.） 多窗口之間消息傳遞

c.） 頁面與嵌套的iframe消息傳遞

d.） 上面三個場景的跨域數(shù)據(jù)傳遞

用法：postMessage(data,origin)方法接受兩個參數(shù)

data： html5規(guī)范支持任意基本類型或可復制的對象鞍时，但部分瀏覽器只支持字符串亏拉，所以傳參時最好用JSON.stringify()序列化扣蜻。

origin： 協(xié)議+主機+端口號，也可以設(shè)置為"*"及塘，表示可以傳遞給任意窗口莽使，如果要指定和當前窗口同源的話設(shè)置為"/"。

6笙僚、 跨域資源共享（CORS）

普通跨域請求：只服務(wù)端設(shè)置Access-Control-Allow-Origin即可芳肌，前端無須設(shè)置，若要帶cookie請求：前后端都需要設(shè)置肋层。

需注意的是：由于同源策略的限制亿笤，所讀取的cookie為跨域請求接口所在域的cookie，而非當前頁槽驶。如果想實現(xiàn)當前頁cookie的寫入责嚷，可參考下文：七、nginx反向代理中設(shè)置proxy_cookie_domain 和 八掂铐、NodeJs中間件代理中cookieDomainRewrite參數(shù)的設(shè)置罕拂。

目前，所有瀏覽器都支持該功能(IE8+：IE8/9需要使用XDomainRequest對象來支持CORS）)全陨，CORS也已經(jīng)成為主流的跨域解決方案爆班。

7、 nginx代理跨域

跨域原理： 同源策略是瀏覽器的安全策略辱姨，不是HTTP協(xié)議的一部分柿菩。服務(wù)器端調(diào)用HTTP接口只是使用HTTP協(xié)議，不會執(zhí)行JS腳本雨涛，不需要同源策略枢舶，也就不存在跨越問題。

實現(xiàn)思路：通過nginx配置一個代理服務(wù)器（域名與demo1相同替久，端口不同）做跳板機凉泄，反向代理訪問demo2接口，并且可以順便修改cookie中demo信息蚯根，方便當前域cookie寫入后众，實現(xiàn)跨域登錄。

8颅拦、 nodejs中間件代理跨域

node中間件實現(xiàn)跨域代理蒂誉，原理大致與nginx相同，都是通過啟一個代理服務(wù)器距帅，實現(xiàn)數(shù)據(jù)的轉(zhuǎn)發(fā)右锨，也可以通過設(shè)置cookieDomainRewrite參數(shù)修改響應頭中cookie中域名，實現(xiàn)當前域的cookie寫入碌秸，方便接口登錄認證陡蝇。

9痊臭、 WebSocket協(xié)議跨域

WebSocket protocol是HTML5一種新的協(xié)議。它實現(xiàn)了瀏覽器與服務(wù)器全雙工通信登夫，同時允許跨域通訊广匙，是server push技術(shù)的一種很好的實現(xiàn)。

原生WebSocket API使用起來不太方便恼策，我們使用Socket.io鸦致，它很好地封裝了webSocket接口，提供了更簡單涣楷、靈活的接口分唾，也對不支持webSocket的瀏覽器提供了向下兼容。

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

beforeCreate：組件實例化在創(chuàng)建之前绽乔，屬性綁定之前，只是一個空殼碳褒，無法訪問到數(shù)據(jù)和真實的dom和data折砸。

created：組件實例創(chuàng)建完成，屬性綁定完成沙峻，但是dom未綁定睦授。可以獲取到初始數(shù)據(jù)摔寨，可以使用數(shù)據(jù)去枷，也可以更改數(shù)據(jù)，但是不會觸發(fā)updated函數(shù)是复。

beforeMount：模塊編譯删顶，事件掛載之前，變異模塊將虛擬dom放在render函數(shù)中準備渲染淑廊，可以更改數(shù)據(jù)翼闹，但不會觸發(fā)updated函數(shù)。

mounted：模塊開始編譯蒋纬，事件也掛載好了，組件坚弱，數(shù)據(jù)蜀备，真實的dom都渲染執(zhí)行。

beforeUpdate：組件更新之前荒叶，vue的虛擬dom機制會重新構(gòu)建虛擬dom與上一次的虛擬dom樹利用diff算法進行對比之后重新渲染碾阁。

updated：組件更新后，數(shù)據(jù)已經(jīng)更改完成些楣，dom也重新render完成脂凶。

beforeDestory：組件銷毀之前宪睹，做一些善后工作，例如清除計時器蚕钦、清除非指令綁定的事件等等亭病。

destoryed：組件銷毀后，數(shù)據(jù)的綁定嘶居，事件監(jiān)聽等全部去除罪帖。

答案

什么是Vue的生命周期

Vue實例有一個完整的生命周期，也就是說從開始創(chuàng)建邮屁、初始化數(shù)據(jù)整袁、編譯模板、掛載DOM佑吝、渲染-更新-渲染坐昙、卸載等一系列過程，我們稱為Vue實例的生命周期芋忿。鉤子就是在某個階段給你一個做某些處理的機會炸客。

生命周期的作用

就是在某個階段給你一個做某些處理的機會。

生命周期總共有幾個階段

beforeCreate（創(chuàng)建前）：在實例初始化之后盗飒，數(shù)據(jù)觀測和事件配置之前被調(diào)用嚷量，此時組件的選項對象還未創(chuàng)建，因此無法訪問methods逆趣，data蝶溶，computed等上的方法和數(shù)據(jù)。

created（創(chuàng)建后）：實例已經(jīng)創(chuàng)建完成之后被調(diào)用宣渗，在這一步抖所，實例已完成了以下配置：數(shù)據(jù)觀測、屬性和方法的運算痕囱，watch/event事件回調(diào)田轧。然而，掛載階段還沒有開始鞍恢，$el屬性目前不可見傻粘。created鉤子可以獲取Vue的data，調(diào)用Vue方法帮掉，獲取原本HTML上的直接加載出來的DOM弦悉，但是無法獲取到通過掛載模板生成的DOM。這是一個常用的生命周期蟆炊，因為你可以調(diào)用methods中的方法稽莉、改變data中的數(shù)據(jù)，并且修改可以通過vue的響應式綁定體現(xiàn)在頁面上涩搓、獲取computed中的計算屬性等等污秆。通常我們可以在這里對實例進行預處理劈猪。也有一些童鞋喜歡在這里發(fā)ajax請求，值得注意的是良拼，這個周期中是沒有什么方法來對實例化過程進行攔截的战得。因此假如有某些數(shù)據(jù)必須獲取才允許進入頁面的話，并不適合在這個頁面發(fā)請求将饺。

建議在組件路由勾子beforeRouteEnter中來完成贡避。

beforeMonut：掛載開始之前被調(diào)用：虛擬dom已經(jīng)創(chuàng)建完成，馬上就要渲染予弧，在這里也可以更改數(shù)據(jù)刮吧，相關(guān)的 render 函數(shù)首次被調(diào)用（虛擬DOM），實例已完成以下的配置：編譯模板掖蛤，把data里面的數(shù)據(jù)和模板生成html杀捻。注意此時還沒有掛載html到頁面上。

mounted[?ma?nt?d]：掛載完成蚓庭，也就是模板中的HTML渲染到了HTML頁面中致讥，此時一般可以做一些ajax操作，組件已經(jīng)出現(xiàn)在頁面中器赞，數(shù)據(jù)垢袱、真實dom都已經(jīng)處理好了，事件都已經(jīng)掛載好了mounted只會執(zhí)行一次港柜。

beforeUpdate（更新前）：在數(shù)據(jù)更新之前調(diào)用请契，發(fā)生在虛擬DOM重新渲染和打補丁之前∠淖恚可以在該鉤子中進一步地更改狀態(tài)爽锥，不會觸發(fā)附加的重渲染過程。然后vue的虛擬dom機制會重新構(gòu)建虛擬dom與上一次的虛擬dom樹利用diff算法進行對比之后重新渲染畔柔。

updated[?p'de?t?d]（更新后）：在由于數(shù)據(jù)更改導致的虛擬DOM重新渲染和打補丁之后調(diào)用氯夷。調(diào)用時，組件DOM已經(jīng)更新靶擦，所以可以執(zhí)行依賴于DOM的操作腮考。然而在大多數(shù)情況下，應該避免在此期間更改狀態(tài)玄捕，因為這可能會導致更新無限循環(huán)踩蔚。該鉤子在服務(wù)器端渲染期間不被調(diào)用。

beforeDestroy[d??str??]（銷毀前）：在實例銷毀之前調(diào)用桩盲。實例仍然完全可用。1.這一步還可以用this來獲取實例席吴。2.一般在這一步做一些重置的操作赌结。比如清除掉組件中的 定時器 和 監(jiān)聽的dom事件捞蛋。

destroyed[d?s'tr??d]（銷毀后）：在實例銷毀之后調(diào)用。調(diào)用后柬姚，所有的事件監(jiān)聽器會被移除拟杉，所有的子實例也會被銷毀。該鉤子在服務(wù)器端渲染期間不被調(diào)用量承。

第一次頁面加載會觸發(fā)哪幾個鉤子

beforeCreate

DOM 渲染在哪個周期中就已經(jīng)完成

mounted

生命周期使用場景舉例

beforeCreate：可以在這里加一個loading

created：loading結(jié)束做一些初始化操作

mounted：ajax請求搬设，配合路由鉤子做一些事情

beforeDestory：你確認刪除嗎？

3.詳述組件通信

父子通信 ： 關(guān)鍵之 props

父組件 v-bind:自定義名 =‘要傳的值’

子組件 props:['自定義名']

子父通信 ： 利用? 傳$emit

子組件 v-on:click="chuan()"? 傳給父組件

methods: {

? ? ? ? ? ? ? ? chuan() {

? ? ? ? ? ? ? ? ? ? this.$emit("自定義事件名", 要傳遞的數(shù)據(jù))

? ? ? ? ? }

? ? ? ? }

父組件 <zi v-on:子組件自定義事件名="自定義方法名"></zi>

methods: {

? ? ? 自定義方法(res) {

? ? ? ? ? ? ? ? ? ? console.log(res);

? ? ? ? ? ? ? ? ? ? this.b = res;

? ? ? ? }

}

兄弟通信 ： 利用 先創(chuàng)建vue實例 $emit? 取$on

let bus = new Vue();創(chuàng)建vue實例

兄弟組件 v-on:click="chuan()" 傳數(shù)據(jù) 用事件方法

? methods: {

? ? ? ? ? ? ? ? chuan() {

? ? ? ? ? ? ? ? ? ? bus.$emit("自定義名",要傳遞的數(shù)據(jù))

? ? ? ? ? }

? }

? 兄弟組

? mounted() {

? ? ? ? ? ? ? bus.$on("兄弟的自定義名", (x) => {

? ? ? ? ? ? ? ? ? console.log(x);

? ? ? ? ? ? ? ? ? this.b = x;

? ? ? ? ? })

? }

4.詳述導航守衛(wèi)

router.beforeEach注冊一個全局前置守衛(wèi)：

當一個導航觸發(fā)時撕捍，全局前置守衛(wèi)按照創(chuàng)建順序調(diào)用涯呻。守衛(wèi)是異步解析執(zhí)行玷坠，此時導航在所有守衛(wèi) resolve 完之前一直處于等待中。每個守衛(wèi)方法接收三個參數(shù)：

to：這是要跳去的路由對象。

from：這是要離開的路由對象咽笼。

next：是一個方法，它接受參數(shù)杨名。這個方法必須調(diào)用要不就跳不過去了雁刷，你可以把它看做保安。必須給它打個招呼缘厢，要不然不讓你過吃度。

導航被觸發(fā)。在失活的組件里調(diào)用離開守衛(wèi)贴硫。調(diào)用全局的beforeEach守衛(wèi)椿每。在重用的組件里調(diào)用beforeRouteUpdate守衛(wèi) (2.2+)。在路由配置里調(diào)用beforeEnter夜畴。解析異步路由組件拖刃。在被激活的組件里調(diào)用beforeRouteEnter。調(diào)用全局的beforeResolve守衛(wèi) (2.5+)贪绘。導航被確認兑牡。調(diào)用全局的afterEach鉤子。觸發(fā) DOM 更新税灌。用創(chuàng)建好的實例調(diào)用beforeRouteEnter守衛(wèi)中傳給next的回調(diào)函數(shù)均函。

beforeRouteEnter? beforeRouteUpdate(2.2 新增) beforeRouteLeave

beforeRouteEnter守衛(wèi)不能訪問this，因為守衛(wèi)在導航確認前被調(diào)用,因此即將登場的新組件還沒被創(chuàng)建菱涤。不過苞也，你可以通過傳一個回調(diào)給next來訪問組件實例。在導航被確認的時候執(zhí)行回調(diào)粘秆，并且把組件實例作為回調(diào)方法的參數(shù)如迟。

注意beforeRouteEnter是支持給next傳遞回調(diào)的唯一守衛(wèi)。對于beforeRouteUpdate和beforeRouteLeave來說，this已經(jīng)可用了殷勘，所以不支持傳遞回調(diào)此再，因為沒有必要了。

這個離開守衛(wèi)通常用來禁止用戶在還未保存修改前突然離開玲销。該導航可以通過next(false)來取消输拇。

1 全局守衛(wèi)。router.beforeEach

to：這是你要跳去的路由對象贤斜。

from：這是你要離開的路由對象策吠。

next：是一個方法，它接受參數(shù)瘩绒。這個方法必須調(diào)用要不就跳不過去了猴抹，你可以把它看做保安。必須給它打個招呼草讶，要不然不讓你過洽糟。

next（）。這就是告訴保安我要過去堕战，去哪里呢坤溃？ 就是to了。

next（false）嘱丢。如果傳入false薪介。保安就不讓過了。也就是中斷跳轉(zhuǎn)越驻。

next（{path：“/”}）汁政。這個意思是保安不讓過，并把你交到另一地方審查了缀旁。也就是中斷跳轉(zhuǎn)记劈，跳轉(zhuǎn)到一個新的路徑。

2 全局后置鉤子?router.afterEach

鉤子不會接受?next函數(shù)也不會改變導航本身并巍。這個可以看做保安的狗子目木，它不管你去哪里，也不會攔你懊渡，比較可愛刽射。當然你也可以使用to和from對象

?3路由獨享守衛(wèi)。beforeEnter

這個守衛(wèi)是寫在路由里面的剃执，只有當進入這個路由時才會調(diào)用的誓禁，這些守衛(wèi)與全局前置守衛(wèi)的方法參數(shù)是一樣的。

4 組件內(nèi)守衛(wèi) beforeRouteEnter肾档，beforeRouteUpdate摹恰，beforeRouteLeave

這三個守衛(wèi)是寫在組件里辫继，beforeRouteEnter守衛(wèi)?不能?訪問?this，因為守衛(wèi)在導航確認前被調(diào)用,因此即將登場的新組件還沒被創(chuàng)建俗慈。

不過骇两，你可以通過傳一個回調(diào)給?next來訪問組件實例。在導航被確認的時候執(zhí)行回調(diào)姜盈，并且把組件實例作為回調(diào)方法的參數(shù)。其他兩個都可以用this配阵。

5.v-show和v-if有什么區(qū)別馏颂？及使用場景

v-if是通過控制dom節(jié)點的存在與否來控制元素的顯隱；v-show是通過設(shè)置DOM元素的display樣式棋傍，block為顯示救拉，none為隱藏；

v-if切換有一個局部編譯/卸載的過程瘫拣，切換過程中合適地銷毀和重建內(nèi)部的事件監(jiān)聽和子組件亿絮；v-show只是簡單的基于css切換；

v-if是惰性的麸拄，如果初始條件為假派昧，則什么也不做；只有在條件第一次變?yōu)檎鏁r才開始局部編譯（編譯被緩存拢切？編譯被緩存后蒂萎，然后再切換的時候進行局部卸載); v-show是在任何條件下（首次條件是否為真）都被編譯，然后被緩存淮椰，而且DOM元素保留五慈；

v-if有更高的切換消耗；v-show有更高的初始渲染消耗主穗；

如果需要非常頻繁地切換泻拦，則使用 v-show 較好；如果在運行時條件很少改變忽媒，則使用 v-if 較好争拐。

總結(jié)

v-if判斷是否加載，可以減輕服務(wù)器的壓力猾浦，在需要時加載,但有更高的切換開銷;v-show調(diào)整DOM元素的CSS的dispaly屬性陆错，可以使客戶端操作更加流暢，但有更高的初始渲染開銷金赦。如果需要非常頻繁地切換音瓷，則使用 v-show 較好；如果在運行時條件很少改變夹抗，則使用 v-if 較好绳慎。

6.v-for和v-if的優(yōu)先級

當它們處于同一節(jié)點，v-for 的優(yōu)先級比 v-if 更高，這意味著 v-if 將分別重復運行于每個 v-for 循環(huán)中杏愤。當你想為僅有的一些項渲染節(jié)點時靡砌，這種優(yōu)先級的機制會十分有用。