[Vue] vue的一些面試題4

1.你知道 nextTick 的原理嗎？

用法：在下次 DOM 更新循環結束以後執行延遲迴調。在修改數據以後當即使用這個方法，獲取更新後的 DOM。

異步更新隊列提到 DOM 的更新是異步執行的，只要數據發生變化，將會開啓一個隊列，並緩衝在同一事件循環中發生的全部數據變動。若是同一個 watcher 被屢次觸發，只會被推入到隊列中一次。

簡單來講，就是當數據發生變化時，視圖不會當即更新，而是等到同一事件循環中全部數據變化完成以後，再統一更新視圖。

2. 說說你對 v-clock 和 v-pre 指令的理解

v-cloak 指令只是在標籤中加入一個 v-cloak 自定義屬性，在 HTML 還編譯完成以後該屬性會被刪除。
v-pre 能夠用來阻止預編譯，有 v-pre 指令的標籤內部的內容不會被編譯，會原樣輸出。

3.vue 過渡動畫實現的方式有哪些？

• 使用 vue 的 transition 標籤結合 css 樣式完成動畫
• 利用 animate.css 結合 transition 實現動畫
• 利用 vue 中的鉤子函數實現動畫

4.vue 父子組件雙向綁定的方法有哪些？

• 利用對象的引用關係來實現
• 父子組件之間的數據傳遞
• 使用.sync 修飾符

5.如何解決 vue 打包 vendor 過大的問題？

• 在 webpack.base.conf.js 新增 externals 配置，表示不須要打包的文件，而後在 index.html 中經過 CDN 引入
• 使用路由懶加載

6.vue-loader 是什麼？它有什麼做用？

解析和轉換 .vue 文件，提取出其中的邏輯代碼 script、樣式代碼 style、以及 HTML 模版 template，再分別把它們交給對應的 Loader 去處理。

7.SPA 單頁面的實現方式有哪些？

• 監聽地址欄中 hash 變化驅動界面變化

• 用 pushsate 記錄瀏覽器的歷史，驅動界面發送變化

• 直接在界面用普通事件驅動界面變化

8.說說你對 SPA 單頁面的理解，它的優缺點分別是什麼？

介紹：SPA 應用就是一個 web 應用，可理解爲：是一種只須要將單個頁面加載到服務器之中的 web 應用程序。當瀏覽器向服務器發出第一個請求時，服務器會返回一個 index.html 文件，它所需的 js，css 等會在顯示時統一加載，部分頁面須要時加載。
優勢：

• 1.良好的交互式體驗。意思是：用戶無需刷新頁面，獲取數據經過異步 ajax 獲取，頁面顯示流暢
• 2.良好的先後端分離模式（MVVM），減輕服務端壓力。服務器只須要輸出數據就能夠，不用管邏輯和頁面展現，吞吐能力會提升幾倍
• 3.共用同一套後端程序代碼，不用修改就可用於 web 界面，手機和平板等客戶端設備

缺點：

• 1.不利於 SEO 優化
• 2.因爲單頁應用在一個頁面中顯示，因此不可使用瀏覽器自帶的前進後退功能，想要實現頁面切換須要本身進行管理
• 3.首屏加載過慢（初次加載耗時多）緣由是：爲了實現單頁 web 應用功能及展現效果，在頁面初始化的時候就會將 js，css 等統一加載，部分頁面在須要時加載。固然也有解決方法。

解決方法：

• ① 使用路由懶加載
• ② 開啓 Gzip 壓縮
• ③ 使用 webpack 的 externals 屬性把不須要的庫文件分離出去，減小打包後文件的大小
• ④ 使用 vue 的服務端渲染（SSR）

舉例 spa 應用：網易雲音樂、QQ 音樂等

9.v-if 和 v-for 的優先級是什麼？若是這兩個同時出現時，那應該怎麼優化才能獲得更好的性能？

v-for 的優先級更高
避免出現這種狀況，若是實在須要，則在外嵌套 template，在這一層進行 v-if 判斷，而後在內部進行 v-for 循環，避免每次只有 v-if 只渲染不多一部分元素，也須要遍歷同級的全部元素

10.爲何 data 屬性必須聲明爲返回一個初始數據對應的函數呢？

對象爲引用類型，當重用組件時，因爲數據對象都指向同一個 data 對象，當在一個組件中修改 data 時，其餘重用的組件中的 data 會同時被修改；而使用返回對象的函數，因爲每次返回的都是一個新對象（Object 的實例），引用地址不一樣，則不會出現這個問題。

11.watch 怎麼深度監聽對象變化

'obj.xx': { handler: function(val) {}, deep:true }

12.怎麼在 watch 監聽開始以後當即被調用？

'obj.xx': { handler: function(val) {}, immediate:true }

13.watch 和 computed 有什麼區別？

• watch 是偵聽屬性，computed 是計算屬性
• watch 是爲了應對複雜的邏輯計算，computed 是對數據的變化做出反應
• watch 是隻有當緩存改變時才執行，computed 是隻要重新渲染就會執行
• watch 有緩存，computed 沒有緩存

14.v-show 和 v-if 有什麼區別？使用場景分別是什麼？

v-show 是 css 的 display 顯示和隱藏
v-if 是 DOM 銷燬和重建

v-show 使用場景：

• 頻繁的切換顯示狀態
• 預渲染需求

15.什麼是雙向綁定？原理是什麼？

經過 Observer 把數據劫持(Object.defineProperty()) 、加入到訂閱器(Dep) 訂閱器收集訂閱者(Watcher )、視圖經過編譯(Compile)、解析指令(Directive)等一些列操做收集給訂閱者 、最後經過觸發數據變化 update 通知全部訂閱者完成數據驅動