web前端面試題@二(Keeplive井联、V-show和v-if的區(qū)別、同源策略及跨域)

一您旁、詳述Keeplive組件————

? ??⑴.為什么要使用keep-alive烙常?

????????????在vue中,我們使用component內(nèi)置組件或者vue-router切換視圖的時候被冒,由于vue會主動卸載不使用的組件军掂,所以我們不能保存組件之前的狀態(tài),而我們經(jīng)常能遇到需要保存之前狀態(tài)的需求昨悼,例如:搜索頁(保存搜索記錄)蝗锥,列表頁(保存之前的瀏覽記錄)等等。

????⑵.keep-alive的作用率触?

????????????Keep-alive是一個vue的內(nèi)置組件终议,它能將不活動的組件保存下來,而不是直接銷毀葱蝗,當(dāng)我們再次訪問這個組件的時候穴张,會先從keep-alive中存儲的組件中尋找,如果有緩存的話两曼,直接渲染之前緩存的皂甘,如果沒有的話,再加載對應(yīng)的組件悼凑。

????????????作為抽象組件偿枕,keep-alive是不會直接渲染在DOM中的。

????⑶.Keep-alive的屬性户辫?

????????Keep-alive提供了三種可選屬性

????????Include-字符串或數(shù)組或正則表達(dá)式渐夸。只有名稱匹配的組件被緩存。

????????Exclude -字符串或數(shù)組或正則表達(dá)式渔欢。名稱匹配的組件不會被緩存墓塌。

????????Max -數(shù)字類型。表示最多可以緩存多少組件實(shí)例奥额。

????⑷.對于keep-alive需要知道的事情苫幢?

????????Keep-alive提供了兩個生命鉤子,分別是activated與 deactivated垫挨。

????????因?yàn)镵eep-alive會將組件保存在內(nèi)存中态坦,并不會銷毀以及重新創(chuàng)建,所以不會重新調(diào)用組件的created等方法棒拂,需要用activated與deactivated這兩個生命鉤子來得知當(dāng)前組件是否處于活動狀態(tài)。

二、V-show和v-if的區(qū)別帚屉?

????????V-show有較高的渲染成本谜诫,

????????V-if有較高的切換成本。


????????V-if是真正的條件渲染攻旦,確保切換過程中條件內(nèi)的事件監(jiān)聽器和子組件適當(dāng)?shù)谋讳N毀和重建喻旷。

????????V-show的元素始終被渲染并保存在dom中,操作的只是display屬性控制演示影藏牢屋。

三且预、同源策略及跨域?

????(1).同源策略

????????源(origin)—— 就是協(xié)議烙无、域名和端口號锋谐。若地址里面的協(xié)議、域名和端口號均相同則屬于同源截酷。

????????同源策略——同源策略是瀏覽器的一個安全功能,不同源的客戶端腳本在沒有明確授權(quán)的情況下,不能讀寫對方資源岸晦。所以a.com下的js腳本采用ajax讀取b.com里面的文件數(shù)據(jù)是會報錯的弃揽。

????不受同源策略限制的

????????????1.頁面中的鏈接,重定向以及表單提交是不會受到同源策略限制的三幻。

????????????2.跨域資源的引入是可以的就漾。但是js不能讀寫加載的內(nèi)容。如嵌入到頁面中的<script src="..."></script>念搬,<img>抑堡,<link>,<iframe>等锁蠕。

? (2).跨域

 ? ? ?跨域——只要協(xié)議夷野、域名、端口號有一個不同就是跨域荣倾。

? ? ? ? 跨域的原因悯搔?(只做了解)

  跨域問題來源于JavaScript的同源策略,即只有 協(xié)議+主機(jī)名+端口號(如存在)相同舌仍,則允許相互訪問妒貌。為了防止某域名下的接口被其他域名下的網(wǎng)頁非法調(diào)用,是瀏覽器對JavaScript施加的安全限制铸豁。也就是說JavaScript只能訪問和操作自己域下的資源灌曙,不能訪問和操作其他域下的資源〗诮妫跨域問題是針對JS和ajax的在刺,html本身沒有跨域問題逆害,比如a標(biāo)簽、script標(biāo)簽蚣驼、甚至form標(biāo)簽(可以直接跨域發(fā)送數(shù)據(jù)并接收數(shù)據(jù))等魄幕。

? ?(3).跨域問題解決方案

? ? ? ?1、 Jsonp——

????????????????利用script標(biāo)簽可跨域的特點(diǎn)颖杏,在跨域腳本中可以直接回調(diào)當(dāng)前腳本的函數(shù)纯陨。jsonp是一種常用的跨域手段,和反向代理留储,服務(wù)端做跨域處理相比翼抠,jsonp更顯得方便輕巧?jsonp的缺點(diǎn)只能發(fā)送get請求。因?yàn)閟cript只能發(fā)送get請求需要后臺配合获讳。此種請求方式應(yīng)該前后端配合阴颖,將返回結(jié)果包裝成callback(result)的形式。

? ? ? ?2赔嚎、 Cors——

????????????????服務(wù)器設(shè)置HTTP響應(yīng)頭中Access-Control-Allow-Origin值膘盖,解除跨域限制。CORS 是一個W3C標(biāo)準(zhǔn),全稱是"跨域資源共享"(Cross-origin resource sharing)尤误,他允許瀏覽器向跨源服務(wù)器發(fā)送XMLHttpRequest請求侠畔,從而克服 AJAX 只能同源使用的限制

