vue面試題總結(一)

• Vue.js是一個輕巧、高性能、可組件化的 MVVM 庫，同時擁有非常容易上手的API
• Vue.js是一個構建數據驅動的Web界面的庫。
• Vue.js是一套構建用戶界面的 漸進式框架。與其他重量級框架不同的是，Vue 采用自底向上增量開發的設計。
• Vue的核心庫只關注視圖層，并且非常容易學習，非常容易與其它庫或已有項目整合.
• Vue 完全有能力驅動采用單文件組件和 Vue生態系統支持的庫開發的復雜單頁應用。數據驅動+組件化的前端開發。
• 簡而言之：Vue.js是一個構建數據驅動的 web 界面的漸進式框架。Vue.js 的目標是通過盡可能簡單的 API實現響應的數據綁定和組合的視圖組件。核心是一個響應的數據綁定系統。

MVVM 是 Model-View-ViewModel 的縮寫。mvvm 是一種設計思想。Model 層代表數據模型，也可以在 Model 中定義數據修改和操作的業務邏輯；View 代表 UI 組件，它負責將數據模型轉化成 UI 展現出來，ViewModel 是一個同步 View 和 Model 的對象。

當一個Vue實例創建時，vue會遍歷data選項的屬性，用 Object.defineProperty poroupoti 將它們轉為 getter/setter并且在內部追蹤相關依賴，在屬性被訪問和修改時通知變化。每個組件實例都有相應的 watcher 程序實例，它會在組件渲染的過程中把屬性記錄為依賴，之后當依賴項的 setter 被調用時，會通知 wocher watcher 重新計算，從而致使它關聯的組件得以更新。

• 簡潔：頁面由HTML模板+Json數據+Vue實例組成
• 數據驅動：自動計算屬性和追蹤依賴的模板表達式
• 組件化：用可復用、解耦的組件來構造頁面
• 輕量：代碼量小，不依賴其他庫
• 快速：精確有效批量DOM更新
• 模板友好：可通過npm，bower等多種方式安裝，很容易融入

預處理css，把css當前函數編寫，定義變量,嵌套.

• 總共分為 8 個階段創建前/后，載入前/后，更新前/后，銷毀前/后。
• 創建前/后：在 beforeCreate 階段，vue 實例的掛載元素 el 還沒有。
• 載入前/后：在 beforeMount 階段，vue 實例的$el 和 data 都初始化了，但還是掛載之前為虛擬的 dom 節點，data.message 還未替換。在 mounted 階段，vue 實例掛載完成，data.message 成功渲染。
• 更新前/后：當 data 變化時，會觸發 beforeUpdate 和 updated 方法。
• 銷毀前/后：在執行 destroy 方法后，對 data 的改變不會再觸發周期函數，說明此時 vue 實例已經解除了事件監聽以及和 dom 的綁定，但是 dom 結構依然存在。

對象為引用類型，當重用組件時，由于數據對象都指向同一個data對象，當在一個組件中修改data時，其他重用的組件中的data會同時被修改；而使用返回對象的函數，由于每次返回的都是一個新對象（Object的實例），引用地址不同，則不會出現這個問題。

vue-router模塊的router-link組件。

三種。

• 第一種：全局導航鉤子：router.beforeEach(to,from,next)，作用：跳轉前進行判斷攔截。
• 第二種：組件內的鉤子；
• 第三種：單獨路由獨享組件

• v-if：判斷是否隱藏；v-for：數據循環出來；v-bind:class：綁定一個屬性；v-model：實現雙向綁定

解析.vue文件的一個加載器，跟template/js/style轉換成js模塊。

• assets文件夾是放靜態資源；
• components是放組件；
• router是定義路由相關的配置;
• view視圖；
• app.vue是一個應用主組件；
• main.js是入口文件

在我們運用vue的時候一定少不了用計算屬性computed和watch

• computed計算屬性是用來聲明式的描述一個值依賴了其它的值。當你在模板里把數據綁定到一個計算屬性上時，Vue 會在其依賴的任何值導致該計算屬性改變時更新 DOM。這個功能非常強大，它可以讓你的代碼更加聲明式、數據驅動并且易于維護。
• watch監聽的是你定義的變量,當你定義的變量的值發生變化時，調用對應的方法。就好在div寫一個表達式name，data里寫入num和lastname,firstname,在watch里當num的值發生變化時，就會調用num的方法，方法里面的形參對應的是num的新值和舊值，而計算屬性computed,計算的是Name依賴的值,它不能計算在data中已經定義過的變量。

我們在父組件給子組件傳值得時候，為了避免不必要的錯誤，可以給prop的值進行類型設定，讓父組件給子組件傳值得時候，更加準確，prop可以傳一個數字，一個布爾值，一個數組，一個對象，以及一個對象的所有屬性。組件可以為 props 指定驗證要求。如果未指定驗證要求，Vue 會發出警告比如傳一個number類型的數據，用defalt設置它的默認值，如果驗證失敗的話就會發出警告。

props: {
visible: {
    default: true,
    type: Boolean,
    required: true
},
},

• 父傳遞子
• 父：自定義屬性名 + 數據（要傳遞）=> :value="數據"
• 子：props ["父組件上的自定義屬性名“] =>進行數據接收)
• 子傳遞父

在父組件中注冊子組件并在子組件標簽上綁定自定義事件的監聽。

• 子：this.$emit(‘自定義事件名稱’, 數據) 子組件標簽上綁定@自定義事件名稱=’回調函數’
• 父：methods: {自定義事件() {//邏輯處理} }
• 兄弟組件

通過中央通信 let bus = new Vue()

• A：methods :{ 函數{bus.$emit('自定義事件名’，數據)} 發送
• B：created （）{bus.$on('A發送過來的自定義事件名’，函數)} 進行數據接收