Vue · 大雜燴

[TOC] # 一、談談MVVM？ MVVM 模式，顧名思義即 Model-View-ViewModel 模式。它萌芽于2005年微軟推出的基于 Windows 的用戶界面框架 WPF ，前端最早的 MVVM 框架 knockout 在2010年發布。一句話總結 Web 前端 MVVM：操作數據，就是操作視圖，就是操作 DOM（所以無須操作 DOM ）。無須操作 DOM ！借助 MVVM 框架，開發者只需完成包含聲明綁定的視圖模板，編寫 ViewModel 中業務數據變更邏輯，View 層則完全實現了自動化。這將極大的降低前端應用的操作復雜度、極大提升應用的開發效率。MVVM 最標志性的特性就是數據綁定，MVVM 的核心理念就是通過聲明式的數據綁定來實現 View 層和其他層的分離。完全解耦 View 層這種理念，也使得 Web 前端的單元測試用例編寫變得更容易。 ``` MVVM，說到底還是一種分層架構。它的分層如下： Model: 域模型，用于持久化 View: 作為視圖模板存在 ViewModel: 作為視圖的模型，為視圖服務 ``` ## **Model 層** Model 層，對應數據層的域模型，它主要做域模型的同步。通過 Ajax/fetch 等 API 完成客戶端和服務端業務 Model 的同步。在層間關系里，它主要用于抽象出 ViewModel 中視圖的 Model。 ## **View 層** View 層，作為視圖模板存在，在 MVVM 里，整個 View 是一個動態模板。除了定義結構、布局外，它展示的是 ViewModel 層的數據和狀態。View 層不負責處理狀態，View 層做的是數據綁定的聲明、指令的聲明、事件綁定的聲明。 ## **ViewModel 層** ViewModel 層把 View 需要的層數據暴露，并對 View 層的數據綁定聲明、指令聲明、事件綁定聲明負責，也就是處理 View 層的具體業務邏輯。ViewModel 底層會做好綁定屬性的監聽。當 ViewModel 中數據變化，View 層會得到更新；而當 View 中聲明了數據的雙向綁定（通常是表單元素），框架也會監聽 View 層（表單）值的變化。一旦值變化，View 層綁定的 ViewModel 中的數據也會得到自動更新。 ## **前端 MVVM 圖示** ![](https://box.kancloud.cn/8d295ee6e80f119bf37293a9d3c52a30_1213x709.png) 如圖所示，在前端 MVVM 框架中，往往沒有清晰、獨立的 Model 層。在實際業務開發中，我們通常按 Web Component 規范來組件化的開發應用，Model 層的域模型往往分散在在一個或幾個 Component 的 ViewModel 層，而 ViewModel 層也會引入一些 View 層相關的中間狀態，目的就是為了更好的為 View 層服務。開發者在 View 層的視圖模板中聲明數據綁定、事件綁定后，在 ViewModel 中進行業務邏輯的數據處理。事件觸發后，ViewModel 中數據變更， View 層自動更新。因為 MVVM 框架的引入，開發者只需關注業務邏輯、完成數據抽象、聚焦數據，MVVM 的視圖引擎會幫你搞定 View。因為數據驅動，一切變得更加簡單。 # 二、Vue的生命周期 beforeCreate（創建前）在數據觀測和初始化事件還未開始 created（創建后）完成數據觀測，屬性和方法的運算，初始化事件，$el屬性還沒有顯示出來 beforeMount（載入前）在掛載開始之前被調用，相關的render函數首次被調用。實例已完成以下的配置：編譯模板，把data里面的數據和模板生成html。注意此時還沒有掛載html到頁面上。 mounted（載入后）在el 被新創建的 vm.$el 替換，并掛載到實例上去之后調用。實例已完成以下的配置：用上面編譯好的html內容替換el屬性指向的DOM對象。完成模板中的html渲染到html頁面中。此過程中進行ajax交互。 beforeUpdate（更新前）在數據更新之前調用，發生在虛擬DOM重新渲染和打補丁之前。可以在該鉤子中進一步地更改狀態，不會觸發附加的重渲染過程。 updated（更新后）在由于數據更改導致的虛擬DOM重新渲染和打補丁之后調用。調用時，組件DOM已經更新，所以可以執行依賴于DOM的操作。然而在大多數情況下，應該避免在此期間更改狀態，因為這可能會導致更新無限循環。該鉤子在服務器端渲染期間不被調用。 beforeDestroy（銷毀前）在實例銷毀之前調用。實例仍然完全可用。 destroyed（銷毀后）在實例銷毀之后調用。調用后，所有的事件監聽器會被移除，所有的子實例也會被銷毀。該鉤子在服務器端渲染期間不被調用。 ## 1.什么是vue生命周期？答： Vue 實例從創建到銷毀的過程，就是生命周期。從開始創建、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、銷毀等一系列過程，稱之為 Vue 的生命周期。 ## 2.vue生命周期的作用是什么？答：它的生命周期中有多個事件鉤子，讓我們在控制整個Vue實例的過程時更容易形成好的邏輯。 ## 3.vue生命周期總共有幾個階段？答：它可以總共分為8個階段：創建前/后, 載入前/后,更新前/后,銷毀前/銷毀后。 ## 4.第一次頁面加載會觸發哪幾個鉤子？答：會觸發下面這幾個beforeCreate, created, beforeMount, mounted 。 ## 5.DOM 渲染在哪個周期中就已經完成？答：DOM 渲染在 mounted 中就已經完成了。 # 三、 Vue數據雙向綁定的原理 ## **vue實現數據雙向綁定主要是什么** 采用數據劫持結合發布者-訂閱者模式的方式，通過Object.defineProperty（）來劫持各個屬性的setter，getter，在數據變動時發布消息給訂閱者，觸發相應監聽回調。當把一個普通 Javascript 對象傳給 Vue 實例來作為它的 data 選項時，Vue 將遍歷它的屬性，用 Object.defineProperty 將它們轉為 getter/setter。用戶看不到 getter/setter，但是在內部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時通知變化。 vue的數據雙向綁定將MVVM作為數據綁定的入口，整合Observer，Compile和Watcher三者，通過Observer來監聽自己的model的數據變化，通過Compile來解析編譯模板指令（vue中是用來解析 {{}}），最終利用watcher搭起observer和Compile之間的通信橋梁，達到數據變化 —>視圖更新；視圖交互變化（input）—>數據model變更雙向綁定效果。 js實現簡單的雙向綁定 ``` <body> <div id="app"> <input type="text" id="txt"> <p id="show"></p> </div> </body> <script type="text/javascript"> var obj = {} Object.defineProperty(obj, 'txt', { get: function () { return obj }, set: function (newValue) { document.getElementById('txt').value = newValue document.getElementById('show').innerHTML = newValue } }) document.addEventListener('keyup', function (e) { obj.txt = e.target.value }) </script> ``` # 四、Vue組件間的參數傳遞 ## 1.父組件與子組件傳值父組件傳給子組件：子組件通過props方法接受數據; 子組件傳給父組件：$emit方法傳遞參數 ## 2.非父子組件間的數據傳遞，兄弟組件傳值 eventBus，就是創建一個事件中心，相當于中轉站，可以用它來傳遞事件和接收事件。項目比較小時，用這個比較合適。（雖然也有不少人推薦直接用VUEX，具體來說看需求咯。技術只是手段，目的達到才是王道。） # 五、Vue的路由實現：hash模式和 history模式 ## hash模式 **hash模式**:在瀏覽器中符號“#”，#以及#后面的字符稱之為hash，用window.location.hash讀取； **特點**：hash雖然在URL中，但不被包括在HTTP請求中；用來指導瀏覽器動作，對服務端安全無用，hash不會重加載頁面。 ## history模式 **history模式**：history采用HTML5的新特性；且提供了兩個新方法：pushState（），replaceState（）可以對瀏覽器歷史記錄棧進行修改，以及popState事件的監聽到狀態變更。 # 六、Vue與Angular以及React的區別？（版本在不斷更新，以下的區別有可能不是很正確。） ## 1.與AngularJS的區別 **相同點：** 都支持指令：內置指令和自定義指令；都支持過濾器：內置過濾器和自定義過濾器；都支持雙向數據綁定；都不支持低端瀏覽器。 **不同點：** AngularJS的學習成本高，比如增加了Dependency Injection特性，而Vue.js本身提供的API都比較簡單、直觀；在性能上，AngularJS依賴對數據做臟檢查，所以Watcher越多越慢；Vue.js使用基于依賴追蹤的觀察并且使用異步隊列更新，所有的數據都是獨立觸發的。 ## 2.與React的區別 **相同點:** React采用特殊的JSX語法，Vue.js在組件開發中也推崇編寫.vue特殊文件格式，對文件內容都有一些約定，兩者都需要編譯后使用；中心思想相同：一切都是組件，組件實例之間可以嵌套；都提供合理的鉤子函數，可以讓開發者定制化地去處理需求；都不內置列數AJAX，Route等功能到核心包，而是以插件的方式加載；在組件開發中都支持mixins的特性。 **不同點:** React采用的Virtual DOM會對渲染出來的結果做臟檢查；Vue.js在模板中提供了指令，過濾器等，可以非常方便，快捷地操作Virtual DOM。 # 七、vue路由的鉤子函數首頁可以控制導航跳轉，beforeEach，afterEach等，一般用于頁面title的修改。一些需要登錄才能調整頁面的重定向功能。 ``` beforeEach主要有3個參數to，from，next： to：route即將進入的目標路由對象， from：route當前導航正要離開的路由 next：function一定要調用該方法resolve這個鉤子。執行效果依賴next方法的調用參數。可以控制網頁的跳轉。 ``` # 八、vuex是什么？怎么使用？哪種功能場景使用它？只用來讀取的狀態集中放在store中；改變狀態的方式是提交mutations，這是個同步的事物；異步邏輯應該封裝在action中。在main.js引入store，注入。新建了一個目錄store，….. export 。場景有：單頁應用中，組件之間的狀態、音樂播放、登錄狀態、加入購物車 ![](https://box.kancloud.cn/0aaeb1dda90ce4c73eab3dafc15da345_701x551.png) ## state Vuex 使用單一狀態樹,即每個應用將僅僅包含一個store 實例，但單一狀態樹和模塊化并不沖突。存放的數據狀態，不可以直接修改里面的數據。 ## mutations mutations定義的方法動態修改Vuex 的 store 中的狀態或數據。 ## getters 類似vue的計算屬性，主要用來過濾一些數據。 ## action actions可以理解為通過將mutations里面處里數據的方法變成可異步的處理數據的方法，簡單的說就是異步操作數據。view 層通過 store.dispath 來分發 action。 ``` const store = new Vuex.Store({ //store 實例 state: { count: 0 }, mutations: { increment (state) { state.count++ } }, actions: { increment (context) { context.commit('increment') } } }) ``` ## modules 項目特別復雜的時候，可以讓每一個模塊擁有自己的state、mutation、action、getters,使得結構非常清晰，方便管理。 ``` const moduleA = { state: { ... }, mutations: { ... }, actions: { ... }, getters: { ... } } const moduleB = { state: { ... }, mutations: { ... }, actions: { ... } } const store = new Vuex.Store({ modules: { a: moduleA, b: moduleB }) ``` # 九、vue-cli如何新增自定義指令？ ## 1.創建局部指令 ``` var app = new Vue({ el: '#app', data: { }, // 創建指令(可以多個) directives: { // 指令名稱 dir1: { inserted(el) { // 指令中第一個參數是當前使用指令的DOM console.log(el); console.log(arguments); // 對DOM進行操作 el.style.width = '200px'; el.style.height = '200px'; el.style.background = '#000'; } } } }) ``` ## 2.全局指令 ``` Vue .directive('dir2', { inserted(el) { console.log(el); } }) ``` ## 3.指令的使用 ``` <div id="app"> <div v-dir1></div> <div v-dir2></div> </div> ``` # 十、vue如何自定義一個過濾器？ html代碼： ``` <div id="app"> <input type="text" v-model="msg" /> {{msg| capitalize }} </div> ``` JS代碼： ``` var vm=new Vue({ el:"#app", data:{ msg:'' }, filters: { capitalize: function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } } }) ``` 全局定義過濾器 ``` Vue.filter('capitalize', function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) }) ``` 過濾器接收表達式的值 (msg) 作為第一個參數。capitalize 過濾器將會收到 msg的值作為第一個參數。 # 十一、對keep-alive 的了解？ keep-alive是 Vue 內置的一個組件，可以使被包含的組件保留狀態，或避免重新渲染。在vue 2.1.0 版本之后，keep-alive新加入了兩個屬性: include(包含的組件緩存) 與 exclude(排除的組件不緩存，優先級大于include) 。使用方法 ``` <keep-alive include='include_components' exclude='exclude_components'> <component>  </component> </keep-alive> ``` 參數解釋 include - 字符串或正則表達式，只有名稱匹配的組件會被緩存 exclude - 字符串或正則表達式，任何名稱匹配的組件都不會被緩存 include 和 exclude 的屬性允許組件有條件地緩存。二者都可以用“，”分隔字符串、正則表達式、數組。當使用正則或者是數組時，要記得使用v-bind 。使用示例 ```  <keep-alive include="a,b"> <component></component> </keep-alive>  <keep-alive :include="/a|b/"> <component></component> </keep-alive>  <keep-alive :include="['a', 'b']"> <component></component> </keep-alive> ``` # 十二、一句話就能回答的面試題 ## 1.css只在當前組件起作用答：在style標簽中寫入scoped即可例如：<style scoped></style> ## 2.v-if 和 v-show 區別答：v-if按照條件是否渲染，v-show是display的block或none； ## 3.$route和$router的區別答：$route是“路由信息對象”，包括path，params，hash，query，fullPath，matched，name等路由信息參數。而$router是“路由實例”對象包括了路由的跳轉方法，鉤子函數等。 ## 4.vue.js的兩個核心是什么？答：數據驅動、組件系統 ## 5.vue幾種常用的指令答：v-for 、 v-if 、v-bind、v-on、v-show、v-else ## 6.vue常用的修飾符？答：.prevent: 提交事件不再重載頁面；.stop: 阻止單擊事件冒泡；.self: 當事件發生在該元素本身而不是子元素的時候會觸發；.capture: 事件偵聽，事件發生的時候會調用 ## 7.v-on 可以綁定多個方法嗎？答：可以 ## 8.vue中 key 值的作用？答：當 Vue.js 用 v-for 正在更新已渲染過的元素列表時，它默認用“就地復用”策略。如果數據項的順序被改變，Vue 將不會移動 DOM 元素來匹配數據項的順序，而是簡單復用此處每個元素，并且確保它在特定索引下顯示已被渲染過的每個元素。key的作用主要是為了高效的更新虛擬DOM。 ## 9.什么是vue的計算屬性？答：在模板中放入太多的邏輯會讓模板過重且難以維護，在需要對數據進行復雜處理，且可能多次使用的情況下，盡量采取計算屬性的方式。好處：①使得數據處理結構清晰；②依賴于數據，數據更新，處理結果自動更新；③計算屬性內部this指向vm實例；④在template調用時，直接寫計算屬性名即可；⑤常用的是getter方法，獲取數據，也可以使用set方法改變數據；⑥相較于methods，不管依賴的數據變不變，methods都會重新計算，但是依賴數據不變的時候computed從緩存中獲取，不會重新計算。 ## 10.vue等單頁面應用及其優缺點答：優點：Vue 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件，核心是一個響應的數據綁定系統。MVVM、數據驅動、組件化、輕量、簡潔、高效、快速、模塊友好。缺點：不支持低版本的瀏覽器，最低只支持到IE9；不利于SEO的優化（如果要支持SEO，建議通過服務端來進行渲染組件）；第一次加載首頁耗時相對長一些；不可以使用瀏覽器的導航按鈕需要自行實現前進、后退。