????????????????缺點(diǎn)是:目前所有最新瀏覽器都支持該功能,但是萬惡的IE不能低于10

Access-Control-Allow-Origin 這個字段是必須的,表示接受那些域名的請求(*為所有)损晤、Access-Control-Allow-Credentials 該字段可選, 表示是否可以發(fā)送cookie软棺、Access-Control-Expose-Headers 該字段可選,XHMHttpRequest對象的方法只能夠拿到六種字段: Cache-Control、Content-Language尤勋、Content-Type喘落、Expires、Last-Modified最冰、Pragma ,如果想拿到其他的需要使用該字段指定瘦棋。

? !E凇6呐蟆!注意:這兩個跨域方案都存在一個致命的缺陷篇裁,嚴(yán)重依賴后端的協(xié)助沛慢。!4锊肌M偶住!黍聂!

? ? ? ?3躺苦、反向代理(Reverse Proxy){前端獨(dú)立就能解決的跨域方案}——

  ????指以代理服務(wù)器來接受internet上的連接請求身腻,然后將請求轉(zhuǎn)發(fā)給內(nèi)部網(wǎng)絡(luò)上的服務(wù)器,并將從服務(wù)器上得到的結(jié)果返回給internet上請求連接的客戶端圾另,此時代理服務(wù)器對外就表現(xiàn)為一個反向代理服務(wù)器霸株。


? ??

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市集乔,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌坡椒,老刑警劉巖扰路,帶你破解...
    沈念sama閱讀 221,695評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異倔叼,居然都是意外死亡汗唱,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,569評論 3 399
  • 文/潘曉璐 我一進(jìn)店門丈攒,熙熙樓的掌柜王于貴愁眉苦臉地迎上來哩罪,“玉大人,你說我怎么就攤上這事巡验〖什澹” “怎么了?”我有些...
    開封第一講書人閱讀 168,130評論 0 360
  • 文/不壞的土叔 我叫張陵显设,是天一觀的道長框弛。 經(jīng)常有香客問我,道長捕捂,這世上最難降的妖魔是什么瑟枫? 我笑而不...
    開封第一講書人閱讀 59,648評論 1 297
  • 正文 為了忘掉前任,我火速辦了婚禮指攒,結(jié)果婚禮上慷妙,老公的妹妹穿的比我還像新娘。我一直安慰自己允悦,他們只是感情好膝擂,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,655評論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著澡屡,像睡著了一般猿挚。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上驶鹉,一...
    開封第一講書人閱讀 52,268評論 1 309
  • 那天绩蜻,我揣著相機(jī)與錄音,去河邊找鬼室埋。 笑死办绝,一個胖子當(dāng)著我的面吹牛伊约,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播孕蝉,決...
    沈念sama閱讀 40,835評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼屡律,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了降淮?” 一聲冷哼從身側(cè)響起超埋,我...
    開封第一講書人閱讀 39,740評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎佳鳖,沒想到半個月后霍殴,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,286評論 1 318
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡系吩,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,375評論 3 340
  • 正文 我和宋清朗相戀三年来庭,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片穿挨。...
    茶點(diǎn)故事閱讀 40,505評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡月弛,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出科盛,到底是詐尸還是另有隱情帽衙,我是刑警寧澤,帶...
    沈念sama閱讀 36,185評論 5 350
  • 正文 年R本政府宣布土涝,位于F島的核電站佛寿,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏但壮。R本人自食惡果不足惜冀泻,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,873評論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望蜡饵。 院中可真熱鬧弹渔,春花似錦、人聲如沸溯祸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,357評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽焦辅。三九已至博杖,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間筷登,已是汗流浹背剃根。 一陣腳步聲響...
    開封第一講書人閱讀 33,466評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留前方,地道東北人狈醉。 一個月前我還...
    沈念sama閱讀 48,921評論 3 376
  • 正文 我出身青樓廉油,卻偏偏與公主長得像,于是被迫代替她去往敵國和親苗傅。 傳聞我的和親對象是個殘疾皇子抒线,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,515評論 2 359

推薦閱讀更多精彩內(nèi)容

  • 跨域資源共享 CORS 對于web開發(fā)來講,由于瀏覽器的同源策略渣慕,我們需要經(jīng)常使用一些hack的方法去跨域獲取資源...
    默默先生Alec閱讀 591評論 0 0
  • HTML5有哪些新特性嘶炭?如何處理HTML5新標(biāo)簽的瀏覽器兼容問題?如何區(qū)分HTML和HTML5摇庙?新特性繪畫 can...
    郝晨光閱讀 3,220評論 1 35
  • 什么是跨域 跨域旱物,是指瀏覽器不能執(zhí)行其他網(wǎng)站的腳本。它是由瀏覽器的同源策略造成的卫袒,是瀏覽器對JavaScript實(shí)...
    Yaoxue9閱讀 1,301評論 0 6
  • 什么是跨域 跨域,是指瀏覽器不能執(zhí)行其他網(wǎng)站的腳本单匣。它是由瀏覽器的同源策略造成的夕凝,是瀏覽器對JavaScript實(shí)...
    他方l閱讀 1,064評論 0 2
  • 你不是末等生,你是一等兵户秤。 萬事總要欠缺一些码秉,才能持恒。 做人與做事鸡号,首先要真誠转砖。 做一個簡單的人,不沉迷于幻想鲸伴、...
    i亦非陌閱讀 269評論 0 0