必會的Vue面試題大全

1.v-show與v-if區別？

• v-show是css樣式切換，v-if是完整的銷燬和從新建立；
• 使用頻繁切換時用v-show,切換較少時用v-if；
• v-if=‘false’ v-if是條件渲染，當false的時候不會渲染。

2.動態綁定class的方法？

• 對象方法 v-bind:class="{'orange': isRipe, 'green': isNotRipe}"
• 數組方法 v-bind:class="[class1, class2]"
• 行內方法 v-bind:style="{color: color, fontSize: fontSize+'px'}"

3.計算屬性和 watch 的區別？

• 計算屬性是動態監聽依賴值的變化，從而動態返回內容；computed 是一個對象時，有get和set兩個選項；
• 監聽是一個過程，在監聽的值變化時，能夠觸發一個回調並作一些事情；
• 區別來源於用法，只是須要動態值，那就用計算屬性；須要知道值的改變後執行業務邏輯，才用 watch。
• computed 和 methods 有什麼區別？methods是一個方法，它能夠接受參數，而computed不能，computed是能夠緩存的，methods不會。

4.組件中 data 爲何是函數？

• 由於組件是來複用的，而js裏對象的引用關係，這樣做用域沒有隔離，而new Vue的實例，是不會被複用的，所以不存在引用對象的問題。

5.怎樣理解單向數據流？

• 這個概念出如今組件通訊。父組件是經過 prop 把數據傳遞到子組件的，可是這個 prop 只能由父組件修改，子組件不能修改，不然會報錯。子組件想修改時，只能經過 $emit 派發一個自定義事件，父組件接收到後，由父組件修改。 通常來講，對於子組件想要更改父組件狀態的場景，能夠有兩種方案： 在子組件的 data 中拷貝一份 prop，data 是能夠修改的，但 prop 不能。

6.生命週期？

• 建立先後 beforeCreate/created。 在beforeCreate 階段，vue實例的掛載元素el和數據對象data都爲undefined，還未初始化。在created階段，vue實例的數據對象有了，el尚未。
• 載入先後 beforeMount/mounted。 在beforeMount階段，vue實例的$el和data都初始化了，但仍是掛載以前未虛擬的DOM節點，data還沒有替換。在mounted階段，vue實例掛載完成，data成功渲染。
• 更新先後 beforeUpdate/updated。 當data變化時，會觸發beforeUpdate和updated方法。這兩個不經常使用，不推薦使用。
• 銷燬先後beforeDestory/destoryed。 beforeDestory是在vue實例銷燬前觸發，通常在這裏要經過removeEventListener解除手動綁定的事件。實例銷燬後，觸發的destroyed。

7.路由的跳轉方式？

• router-link標籤會渲染爲a標籤，咋填template中的跳轉都是這種；
• 另外一種是編程式導航 也就是經過js跳轉 好比 router.push('/home')。

8.Vue.js 2.x 雙向綁定原理?

• 核心的 API 是經過 Object.defineProperty() 來劫持各個屬性的setter / getter，在數據變更時發佈消息給訂閱者，觸發相應的監聽回調，這也是爲何 Vue.js 2.x 不支持 IE8 的緣由（IE 8 不支持此 API，且沒法經過 polyfill 實現）。

9.理解Vue中的Render渲染函數?

• VUE通常使用template來建立HTML，而後在有的時候，咱們須要使用javascript來建立html，這時候咱們須要使用render函數;
• render函數return一個createElement組件中的子元素存儲在組件實列中 $slots.default 中;
• return createElement('h1', this.title); createElement返回的是包含的信息會告訴VUE頁面上須要渲染什麼樣的節點及其子節點。咱們稱這樣的節點爲虛擬DOM，能夠簡寫爲VNode。

10.slot插槽?

• 單個插槽。當子組件模板只有一個沒有屬性的插槽時，父組件傳入的整個內容片斷將插入到插槽所在的 DOM 位置，並替換掉插槽標籤自己。 最初在 標籤中的任何內容都被視爲備用內容。備用內容在子組件的做用域內編譯，而且只有在宿主元素爲空，且沒有要插入的內容時才顯示備用內容。
• 命名插槽。 solt元素能夠用一個特殊的特性name來進一步配置如何分發內容。多個插槽能夠有不一樣的名字。 這樣能夠將父組件模板中 slot 位置，和子組件 slot 元素產生關聯，便於插槽內容對應傳遞。
• 做用域插槽scoped slots。能夠訪問組件內部數據的可複用插槽(reusable slot)。在父級中，具備特殊特性 slot-scope 的