border下邊框漸變，你遇到的前端面試題都有什么？

1. cookie session 的用途和區別，以及有效期

1、cookie數據存放在客戶的瀏覽器上，session數據放在服務器上。

2、cookie不是很安全，別人可以分析存放在本地的COOKIE并進行COOKIE欺騙

考慮到安全應當使用session。

3、session會在一定時間內保存在服務器上。當訪問增多，會比較占用你服務器的性能

考慮到減輕服務器性能方面，應當使用COOKIE。

4、單個cookie保存的數據不能超過4K，很多瀏覽器都限制一個站點最多保存20個cookie。

2. vue的數據綁定原理，mvvm與mvc的區別

MVVM：

m:model數據模型層 v:view視圖層 vm:ViewModelvue中采用的是mvvm模式，這是從mvc衍生過來的MVVM讓視圖與viewmodel直接的關系特別的緊密，就是為了解決mvc反饋不及時的問題

圖片說明一下：

說到MVVM就要說一下雙向綁定和數據劫持的原理，

MVC：

m:model數據模型層 v:view視圖層 c:controller控制器

原理：c層需要控制model層的數據在view層進行顯示

MVC兩種方式，圖片說明：

總結：

mvvm與mvc最大的區別：MVVM實現了view與model的自動同步，也就是model屬性改變的時候， 我們不需要再自己手動操作dom元素去改變view的顯示，而是改變屬性后該屬性對應的view層會自動改變。

不懂得可以復制鏈接查看：

https://www.pianshen.com/article/3716256399/

3. storage 的區別 sessionStorage localStorage

localStorage的生命周期是永久性的。假若使用localStorage存儲數據，即使關閉瀏覽器，也不會讓數據消失，除非主動的去刪除數據，使用的方法如上所示。localStorage有length屬性

sessionStorage 的生命周期是在瀏覽器關閉前。也就是說，在整個瀏覽器未關閉前，其數據一直都是存在的。sessionStorage也有length屬性，其基本的判斷和使用方法和localStorage的使用是一致的

4.v-model雙向數據原理

有一個文本框 通過v-bind綁定了value屬性 值為myname 是我們在vue實例中定義的屬性傳統我們獲取文本框值方法 可能通過getElementById找到文本框 然后獲取其value屬性但是vue中直接通過v-bind綁定了value屬性 所以不需要像之前那樣獲取值所以在后面的按鈕中獲取name值 直接獲取vue實例對象data里面的myname屬性即可

【數據為尊 ----數據映射到瀏覽器 如果數據v-model后修改（肯定input）然后到數據在有數據映射到瀏覽器頁面 ----映射關系統稱】

5.keepAlive用過嗎？什么作用？

緩存路由組件

使用的是vue的一個組件，參考vue的官方文檔

使用這個東西可以保證我們在切換組件的時候，原來顯示的組件不被銷毀

-----【保障組件的數據不會被切換路由而銷毀數據】

<keep-alive include="Home"> Home是對應的組件對象的名字，不是路由的名字

<router-view></router-view>

</keep-alive>

6.多維數組拍平

數組拍平也稱數組扁平化，就是將數組里面的數組打開，最后合并為一個數組

一紅六種方法吧……

了解的請看：https://www.cnblogs.com/guan-shan/p/10165737.html

7.跨域的原因 解決方案

跨域是指一個域下的文檔或腳本試圖去請求另一個域下的資源，這里跨域是廣義的。

這樣就可以說同源策略----協議---端口---域名

原生的src和href可以解決跨域

代理可以解決

請求頭也可以攜帶瀏覽器提示的也可以解決

一般都是后端解決跨域問題

【別的需要了解看下方鏈接】

https://blog.csdn.net/qq_41604383/article/details/100770100

8.uniApp兼容問題

§ 如果你使用cli創建項目（即項目根目錄是package.json），不管用什么ide，即便是用HBuilderX，切記cli項目的編譯器是在項目下的，HBuilderX不管怎么升級都不會影響編譯器版本。你需要手動npm update來升級編譯器。以及如果你想要安裝less、scss等預編譯器，也需要自己npm安裝在項目下，而不是在HBuilderX的插件管理里安裝。

§ 如果你使用離線打包，請注意HBuilderX升級后，真機運行基座和云打包對應引擎跟隨HBuilderX升級，而你的sdk需要手動升級。sdk的版本升級一般滯后HBuilderX正式版升級一兩天。

§ 如果你使用自定義基座，之前制作的自定義基座是不會跟隨HBuilderX升級的，升級HBuilderX后你應該重新制作新版自定義基座。

§ 如果你使用wgt升級，新版HBuilderX編譯的wgt，運行到之前的runtime上，一定要先測試好，看有沒有兼容性問題。如果有問題，就不要wgt升級，整包升級。

§ 考慮到向下兼容，uni-app編譯器在升級為新的自定義組件模式后，同時保留了對老編譯模式的向下兼容。在HBuilderX alpha版中，App端一定會使用新編譯器，不理會manifest配置。在HBuilderX 正式版中，新創建的項目會使用新編譯器，老項目不會強制使用，而是開發者自己在manifest里配置開啟。

