一、什么是MVVM？
MVVM是 Model-View-ViewModel的縮寫，
Model代表數據模型，定義數據操作的業務邏輯。
View代表視圖層，負責將數據模型渲染到頁面上。
ViewModel控制，通過雙向綁定把View和Model進行同步交互，不需要手動操作DOM的一種設計思想。
二、Vue的雙向數據綁定原理是什么？或者說 Vue 的響應式原理
vue.js是采用數據劫持結合發布者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter,getter,在數據變動時發布消息給訂閱者，觸發相應的監聽回調。
三、Vue3.0的新特性
1、增加了composition api
2、虛擬DOM重寫
3、優化slots的生成
4、基於Proxy的響應式系統
5、TypeScript + 模塊化
四、Vue.js 3.0 放棄defineProperty, 使用Proxy的原因
1、監控到數組下標的變化時，開銷很大。所以Vue.js放棄了下標變化的檢測；
2、Object.defineProperty只能劫持對象的屬性，而Proxy是直接代理對象。
3、Object.defineProperty需要遍歷對象的每個屬性，如果屬性值也是對象，則需要深度遍歷。而 Proxy 直接代理對象，不需要遍歷操作。
4、Object.defineProperty對新增屬性需要手動進行Observe。vue2時需要使用 vm.$set 才能保證新增的屬性也是響應式
5、Proxy支持13種攔截操作，這是defineProperty所不具有的
6、Proxy 作為新標准，長遠來看，JS引擎會繼續優化 Proxy，但 getter 和 setter 基本不會再有針對性優化
五、生命周期是什么
Vue實例從創建到銷毀的過程，就是生命周期，也就是從開始創建、初始化數據、編譯模板、掛載Dom -> 渲染、更新->渲染、卸載等一系列過程，我們稱這是Vue的生命周期。
六、vue生命周期總共有幾個階段？
總共可以分8個階段：創建前/后、載入前/后、更新前/后、銷毀前/后
生命周期的鈎子函數：有8個常規鈎子和2個額外的鈎子 = 10個
第一次頁面加載會觸發哪幾個鈎子?
第一次頁面加載時會觸發beforeCreate、created、beforeMount、mounted這幾個鈎子
七，簡述每個周期具體適合哪些場景？
1、beforeCreate：創建前，此階段為實例初始化之后，this指向創建的實例，此時的數據觀察事件機制都未形成，不能獲得DOM節點。
data，computed，watch，methods 上的方法和數據均不能訪問。
讀法（D-Fo-kriˈeɪtɪd）
2、created：創建后，此階段為實例已經創建，完成數據（data、props、computed）的初始化導入依賴項。一般初始化事件和異步請求放在這里調用
3、beforeMount：掛載前，雖然得不到具體的DOM元素，但vue掛載的根節點已經創建，下面vue對DOM的操作將圍繞這個根元素繼續進行。
beforeMount這個階段是過渡性的，一般一個項目只能用到一兩次。
4、mounted：掛載完成創建vue實例，和雙向綁定，掛載DOM和渲染，可在mounted鈎子函數中對掛載的DOM進行操作。
5、beforeUpdate：數據更新前，數據驅動DOM。在數據更新后雖然沒有立即更新數據，但是DOM中的數據會改變，這是vue雙向數據綁定的作用。
可在更新前訪問現有的DOM，如手動移出添加的事件監聽器。
6、updated：數據更新后，完成虛擬DOM的重新渲染和打補丁。組件DOM已完成更新，可執行依賴的DOM操作。
注意：不要在此函數中操作數據（修改屬性），會陷入死循環。
7、beforeDestroy：銷毀前，可做一些刪除提示，如：您確定刪除xx嗎？
8、destroyed：銷毀后，當前組件已被刪除，銷毀監聽事件，組件、事件、子實例也被銷毀。這時組件已經沒有了，無法操作里面的任何東西了。
9、額外的鈎子：activated：在使用vue-router時有時需要使用來緩存組件狀態，這個時候created鈎子就不會被重復調用了。
如果我們的子組件需要在每次加載的時候進行某些操作，可以使用activated鈎子觸發。
10、額外的鈎子：deactivated：組件被移除時使用。
八、父子組件的生命周期
1、執行順序：
1）父組件開始執行到beforeMount 然后開始子組件執行，最后是父組件mounted。
2）如果有兄弟組件，父組件開始執行到beforeMount，然后兄弟組件依次執行到beforeMount，然后按照順序執行mounted，最后執行父組件的mounted。
2、完成流程順序
1）加載渲染過程：父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
2）子組件更新過程：父beforeUpdate->子beforeUpdate->子updated->父updated
3）父組件更新過程：父beforeUpdate->父updated
4）銷毀過程：父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
3、概念：
1）當子組件掛載完成后，父組件才會掛載。
2）當子組件完成掛在后，父組件會主動執行一次beforeUpdated/updated鈎子函數（僅首次）
3）父子組件在data變化中是分別監控的，但是更新props中的數據是關聯的。
4）銷毀父組件時，先將子組件銷毀后才會銷毀父組件。
5）兄弟組件的初始化（mounted之前）是分開進行，掛載是從上到下依次進行
6）當沒有數據關聯時，兄弟組件之間的更新和銷毀是互不關聯的
九。Vue2.0 和 Vue3.0 生命周期發生了什么變化
1、最大的改變就是setUp，setUp這個生命周期發生在beforeCreate和created之前。 兩種形式的生命周期函數是可以共存，它們都會被執行。
2、其他都是大同小異，只不過換了寫法前面加上了on 都寫在setUp里面，在使用時需要按需引入函數
十、你怎么理解vue中的diff算法？
diff算法是虛擬DOM技術的必然產物：通過新舊虛擬DOM作對比，將變化的地方更新在真實DOM上；另外，也需要diff高效的執行對比過程，從而降低時間復雜度為0(N).
比較兩組子節點是算法的重點，首先假設頭尾節點可能相同做4次比對嘗試；
如果沒有找到相同節點才按照通用方式遍歷查找，查找結束再按情況處理剩下的節點；
借助key通常可以非常准確的找到相同節點，因此整個patch過程非常高效。
十一、什么是vdom
vdom是一種使用js對象來描述真實DOM的技術，通過這種技術,們能精確知道哪些真實DOM改變了，從而盡量減少DOM操作的性能開銷。
十二、Vue中 Computed 和Watch、Method的區別
computed:計算屬性只有在相關的數據發生變化時才會改變要計算的屬性，當相關數據沒有變化是，它會讀取緩存。
一個數據受多個數據影響
1、支持緩存，只有依賴數據發生改變，才會重新進行計算
2、不支持異步，當computed內有異步操作時無效，無法監聽數據的變化
watch:當需要在數據變化時執行異步或開銷較大的操作時，一個數據影響多個數據
1、 不支持緩存，數據變直接會觸發相應的操作；
2、watch支持異步；
methods:調用總會執行該函數，每次都會重新計算
十三、請你說說nextTick
將回調延遲到下次 DOM 更新循環之后執行。在修改數據之后立即使用它，然后等待 DOM 更新
十四、的作用是什么?
答：keep-alive 是 Vue 內置的一個組件，可以使被包含的組件保留狀態，或避免重新渲染。 比如說把某一個列表滑動到第100條位置，切換到一個組件后這次切換回該組件還會保持在100條的位置。
十五、vue-loader是什么？使用它的用途有哪些？
答：vue文件的一個加載器，將template/js/style轉換成js模塊。
用途：js可以寫es6、style樣式可以scss或less、template可以加jade等
十六、for循環為什么使用key? 不寫會怎么樣
答：需要使用key來給每個節點做一個唯一標識，Diff算法就可以正確的識別此節點。作用主要是為了高效的更新虛擬DOM。 不寫key 會導致所有列表DOM重新渲染，大大降低性能，同時編輯器也會報錯。
十七、watch怎么深度監聽對象變化？
答：當設置deep：true時，就可以深度監聽到對象到內部值的變化。
十八、請你說一下v-modal
答：v-model用於表單數據的雙向綁定，其實它就是一個語法糖，這個背后就做了兩個操作：v-bind綁定一個value屬性；v-on指令給當前元素綁定input事件。
十九、delete和Vue.delete刪除數組的區別
答：delete只是被刪除的元素成了空項，其他的元素鍵值還是不變。 Vue.delete 直接刪除了數組，改變了數組的鍵值。
二十、組件傳值方式有哪些
1、父傳子：子組件通過props['xx'] 來接收父組件傳遞的屬性 xx 的值 寫法 ：key="數據"
2、子傳父：子組件通過 this.$emit('fn',value) 來傳遞,父組件通過接收 fn 事件方法來接收回調 寫法 ：@ 提交的事件 = 接收的函數
3、Vuex
二十一、vuex是什么？怎么使用？哪種功能場景使用它？
Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。簡單來說就是：應用遇到多個組件共享狀態時，使用vuex。
場景：多個組件共享數據或者是跨組件傳遞數據時
vuex的流程：頁面通過mapAction異步提交事件到action。action通過commit把對應參數同步提交到mutation，mutation會修改state中對應的值。最后通過getter把對應值跑出去，在頁面的計算屬性中，通過，mapGetter來動態獲取state中的值
二十二、vuex有哪幾種屬性
有五種,分別是State , Getter , Mutation , Action , Module (就是mapAction)
1、state：vuex的基本數據，用來存儲變量
2、geeter：從基本數據(state)派生的數據，相當於state的計算屬性
3、mutation：提交更新數據的方法，必須是同步的(如果需要異步使用action)。每個mutation 都有一個字符串的 事件類型 (type) 和 一個 回調函數 (handler)。回調函數就是我們實際進行狀態更改的地方，並且它會接受 state 作為第一個參數，提交載荷作為第二個參數。
4、action：和mutation的功能大致相同，不同之處在於 ==》1. Action 提交的是 mutation，而不是直接變更狀態。 2. Action 可以包含任意異步操作。
5、modules：模塊化vuex，可以讓每一個模塊擁有自己的state、mutation、action、getters,使得結構非常清晰，方便管理。
二十三、Vue.js中ajax請求代碼應該寫在組件的methods中還是vuex的actions中？
1、如果請求來的數據是不是要被其他組件公用，僅僅在請求的組件內使用，就不需要放入vuex 的state里。
2、如果被其他地方復用，這個很大幾率上是需要的，如果需要，請將請求放入action里，方便復用，並包裝成promise返回，在調用處用async await處理返回的數據。如果不要復用這個請求，那么直接寫在vue文件里很方便
二十四、vue-router相關題目
1、vue-router 是什么?它有哪些組件？
答：vue用來寫路由一個插件。有router-link、router-view， 重定向：redirect
2、vue-router 怎么定義動態路由? 怎么獲取傳過來的值？怎么獲取當前的路由信息？
答：1）定義動態路由：在router目錄下的index.js文件中，對path屬性加上/:id。
2）獲取傳過來的值：使用router對象的params.id。
3）獲取當前路由信息：使用this.$router獲取當前的路由信息。 Vue 3.0 中通過 getCurrentInstance 方法獲取當前組件的實例，然后通過 ctx 屬性獲得當前上下文，ctx.$router 是 Vue Router 實例，currentRoute 可以獲取到當前的路由信息
3、vue-router鈎子函數有哪些？都有哪些參數？有哪些作用？
答：1）全局前置守衛：beforeEach((to, from, next)=>{})， 它接收3個參數，分別是 to：即將進入的路由對象。form：當前導航正要離開的路由。next()：進行管道中的下一個鈎子
2）全局后置鈎子：afterEach((to,form)=>{})
3）全局解析守衛：beforeResolve((to, from, next)=>{})
4）組件內導航鈎子：beforeRouteEnter (to, from, next) {// 在渲染該組件的對應路由被 confirm 前調用// 不能獲取組件實例 this// 因為當守衛執行前，組件實例還沒被創建},
5）組件內導航鈎子：beforeRouteUpdate (to, from, next) {// 在當前路由改變，但是該組件被復用時調用。// 可以訪問組件實例 this},
6）組件內導航鈎子：beforeRouteLeave (to, from, next) {// 導航離開該組件的對應路由時調用 //可以訪問組件實例 this}。
作用：vue-router提供的導航鈎子主要用來攔截導航，讓它完成跳轉或取消。
4、vue中router與route區別
router：對象是全局路由的實例，是router構造方法的實例。比如 this.$router.push。 英標：[ˈruːtər , ˈraʊtər] 低音
route：對象表示當前的路由信息，包含了當前 URL 解析得到的信息。包含當前的路徑，參數，query對象等。 英標：[ruːt] 重音
5、vue-router的兩種模式的區別
答：1）hash模式：地址欄后面帶有#號，當#后面的hash發生變化,不會導致瀏覽器向服務器發出請求,瀏覽器不發出請求就不會刷新頁面,並且會觸發hasChange這個事件,通過監聽hash值的變化來實現更新頁面部分內容的操作，做到單頁面無刷新
2）history模式：主要使用HTML5的pushState()和replaceState()這兩個api來實現的，pushState()可以改變url地址且不會發送請求，replaceState()可以讀取歷史記錄棧,還可以對瀏覽器記錄進行修改
他們最大的區別：
hash模式的hashchange，只能改變#后面的url片段。
history模式則會將URL修改的就和正常請求后端的URL一樣,如后端沒有配置對應/user/id的路由處理，則會返回404錯誤
6、vue-router實現路由懶加載（ 動態加載路由 ）的方式有哪些?
1、vue的異步組件技術 , 可以實現按需加載 .但是,這種情況下一個組件生成一個js文件。
2、路由懶加載(使用import)。
3、webpack提供的require.ensure()
7、vue-router 傳參
Params：只能使用name，不能使用path，參數不會顯示在路徑上，瀏覽器強制刷新參數會被清空。
// 傳遞參數 this.$router.push({ name: Home， params: { number: 1 , code: '999' } }) // 接收參數 const p = this.$route.params
Query：參數會顯示在路徑上，刷新不會被清空name 可以使用path路徑
// 傳遞參數 this.$router.push({ name: Home， query: { number: 1 , code: '999' } }) // 接收參數 const q = this.$route.query
Vue.js 是什么
是一套用於構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，易於上手，還便於與第三方庫或有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅動。