Vue 問題集錦（概念）

一 .computed 和 watch 的區別和運用的場景？

　　computed: 計算屬性，依賴其餘屬性值，而且computed 的值有緩存，只有它依賴的值發生改變，下一次獲取它的值纔會從新計算。

　　watch: 更多的是 觀察 的做用，相似數據的監聽回調，每次監聽的數據發生變化都會執行回調而後進行操做。

二. Vue 的父組件和子組件生命週期鉤子函數執行順序？

• 加載渲染過程

  父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted

• 子組件更新過程

  父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

• 父組件更新過程

  父 beforeUpdate -> 父 updated

• 銷燬過程

  父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

三.  組件中 data 爲何是一個函數？

　　 組件是用來複用的，js對象是引用類型，若是是組件的data是對象，那麼做用域就沒有隔離，自組件的data會相互影響，若是是函數，每一個實例能夠維護一份一份被返回的對象的獨立拷貝，組件之間不相互影響，而 new Vue 的實例不是複用，因此不存在引用對象的問題。

四. vue-router 中經常使用的 hash 和 history 路由模式實現原理嗎？

　　1. hash:  location.hash 基於來實現

　　hash 路由模式的實現主要是基於下面幾個特性：

• URL 中 hash 值只是客戶端的一種狀態，也就是說當向服務器端發出請求時，hash 部分不會被髮送；
• hash 值的改變，都會在瀏覽器的訪問歷史中增長一個記錄。所以咱們能經過瀏覽器的回退、前進按鈕控制hash 的切換；
• 能夠經過 a 標籤，並設置 href 屬性，當用戶點擊這個標籤後，URL 的 hash 值會發生改變；或者使用  JavaScript 來對 loaction.hash 進行賦值，改變 URL 的 hash 值；
• 咱們可使用 hashchange 事件來監聽 hash 值的變化，從而對頁面進行跳轉（渲染）。

　　2. history : HTML5 提供的 History API 來實現的

　　history 路由模式的實現主要基於存在下面幾個特性：

• pushState 和 repalceState 兩個 API 來操做實現 URL 的變化 ；
• 咱們可使用 popstate 事件來監聽 url 的變化，從而對頁面進行跳轉（渲染）；
• history.pushState() 或 history.replaceState() 不會觸發 popstate 事件，這時咱們須要手動觸發頁面跳轉（渲染）

五. 虛擬DOM的優缺點？

　　優勢：保證性能下限     無需手動操做DOM    跨平臺 

　　缺點：沒法進行極致優化

六. Vue 中的 Key 有什麼做用？ 

　　key 是Vue 中 Vnode的惟一標示，經過這個 Key ，diff 的操做更加準確，快速。