web前端面試題---vue.js面試題

1.vue中的v-show和v-if是作什麼用的，二者之間的區別是什麼？

v-if 和 v-show 二者都是控制元素的隱藏和顯示的。

區別：
方式：v-show 底層原理是操做元素的display屬性，v-if 底層是操控元素的建立/銷燬

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

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

性能消耗：v-if 有跟高的切換消耗；v-show 有更高的初始渲染消耗；

使用場景：
基於以上區別，所以若是須要很是頻繁地切換，則使用 v-show 較好；若是在運行時條件不多改變，則使用 v-if 較好

v-if：場景---->權限校驗的時候

v-show：場景---->展現頁面，相似於一些選項卡等

2.vue 中父組件如何觸發子組件的函數，子組件如何觸發父組件的函數

父組件中獲取子組件函數：$children、$refs
子組件中獲取父組件函數：$on

4.vue-router 有哪幾種導航鉤子

1.全局鉤子  做用：跳轉前進行判斷攔截。
    2.單個路由獨享的
    3.組件級的
    
* 全局導航鉤子  
    router.beforeEach(to, from, next),  
    router.beforeResolve(to, from, next),  
    router.afterEach(to, from ,next)

* 組件內鉤子  
    beforeRouteEnter,  
    beforeRouteUpdate,  
    beforeRouteLeave
 
* 單獨路由獨享組件  
    beforeEnter

5.v-model 是什麼？怎麼使用？vue 中標籤怎麼綁定事件？

能夠實現雙向綁定，指令（v-for、v-if、v-else、v-on、v-class）。
vue 的 model 層的 data 屬性。
綁定事件：

<input @click = doLog() />

6.對 vue 瞭解多少，什麼是 Vuex、 VueRouter;如何避免 Vuex 中的函數形成全局污染？

vuex 爲狀態管理，它集中存儲管理應用的全部組件的狀態，能夠理解成一個全局倉庫。
VueRouter是路由（spa）單頁面應用的方式
避免全局污染：
1.惟一變量：將變量都掛載到同一個命名空間下
2.使用閉包

7.爲何經過 vuex 的mutation 修改 state 中的參數就不會報錯，而直接更改state 中的參數就會報錯

vue2 取消冒泡所有$emit 用 vuex 定義全局 state 組件修改 state 父組件訪問state值

8.什麼是 spa 應用，spa 頁面和傳統的頁面有什麼區別？

是一種特殊的 Web 應用。

它將全部的活動侷限於一個Web頁面中，僅在該Web頁面初始化時加載相應的HTML、JavaScript 和 CSS。一旦頁面加載完成了，SPA不會由於用戶的操做而進行頁面的從新加載或跳轉。

好處：

①.戶體驗好、快，內容的改變不須要從新加載整個頁面，避免了沒必要要的跳轉和重複渲染

②.基於上面一點，SPA相對對服務器壓力小

9.簡述在 vue.js 中使用插件的步驟

採用 ES6 的 import ... from ... 語法或 CommonJS 的 require（）方法引入插件
使用全局方式 Vue.use( plugin ) 使用插件，能夠傳入一個選項對象 Vue.use(MyPlugin,{ someOption:true })

如何使用懶加載插件：

Vue.use(VueLazyload, {
  loading: require('common/image/default.png')
})

10.請列舉出3個Vue中經常使用的生命週期鉤子函數

created：實例已經建立完成以後調用，在這一步，實例已經完成數據觀測，屬性和方法的運算，watch/event 事件回調，然而，掛載階段尚未開始，$el 屬性目前還不可見

mounted：el被新建立的 vm.el 替換，並掛載到實例上去以後調用該鉤子若是 root 實例掛載了一個文檔內元素，當 mounted 被調用時 vm.$el 也在文檔內。

activated：keep-alive組件激活時調用

11.vue.js 中引入組件有幾種方式？分別簡述步驟

兩種：採用 ES6 的 import ... from ... 語法或 CommonJS 的 require() 方法引入組件

步驟：先註冊，再使用

//註冊

Vue.component( 'my-component',{
    template:'<div> hello world！！</div>'
})

//使用組件
<my-component></my-component>