面試必問之【vue】篇

1. 什麼MVVM ，vue生命週期，watch computed使用
2. 實現全局組件
3. 雙向數據綁定原理 vue的原理 --》 數據劫持，compile， 觀察者模式 , 手畫mvvm.png圖
4. vue-router使用及原理,路由嵌套怎麼用，動態路由，導航鉤子
5. vuex使用以及原理,多個store或者說store劃分
6. axios是什麼？怎麼使用？
7. Vue 不支持 IE8 及如下版本，由於 Vue 使用了 IE8 沒法模擬的 ECMAScript 5 特性 具體是ECMAScript5哪些特性啊？
8. 動態路由 相似user/:id 這種狀況 user/1 <--> user/1 不會觸發 beforeDestroy,destroyed
9. 手畫生命週期並講解各個階段
10. v-if 是「真正」的條件渲染，由於它會確保在切換過程當中條件塊內的事件監聽器和子組件適當地被銷燬和重建。
11. v-if 與 v-for 一塊兒使用 當 v-if 與 v-for 一塊兒使用時，v-for 具備比 v-if 更高的優先級。

v-if 也是惰性的：若是在初始渲染時條件爲假，則什麼也不作——直到條件第一次變爲真時，纔會開始渲染條件塊。

相比之下，v-show 就簡單得多——無論初始條件是什麼，元素老是會被渲染，而且只是簡單地基於 CSS 進行切換。

通常來講，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。所以，若是須要很是頻繁地切換，則使用 v-show 較好；若是在運行時條件不多改變，則使用 v-if 較好。

beforeDestroy 
destroyed
beforeCreate
created
beforeMount
mounted
複製代碼

只有從user --> 到其餘路由時纔會觸發

beforeCreate
created
beforeMount
mounted
複製代碼

11. 我在vue-cli中看到 設置別名

resolve: {
    extensions: ['', '.js', '.vue', '.json'],
    fallback: [path.join(__dirname, '../node_modules')],
    alias: {
      'vue$': 'vue/dist/vue.common.js',
      'src': path.resolve(__dirname, '../src'),
      'assets': path.resolve(__dirname, '../src/assets'),
      'components': path.resolve(__dirname, '../src/components')
    }
  },
  vue包package.json的main指向 "dist/vue.runtime.common.js"
  <!-- 這裏的vue$這樣是啥意思？ 在組件中import vue from 'vue'究竟引入的是哪一個 -->
複製代碼

12. 怎麼爲已有對象賦予多個新屬性？
13. 在vue中爲何要在html中監聽事件或者說這樣帶來的好處
14. 簡單說說動態組件和緩存動態組件的用法
15. slot的用法
16. vue的虛擬DOM diff原理
17. 聊聊非props特性（1.覆蓋式繼承，style和class除外，2.禁止繼承inheritAttrs，3.指定誰繼承v-bind="$attrs"）
18. 給組件直接加事件加不上 組件中含有input 怎麼在組件直接加input事件，$listeners瞭解一下
19. 事件的.sync修飾符 具體用法
20. 異步組件如何處理加載狀態
21. 訪問元素 & 組件的三種方式 ：parent -- 都是實例 $ref 元素自己
22. 依賴注入 組件給任何後代組件提供一個方法或數據 provide 選項容許咱們指定咱們想要提供給後代組件的數據/方法。
23. v-once 知道就好 不要用
24. Vue 提供的 transition 的封裝組件，能夠給哪些元素和組件添加進入\離開過渡

• 條件渲染 (使用 v-if)
• 條件展現 (使用 v-show)
• 動態組件
• 組件根節點

25. 在進入/離開的過渡中，會有 6 個 class 切換。哪6個 分別表示什麼狀態？ 能夠畫圖來講明
26. 自定義指令/插件/過濾器 過濾器能夠用在兩個地方-->雙花括號插值和 v-bind 表達式
27. vue服務端渲染 須要注意什麼？
28. 談談vue的性能優化有哪些？
29. vue項目單元測試
30. vuex問題：

• ...mapState({}) 裏面的同名問題

<!-- 下面的localCompInfo若是換成compInfo會報錯:  xxx not setter -->
...mapState({
    localCompInfo: state => state.comp.compInfo
  }),
複製代碼

31. vuex模塊重用的例子
32. vuex的表單處理
33. vuex支持熱重載
34. popstate 事件

每當同一個文檔的瀏覽歷史（即history對象）出現變化時，就會觸發popstate事件。 注意，僅僅調用pushState()方法或replaceState()方法 ，並不會觸發該事件，只有用戶點擊瀏覽器倒退按鈕和前進按鈕，或者使用 JavaScript 調用History.back()、History.forward()、History.go()方法時纔會觸發。另外，該事件只針對同一個文檔，若是瀏覽歷史的切換，致使加載不一樣的文檔，該事件也不會觸發。 注意，頁面第一次加載的時候，瀏覽器不會觸發popstate事件

這裏放到這裏值得說明的是：vue-rotuer路由的 history 模式，這種模式充分利用 history.pushState API 來完成 URL 跳轉而無須從新加載頁面，因此點擊路由的跳轉就不會觸發popstate

那麼總結一下就是：

• 頁面第一加載不會觸發popstate，
• 路由動做不會觸發

35. 自定義組件v-model

一個組件上的 v-model 默認會利用名爲 value 的 prop 和名爲 input 的事件，可是像單選框、複選框等類型的輸入控件可能會將 value 特性用於不一樣的目的。model 選項能夠用來避免這樣的衝突

Vue.component('base-checkbox', {
model: {
  prop: 'checked',
  event: 'change'
},
props: {
  checked: Boolean
},
template: ` <input type="checkbox" v-bind:checked="checked" v-on:change="$emit('change', $event.target.checked)" > `
})

<base-checkbox v-model="lovingVue"></base-checkbox> 複製代碼