Vue 基礎面試題（1）

1.在new Vue 中的el屬性

new Vue({
    el:"#app" //在vue內部運行機制中，須要根據傳遞的字符串進行判斷，好比,#xxx仍是.xxx，仍是div元素查找
    //el:document.getElementById('app')//更爲優化，將元素直接找到，避免了vue來去判斷
})
複製代碼

2.vue中組件的data使用的是一個函數，而不是直接使用對象

在vue中，組件是可複用的vue實例，一個組件被建立好以後，就可能被用在各個地方，而組件無論被複用了多少次，組件中的data數據都應該是相互隔離，互不影響的，基於這一理念，組件每複用一次，data數據就應該被複制一次，以後，當某一處複用的地方組件內data數據被改變時，其餘複用地方組件的data數據不受影響，組件中將data寫成一個函數，數據以函數返回值形式定義，這樣每複用一次組件，就返回一份新的data，相似給每一個組件實例建立一個私有的數據空間，讓各個組件實例維護各自的數據。而單純的寫成對象形式，就使得全部組件實例共用了一份data，就會形成一個變了所有都變得結果

3.請問 v-if 和 v-show 有什麼區別：

相同點： 二者都是在判斷DOM節點是否要顯示

不一樣點：

• 實現方式： v-if是根據後面數據的真假值判斷直接從Dom樹上刪除或重建元素節點。 v-show只是在修改元素的css樣式，也就是display的屬性值，元素始終在Dom樹上。

• 編譯過程：v-if切換有一個局部編譯/卸載的過程，切換過程當中合適地銷燬和重建內部的事件監聽和子組件； v-show只是簡單的基於css切換；

• 編譯條件：v-if是惰性的，若是初始條件爲假，則什麼也不作；只有在條件第一次變爲真時纔開始局部編譯； v-show是在任何條件下（首次條件是否爲真）都被編譯，而後被緩存，並且DOM元素始終被保留；

• 性能消耗：v-if有更高的切換消耗，不適合作頻繁的切換； v-show有更高的初始渲染消耗，適合作頻繁的額切換；

4.VUE優化 使用v-if和v-for

緣由：

• 當for和if同時使用時，若是數據發生變化for和if都會同時執行一遍，對性能和展示不友好；
• v-for 比 v-if 具備更高的優先級，這意味着 v-if 將分別重複運行於每一個 v-for 循環中。

解決方案：

• 將if指令添加到父級元素上，這能夠避免對每一個列表項進行條件判斷。
• 若是須要在列表中過濾掉不須要的某一項，建議使用計算屬性。

備註：未完待續，後有更新哦