§ 如果你使用其他ide開發uni-app，會經常因為拼錯單詞而運行失敗，因為經過webpack編譯一道，很多錯誤反應的不夠直觀，排錯時間很長，不如從開始就依賴有良好提示的HBuilderX，避免敲錯單詞。

§ 云打包的引擎版本說明HBuilderX Alpha，只有1套云打包機，不管你的HBuilderX alpha版本多少，對應的打包機一定是最新的alpha版的客戶端引擎。HBuilderX正式版，有2套打包機，一個是最新正式版，一個是次新正式版。中間的緊急更新版本沒有獨立打包機。舉個例子：HBuilderX 有1.8.0、1.8.1、1.8.2、1.9.0、1.9.1這幾個正式版。那么當前可用的打包機有1.9.1和1.8.2這2臺。（即每個大版本的最后一個版本）除了這2個HBuilderX版本外，其他版本的云打包都指向最新的1.9.1版對應的打包機。（即只保留2個大版本的云打包機）

【詳情請看】

https://ask.dcloud.net.cn/article/35845

HTML5動畫有什么用途？

HTML5動畫主要服務對象還是給予web的應用，并不會對全部app開發造成威脅，這樣有利于不同類型應用使用不同的開發方式，靈活性更強。利用HTML5開發移動應用的優點主要有以下幾點：

1.離線緩存為HTML5開發移動應用提供了基礎 HTML5WebStorageAPI可以看做是加強版的cookie，不受數據大小限制，有更好的彈性以及架構，可以將數據寫入到本機的ROM中，還可以在關閉瀏覽器后再次打開時恢復數據，以減少網絡流量。 同時，這個功能算得上是另一個方向的后臺“操作記錄”，而不占用任何后臺資源，減輕設備硬件壓力，增加運行流暢性。

2.音頻視頻自由嵌入，多媒體形式更為靈活 原生開發方式對于文字和音視頻混排的多媒體內容處理相對麻煩，需要拆分開文字、圖片、音頻、視頻，解析對應的URL并分別用不同的方式處理。 HTML5在這個方面完全不受限制，可以完全放在一起進行處理。

3.地理定位，隨時隨地分享位置 充分發揮移動設備對定位上的優勢，推動LBS應用發展。 可以綜合使用GPS、wifi、手機等方式讓定位更為精準、靈活。 地理位置定位，讓定位和導航不再專屬導航軟件，地圖也不用下載非常大的地圖包，可以通過緩存來解決，到哪兒下哪兒，更靈活。

4.Canvas繪圖，提升移動平臺的繪圖能力 使用CanvasAPI可以簡單繪制熱點圖收集用戶體驗資料 支持圖片的移動、旋轉、縮放等常規編輯 Canvas–2D的繪圖功能支持 Canvas3D–3D的繪圖功能支持 SVG–向量圖支援

5.專為移動平臺定制的表單元素 瀏覽器中出現的html5表單元素與對應的鍵盤： 只需要簡單的聲明<inputtype=”email”>即可完成對不同樣式鍵盤的調用，簡捷方便。

6.豐富的交互方式支持 提升互動能力：拖拽、撤銷歷史操作、文本選擇等 Transition–組件的移動效果 Transform–組件的變形效果 Animation–將移動和變形加入動畫支持

7.HTML5使用上的優勢 更低的開發及維護成本; 使頁面變得更小，減少了用戶不必要的支出;而且，性能更好使耗電量更低; 方便升級，打開即可使用最新版本，免去重新下載升級包的麻煩，使用過程中就直接更新了離線緩存。

8.CSS3視覺設計師的輔助利器 CSS3支持了字體的嵌入、版面的排版，以及最令人印象深刻的動畫功能。 Selector–更有彈性的選擇器 Webfonts–嵌入式字體 Layout–多樣化的排版選擇 Stlyingradiusgradientshadow–圓角、漸變、陰影 Borderbackground–邊框的背景支持 使用CSS3來完成部分視覺工作，載入速度快，節省代碼及圖片，也為用戶節約了帶寬。

9.實時通訊 以往網站由于HTTP協議以及瀏覽器的設計，實時的互動性相當的受限，只能使用一些技巧來「仿真」實時的通訊效果，但HTML5提供了完善的實時通訊支持。

10.檔案以及硬件支持 不知道大家有沒有發現，在Gmail等新的網頁程序當中，已經可以透過拖拉的方式將檔案作為郵件附件?這就是HTML5檔案的功能中的Drag’nDrop和FileAPI。

11.語意化 語意化的網絡是可以讓計算機能夠更加理解網頁的內容，對于像是搜索引擎的優化(SEO)或是推薦系統可以有很大的幫助。

12.雙平臺融合的app開發方式，提高工作效率 依照目前iPhone/Android迅速提升市占率的情勢來看，未來如果想要在先進的智慧型手機上撰寫應用程式，要不是選擇使用Objective-C+CocoaTouchFramework撰寫iPhone/iPad應用程式，就是選擇Java+AndroidFramework撰寫