vue-面試

1.單頁面應用與多頁面應用的去別

2.簡述一下Sass、Less，且說明區別？

他們是動態的樣式語言，是CSS預處理器,CSS上的一種抽象層。他們是一種特殊的語法/語言而編譯成CSS。
變量符不同，less是@，而Sass是$;
Sass支持條件語句，可使用if{}else{},for{}循環等等。而Less不支持;
Sass是基於Ruby的，是在服務端處理的，而Less是須要引入less.js來處理Less代碼輸出Css到瀏覽器

3.Vue的雙向數據綁定原理是什麼？

vue.js 是採用數據劫持結合發佈者-訂閱者模式的方式，經過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變更時發佈消息給訂閱者，觸發相應的監聽回調。

具體步驟：

第一步：須要observe的數據對象進行遞歸遍歷，包括子屬性對象的屬性，都加上 setter和getter
這樣的話，給這個對象的某個值賦值，就會觸發setter，那麼就能監聽到了數據變化

第二步：compile解析模板指令，將模板中的變量替換成數據，而後初始化渲染頁面視圖，並將每一個指令對應的節點綁定更新函數，添加監聽數據的訂閱者，一旦數據有變更，收到通知，更新視圖

第三步：Watcher訂閱者是Observer和Compile之間通訊的橋樑，主要作的事情是:
一、在自身實例化時往屬性訂閱器(dep)裏面添加本身
二、自身必須有一個update()方法
三、待屬性變更dep.notice()通知時，能調用自身的update()方法，並觸發Compile中綁定的回調，則功成身退。

第四步：MVVM做爲數據綁定的入口，整合Observer、Compile和Watcher三者，經過Observer來監聽本身的model數據變化，經過Compile來解析編譯模板指令，最終利用Watcher搭起Observer和Compile之間的通訊橋樑，達到數據變化 -> 視圖更新；視圖交互變化(input) -> 數據model變動的雙向綁定效果。

4.什麼是vue生命週期？

Vue 實例從建立到銷燬的過程，就是生命週期。也就是從開始建立、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過程，咱們稱這是 Vue 的生命週期。

5.vue生命週期的做用是什麼？

它的生命週期中有多個事件鉤子，讓咱們在控制整個Vue實例的過程時更容易造成好的邏輯。

6.vue生命週期總共有幾個階段？

它能夠總共分爲8個階段：建立前/後, 載入前/後,更新前/後,銷燬前/銷燬後

第一次頁面加載會觸發哪幾個鉤子？

第一次頁面加載時會觸發 beforeCreate, created, beforeMount, mounted 這幾個鉤子

DOM 渲染在 哪一個週期中就已經完成？

DOM 渲染在 mounted 中就已經完成了

7.簡單描述每一個週期具體適合哪些場景？

生命週期鉤子的一些使用方法：
beforecreate : 能夠在這加個loading事件，在加載實例時觸發
created : 初始化完成時的事件寫在這裏，如在這結束loading事件，異步請求也適宜在這裏調用 mounted : 掛載元素，獲取到DOM節點
updated : 若是對數據統一處理，在這裏寫上相應函數
beforeDestroy : 能夠作一個確認中止事件的確認框 nextTick : 更新數據後當即操做dom

8.cancas和SVG的是什麼以及區別

SVG

SVG 是一種使用 XML 描述 2D 圖形的語言。
SVG 基於 XML，這意味着 SVG DOM 中的每一個元素都是可用的。您能夠爲某個元素附加 JavaScript 事件處理器。
在 SVG 中，每一個被繪製的圖形均被視爲對象。若是 SVG 對象的屬性發生變化，那麼瀏覽器可以自動重現圖形。

Canvas

Canvas 經過 JavaScript 來繪製 2D 圖形。
Canvas 是逐像素進行渲染的。
在 canvas 中，一旦圖形被繪製完成，它就不會繼續獲得瀏覽器的關注。若是其位置發生變化，那麼整個場景也須要從新繪製，包括任何或許已被圖形覆蓋的對象。

Canvas 與 SVG 的比較

Canvas

依賴分辨率
不支持事件處理器
弱的文本渲染能力
可以以 .png 或 .jpg 格式保存結果圖像
最適合圖像密集型的遊戲，其中的許多對象會被頻繁重繪

SVG

不依賴分辨率支持事件處理器最適合帶有大型渲染區域的應用程序（好比谷歌地圖）複雜度高會減慢渲染速度（任何過分使用 DOM 的應用都不快）不適合遊戲應用