站在月亮上Da? ...
什么是同源策略肠槽？你都知道哪些解決跨域的方法擎淤？
????????同源策略（Same origin policy）是一種約定，它是瀏覽器最核心也最基本的安全功能秸仙，如 ? 果缺少了同源策略嘴拢，則瀏覽器的正常功能可能都會(huì)受到影響〖偶停可以說 Web 是構(gòu)建在同源策略基礎(chǔ)之上的席吴，瀏覽器只是針對(duì)同源策略的一種實(shí)現(xiàn)。
????????所謂同源是指：域名捞蛋、協(xié)議孝冒、端口相同。
????????同源策略又分為以下兩種：
????????????????DOM 同源策略：禁止對(duì)不同源頁面 DOM 進(jìn)行操作拟杉。這里主要場景是 iframe 跨域的情況庄涡，不同域名的 iframe 是限制互相訪問的。
????????????????XMLHttpRequest 同源策略：禁止使用 XHR 對(duì)象向不同源的服務(wù)器地址發(fā)起 HTTP 請(qǐng)求搬设。
????????1.?通過jsonp跨域
????????????????通常為了減輕web服務(wù)器的負(fù)載穴店，我們把js、css拿穴，img等靜態(tài)資源分離到另一臺(tái)獨(dú)立域名的服務(wù)器上泣洞，在html頁面中再通過相應(yīng)的標(biāo)簽從不同域名下加載靜態(tài)資源，而被瀏覽器允許默色，基于此原理球凰，我們可以通過動(dòng)態(tài)創(chuàng)建script，再請(qǐng)求一個(gè)帶參網(wǎng)址實(shí)現(xiàn)跨域通信腿宰。
????????2呕诉、 document.domain + iframe跨域
????????????????此方案僅限主域相同，子域不同的跨域應(yīng)用場景吃度。
????????????????實(shí)現(xiàn)的原理：兩個(gè)頁面都通過js強(qiáng)制設(shè)置document.domain為基礎(chǔ)主域甩挫，就實(shí)現(xiàn)了同域。
????????3规肴、 location.hash + iframe
? ? ? ?????????實(shí)現(xiàn)原理： a欲與b跨域相互通信捶闸，通過中間頁c來實(shí)現(xiàn)夜畴。 三個(gè)頁面拖刃，不同域之間利用iframe的location.hash傳值，相同域之間直接js訪問來通信贪绘。
????????????????具體實(shí)現(xiàn)：A域：a.html -> B域：b.html -> A域：c.html兑牡，a與b不同域只能通過hash值單向通信，b與c也不同域也只能單向通信税灌，但c與a同域均函，所以c可通過parent.parent訪問a頁面所有對(duì)象亿虽。
????????????????實(shí)現(xiàn)的原理： a欲與b跨域相互通信，通過中間頁c來實(shí)現(xiàn)苞也。 三個(gè)頁面洛勉，不同域之間利用iframe的location.hash傳值，相同域之間直接js訪問來通信如迟。
????????????????具體實(shí)現(xiàn)：A域：a.html -> B域：b.html -> A域：c.html收毫，a與b不同域只能通過hash值單向通信，b與c也不同域也只能單向通信殷勘，但c與a同域此再，所以c可通過parent.parent訪問a頁面所有對(duì)象。
????????4玲销、 window.name + iframe跨域
????????????????window.name屬性的獨(dú)特之處：name值在不同的頁面（甚至不同域名）加載后依舊存在输拇，并且可以支持非常長的 name 值（2MB）。
????????5贤斜、 postMessage跨域
????????????????postMessage是HTML5 XMLHttpRequest Level 2中的API策吠，且是為數(shù)不多可以跨域操作的window屬性之一，它可用于解決以下方面的問題：
????????????????????????a.） 頁面和其打開的新窗口的數(shù)據(jù)傳遞
????????????????????????b.） 多窗口之間消息傳遞
????????????????????????c.） 頁面與嵌套的iframe消息傳遞
????????????????????????d.） 上面三個(gè)場景的跨域數(shù)據(jù)傳遞
????????????????用法：postMessage(data,origin)方法接受兩個(gè)參數(shù)
????????????????data： html5規(guī)范支持任意基本類型或可復(fù)制的對(duì)象蠢古，但部分瀏覽器只支持字符串奴曙，所以傳參時(shí)最好用JSON.stringify()序列化。
????????????????origin： 協(xié)議+主機(jī)+端口號(hào)草讶，也可以設(shè)置為"*"洽糟，表示可以傳遞給任意窗口，如果要指定和當(dāng)前窗口同源的話設(shè)置為"/"堕战。
????????6坤溃、 跨域資源共享（CORS）
????????????????普通跨域請(qǐng)求：只服務(wù)端設(shè)置Access-Control-Allow-Origin即可，前端無須設(shè)置嘱丢，若要帶cookie請(qǐng)求：前后端都需要設(shè)置薪介。
????????????????需注意的是：由于同源策略的限制，所讀取的cookie為跨域請(qǐng)求接口所在域的cookie越驻，而非當(dāng)前頁汁政。如果想實(shí)現(xiàn)當(dāng)前頁cookie的寫入，可參考下文：七缀旁、nginx反向代理中設(shè)置proxy_cookie_domain 和 八记劈、NodeJs中間件代理中cookieDomainRewrite參數(shù)的設(shè)置。
????????????????目前并巍，所有瀏覽器都支持該功能(IE8+：IE8/9需要使用XDomainRequest對(duì)象來支持CORS）)目木，CORS也已經(jīng)成為主流的跨域解決方案。
????????7懊渡、 nginx代理跨域
????????????????跨域原理： 同源策略是瀏覽器的安全策略刽射，不是HTTP協(xié)議的一部分军拟。服務(wù)器端調(diào)用HTTP接口只是使用HTTP協(xié)議，不會(huì)執(zhí)行JS腳本誓禁，不需要同源策略懈息，也就不存在跨越問題。
????????????????實(shí)現(xiàn)思路：通過nginx配置一個(gè)代理服務(wù)器（域名與demo1相同摹恰，端口不同）做跳板機(jī)漓拾，反向代理訪問demo2接口，并且可以順便修改cookie中demo信息戒祠，方便當(dāng)前域cookie寫入骇两，實(shí)現(xiàn)跨域登錄。
????????8姜盈、 nodejs中間件代理跨域
????????????????node中間件實(shí)現(xiàn)跨域代理低千，原理大致與nginx相同，都是通過啟一個(gè)代理服務(wù)器馏颂，實(shí)現(xiàn)數(shù)據(jù)的轉(zhuǎn)發(fā)示血，也可以通過設(shè)置cookieDomainRewrite參數(shù)修改響應(yīng)頭中cookie中域名，實(shí)現(xiàn)當(dāng)前域的cookie寫入救拉，方便接口登錄認(rèn)證难审。
????????9、 WebSocket協(xié)議跨域
????????????????WebSocket protocol是HTML5一種新的協(xié)議亿絮。它實(shí)現(xiàn)了瀏覽器與服務(wù)器全雙工通信告喊，同時(shí)允許跨域通訊，是server push技術(shù)的一種很好的實(shí)現(xiàn)派昧。
????????????????原生WebSocket API使用起來不太方便黔姜，我們使用Socket.io，它很好地封裝了webSocket接口蒂萎，提供了更簡單秆吵、靈活的接口，也對(duì)不支持webSocket的瀏覽器提供了向下兼容五慈。
列舉JavaScript的基本數(shù)據(jù)類型和引用數(shù)據(jù)類型
? ? ? ? 基本數(shù)據(jù)類型 (?按值訪問 ) ：
? ? ? ? ? ? ? ? number?纳寂、string?、null?泻拦、undefined ?毙芜、Boolean?、Symbol (new in ES 6)
? ? ? ? ? ? ? ? 基本數(shù)據(jù)存儲(chǔ)在棧（stack）中聪轿，是按值訪問的...
1 ????var a=10;?
2 ????var b=a;?
3 ????b=20;?
4???? console.log(a)???????? // 結(jié)果 a = 10
? ? ? ? 引用數(shù)據(jù)類型?(按引用訪問?)?：
? ? ? ? ? ? ? ? 對(duì)象Object爷肝、數(shù)組Array 猾浦、函數(shù)Function陆错、Date等
? ??????????????引用數(shù)據(jù)類型是保存在堆（heap）中的對(duì)象
? ? ? ? ? ? ? ? （ 它不能直接訪問堆內(nèi)存中的位置和操作堆內(nèi)存空間灯抛，只能操作對(duì)象在棧內(nèi)存中的引用地址 )
var obj1 = new Object();?
var obj2 = obj1;
?obj2.username = "我不是李白";
?console.log(obj1.username); //? 結(jié)果??‘我不是李白 ’
Vue2.0的生命周期有哪些？分別解釋其意思
? ??????創(chuàng)建Create
????????????????創(chuàng)建前????????beforeCreate()
????????????????創(chuàng)建后????????created()????從可以修改data數(shù)據(jù)
????????掛載Mount
????????????????掛載前????????beforeMount()????正在加載數(shù)據(jù)
????????????????掛載后????????mounted()? ? ajax請(qǐng)求
????????修改Update
????????????????修改前????????beforeUpdate()
????????????????修改后????????updated()
????????銷毀Destroy
????????????????銷毀前????????beforeDestory()????彈窗組件 關(guān)閉前
????????????????銷毀后????????destoryed()????彈窗組件 關(guān)閉后
詳述組件通信
? ? ? ? 父傳子 ：?
? ??????????????在父組件的組件標(biāo)簽上通過v-bind綁定要傳遞的數(shù)據(jù)音瓷，然后在子組件內(nèi)部通過props接收
????????// 父組件
????????????????????<select-list :dataList="dataArr" @parentReceive="changeVal"/>
????????// 子組件
????????????????????props: ['dataList']
? ? ? ? 子傳父?：
? ??????????????在子組件中定義一個(gè)方法对嚼，然后在方法里面通過this.$emit進(jìn)行傳遞($emit有兩個(gè)參數(shù)(自定義事件名稱，要傳遞的數(shù)據(jù)))绳慎；
? ??????????????// select-list組件 - 子組件selectVal (val) { // 第一步 this.$emit('parentReceive', val) // 第一個(gè)參數(shù)：自定義事件名稱纵竖；第二個(gè)參數(shù)要傳遞的數(shù)據(jù)}
? ??????????????在父組件的子組件標(biāo)簽上通過@自定義事件名稱監(jiān)聽，然后通過回調(diào)函數(shù)去處理響應(yīng)的邏輯
? ??// 父組件?
????????<template>?
? ??????????????????<select-list :dataList="dataArr" @parentReceive="changeVal"/>?
? ??????</template>?
? ? ? ? ?<script>?
? ??????????????????????changeVal (val) {?
? ??????????????????????????????console.log(`我是子組件傳遞過來的數(shù)據(jù)${val}`)
? ? ? ? ? ? ? ? ? ? ??}?
? ? ? ? ?</script>? ??
? ? ? ? 兄弟傳值：
? ? ? ? ? ? ? ? ? ?A? 傳 父? 杏愤，? 父 傳 B
? ? ? ? 中央通信（跨組件通信）：
? ??????????????????在要傳遞數(shù)據(jù)的組件通過$emit(自定義事件名稱靡砌，要傳遞的數(shù)據(jù))
?// select - list?
? ? ? ? ? ? import? bus? from'../../main'
????????????selectVal (val) {? ? ?
????????????????????bus.$emit('reveive', val)? ?
????????????}
????????????????????在目標(biāo)組件通過$on進(jìn)行監(jiān)聽接收$on('自定義事件名稱', 回調(diào)函數(shù))
// select - input
????????????import? bus? from? '../../main'
????????????bus.$on('reveive', val => {
????????????????????console.log(val)
????????????????????this.value = val
????????????})
????????????????????PS：$emit & $on都要掛載到Vue空實(shí)例上，而這個(gè)空實(shí)例要全局使用因此需要在main.js創(chuàng)建
// main.js
let? bus =? new? Vue()
exportdefault bus
詳述導(dǎo)航守衛(wèi)
????概念
? ? ? ? ? ?導(dǎo)航發(fā)生變化時(shí)珊楼，導(dǎo)航鉤子主要用來攔截導(dǎo)航通殃，讓它完成跳轉(zhuǎn)或取消
????首先他們?nèi)慷加腥齻€(gè)參數(shù)
????????????to：這是你要跳去的路由對(duì)象。
????????????from：這是你要離開的路由對(duì)象厕宗。
????????????next：是一個(gè)方法画舌，它接受參數(shù)。這個(gè)方法必須調(diào)用要不就跳不過去了已慢，你可以把它看做保安曲聂。必須給它打個(gè)招呼，要不然不讓你過佑惠。
????全局的
? ? ? ? ? ? beforeEach - 前置鉤子函數(shù)? ?（ 使用場景?-?未登錄去下單朋腋，跳轉(zhuǎn)到登錄頁 ）
? ? ? ? ? ? afterEach - 后置鉤子函數(shù)?? ?(?使用場景?-?改變?yōu)g覽器title )
? ? 單路由獨(dú)享
? ? ? ? ? ? beforeEnter??
? ? 組件級(jí)????
? ? ? ? ? ? beforeRouteEnter?- 進(jìn)入組件前 （?使用場景 - 進(jìn)入這個(gè)組件前你要做什么初始化操作?）
? ? ? ? ? ? beforeRouteUpdate - 組件更新或改變時(shí)? (?使用場景 - 復(fù)用組件時(shí)（對(duì)于一個(gè)帶有動(dòng)態(tài)參數(shù)的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時(shí)候 ）
? ??????????beforeRouteLeave - 離開組件時(shí)? (?使用場景 - 清除定時(shí)器等等 )
v-show和v-if有什么區(qū)別膜楷？及使用場景
????????????v-if 用于 DOM 節(jié)點(diǎn) 滿足條件是它才會(huì)進(jìn)行一個(gè)渲染內(nèi)容
????????????v-show 用于點(diǎn)擊頻繁的位置 乍丈，實(shí)際是就是 一個(gè)標(biāo)簽區(qū)域內(nèi)容的 顯示和隱藏? ? ? ??
v-for和v-if的優(yōu)先級(jí)
? ? ? ? ? ?當(dāng)它們處于同一節(jié)點(diǎn)，v-for?的優(yōu)先級(jí)比?v-if?更高把将，這意味著?v-if?將分別重復(fù)運(yùn)行于每個(gè)?v-for?循環(huán)中轻专。當(dāng)你想為僅有的一些項(xiàng)渲染節(jié)點(diǎn)時(shí)，這種優(yōu)先級(jí)的機(jī)制會(huì)十分有用
? ??????????????
