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ù)組或正則表達式。只有名稱匹配的組件被緩存。

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

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

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

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

????????因為Keep-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é)議+主機名+端口號(如存在)相同,則允許相互訪問。為了防止某域名下的接口被其他域名下的網(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ào)當(dāng)前腳本的函數(shù)。jsonp是一種常用的跨域手段,和反向代理,服務(wù)端做跨域處理相比,jsonp更顯得方便輕巧?jsonp的缺點只能發(fā)送get請求。因為script只能發(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 只能同源使用的限制

????????????????缺點是:目前所有最新瀏覽器都支持該功能,但是萬惡的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 ,如果想拿到其他的需要使用該字段指定。

? ?。。?!注意:這兩個跨域方案都存在一個致命的缺陷,嚴(yán)重依賴后端的協(xié)助。!?。。?!

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

  ????指以代理服務(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)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

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

友情鏈接更多精彩內(nèi)容