Vue 基礎面試

目錄

1.談一下你對 Vue.js 的 MVVM 原理的理解

2.請說一下 Vue.js 響應式數據的原理

3.v-model實現原理，及如何自定義v-model

4.Vue傳值

5.封裝 Vue組件

6.Vue 中的 data 是以 函數還是對象 表示？

7.跨域

8.vue-router傳參

9.前端鑑權

---

1.談一下你對 Vue.js 的 MVVM 原理的理解

• 傳統 MVC：將 Model 和 View 實現代碼分離

1. Model（模型）：業務模型
2. View（視圖）：用戶界面
3. Controller（控制器）：控制器

• 原理：用戶訪問服務器端路由，路由調用控制器，控制器獲取模型處理過的數據，將結果返回給前端視圖渲染
• MVVM：M-model，V-view，VM-view-model（橋樑作用）
• 傳統模型需要 操作 DOM 元素，手動將數據渲染到頁面上，MVVM不需要 操作 DOM元素
• MVVM 將數據綁定在 view-model層上，會實現雙向數據綁定，即：
• view-model層中的數據可以渲染到視圖界面，視圖界面數據發生變化 也會修改view-model層中的數據

2.請說一下 Vue.js 響應式數據的原理

• 響應式：當數據改變，Vue 會通知到使用該數據的代碼，並讓視圖更新
• 響應式核心機制：觀察者模式（watcher）
• 數據是被觀察的一方，發生改變時，通知所有觀察者，觀察者做出響應
• 數據可以有多個觀察者，需要記錄 多個觀察者 和 數據 的依賴關係：
• data（數據） - dep（依賴關係） - watcher（對應觀察者）
• Object.defineProperty：重新定義 data所有屬性
• 綜上：依賴dep 記錄 數據data 和 觀察者watcher 的關係，當 Vue更改數據的時候，會調用 Object.defineProperty 給數據data 重新定義屬性，此時 依賴dep 就會通知相應的 觀察者watcher 作出響應
• 通過Object.defineProperty 完成對於數據的劫持, 通過觀察者模式, 完成對於節點的數據更新

3.v-model實現原理，及如何自定義v-model

• 利用屬性綁定，實現從數據到頁面的控制（從vm實例data 到 頁面）
• 利用事件監聽，實現從頁面到數據的控制（頁面輸入改變，監聽，然後讓 vm實例 發生變化）
• <input type="text" v-bind:value="msg" v-on:input='msg=$event.target.value'>
• <input type="text" v-model='msg'>

4.Vue傳值

1. 父 子 傳值：使用props接受
2. 子 父 傳值：父親寫事件函數 ，子 $emit觸發 傳值
3. 兄弟傳值：$hub 事件處理中心
4. 如果組件之間 關係很遠 是很多組件都要用的值 vuex（全局狀態數據管理）

• vuex 原理：在 store 裏的 state 寫的數據 是全局數據，所有組件都可以使用
• vuex mutations和 actions 的區別？

5.封裝 Vue組件

• 組件：可以重複使用的、由 HTML結構（ template） + 數據邏輯（script） + 樣式（style） 構成的操作單元
• 常用的組件屬性 => data/ methods/filters/ components/watch/created/mounted/beforeDestroy/computed/props
• 常用組件指令 => v-if/v-on/v-bind/v-model/v-text/v-once
• 步驟：創建 vue單文本組件，掛載到路由，回到單文本組件中 書寫模板，書寫行爲，書寫樣式

6.Vue 中的 data 是以 函數還是對象 表示？

• 初步學習 Vue實例化時：data 是一個對象
• 開發組件時：data 是一個帶返回值的函數
• 原因：組件實例化後，會導致組件 data數據共享，爲了讓數據相互獨立，所以 return

7.跨域

• 域名、協議、ip地址、端口 任何一個不一樣，就是跨域
• 解決方案：

1. 服務端設置：Access-Control-Allow-Origin：* ....
2. jsonp：利用 <script> 的特性解決跨域問題，但只能 get
3. 服務器端不存在跨域問題，用自己的服務器請求別的服務器，request(地址，回調函數)
4. vue 可以自己設置 服務器代理的 proxy

8.vue-router傳參

• this.$route.params.id：動態路由傳值 // /user/:id
• this.$route.query.id：通過?後面的拼接參數傳值

9.前端鑑權

• 有些 axios請求，需要token，可以配置 axios請求攔截器，注入token
• 有些頁面需要登錄才能看，可以用 路由導航守衛 router.beforeEach，判斷 token