一、vue的原理：

vue是m-v-vm模式，即model - view - viewmodel，通過viewmodel作為中間層也就是VM的實例進行數據的雙向綁定與變化，

1.創建虛擬Dom樹， 也就是Document.createDocumentFragment()方法創建虛擬Dom樹

2.一旦發現數據發生變化，會通過Object.defineProperty定義的數據攔截，截取到數據的變化

3.通過訂閱者-發布者模式，觸發watcher(觀察者)，從而改變虛擬Dom 中的數據

4.最后更新虛擬Dom的元素值從而改變最后渲染Dom樹 的值，完成舒安鄉綁定。

數據的雙向綁定原理：也就是數據劫持，通過Object.definePropertotype()方法實現，根據此方法中的get/set 對數據進行設置，在通過

observer 、compile、watcher 以及訂閱者、發布者之間的關系對數據進行綁定、監聽、響應實現數據雙向綁定。

二、什么是MVVM，與MVC的區別?

mvvm是一種設計思想，是model 、view 、viewmodel的縮寫，viewModel作為數據層model和視圖層view的橋梁把他們連接起來，

是同步數據層和視圖層的一個對象，

MVVM與MVC的區別：她倆都是一種設計思想，區別在于MVVM是主動的MVC，是在MVC的基礎上把controller演變成了viewmodel，解決了

大量的Dom操作，是渲染更加快速,提高性能

三、怎么理解單項數據流？

這個概念出現在組件通信，父組件是通過props把數據傳給子組件的，但這個props只能通過父組件更改，子組件是不能直接更改父組件數據的，

子組件想更改時只能通過$emit發送一個事件,父組件接收到這個事件后有父組件更改。

四、組件中的data為什么是函數？

因為組件是用來復用的，js 對象里是引用關系，這樣作用域沒有隔離，如果data是一個函數的話，這樣每復用一次組件，就會返回一份新的data，

類似于給每個組件實例創建一個私有的數據空間，讓各個組件實例維護各自的數據。而單純的寫成對象形式，就使得所有組件實例共用了一份data，

就會造成一個變了全都會變的結果。所以說vue組件的data必須是函數。這都是因為js的特性帶來的，跟vue本身設計無關。

js本身的面向對象編程也是基于原型鏈和構造函數，應該會注意原型鏈上添加一般都是一個函數方法而不會去添加一個對象了。

五、組件通訊

父傳子：父組件通過在標簽上定義屬性，子組件通過props接受這個數據

子傳父 ： 子組件通過this.$emit 發送一個事件，父組件通過一個回調函數來接收

同級頁面傳參：通過 eventBus中轉站

A頁面通過this.$emit發送事件，this.$bus.$emit("send",this.userName)

B組件通過this.$on 來接受這個事件this.$bus.$on("send",(val)=>{console.log(val)})

六、路由跳轉

1.標簽跳轉 router-link to="/home", 相當于一個 a 標簽

2. js 跳轉 this.$router.push("/home")

七、router 和 route 的區別？

Router 是一個路由實例對象，包含了路由跳轉和鉤子函數

Route 是一個路由信息對象 包括：query 、params path 、name。。

八、vue-router有哪幾種導航鉤子？

全局守衛 ：beforEach(to ,from ,next)、 afterEach(to,from,next)

組件守衛 ：beforRouterEnter(to ,from ,next)

獨享守衛 ：beforEnter(to ,from ,next)

三個參數：

to ：要去的路由，

from ：當前路由 ，

next ：一定要用這個函數才能去到下一個路由

九、vue 指令？

v-if ：條件渲染，是創建和銷毀，一般用于切換比較少的地方

v-show ：顯示和隱藏，相當于display:none，一般用于切換比較頻繁的時候

v-model、 v-bind、 v-for 、v-html 、v-text

9.1: v-if 和 v-for哪個優先級高？

v-for的優先級高,

9.2 事件修飾符：

.stop阻止冒泡，調用 event.stopPropagation()

.prevent阻止默認事件，調用 event.preventDefault()

.capture添加事件偵聽器時使用事件捕獲模式

.self只當事件在該元素本身（比如不是子元素）觸發時觸發回調

.once事件只觸發一次

9.3 vue中的key 的作用?

key屬性作為元素的唯一標識，加載過的數據標簽,不會再去進行循環，不會再次渲染 ，提高性能。

十、說說 vuex ？

狀態管理 有五個屬性

state:存放數據 this.$store.state.name

mutations :是操作state數據的，但它是同步的，調用this.$store.commit('edit',15)

actions : 與mutations一樣但他是異步操作 ，提交的是mutations通過dispatch分發方法。

getters: 相當于計算屬性,

   getters:{
       nameInfo(state){
          return "姓名:"+state.name
       },
       fullInfo(state,getters){
          return getters.nameInfo+'年齡:'+state.age
       }  
     }

在組建通過this.$store.getters.fullInfo

model ：

十一、this.nextTick()

在數據變化后要執行的某個操作，而這個操作需要使用隨數據的變化而變化的Dom結構的時候，這個操作就要放進vue.nextTick()的回電函數中

十二、插槽slot

單個插槽

命名插槽

作用域插槽 scoped slots

十三、生命周期有哪些？及作用？

創建前后 : beforeCreate .Created

掛載前后 ：beforeMount 、Mounted

更新前后 ：beforeUpdate 、Updated

銷毀前后 ：beforeDestory 、Destory

激活前后 ：beforeActive 、Actived

作用是讓組建的可控性更高，利于開發,

十四、keep-alive：

是用來緩存組件實例的，主要用于緩存不活動的組件實例，避免重新渲染

include ： 字符串或正則表達，只有匹配的組件會被緩存

exclude：字符串或正則表達式，任何匹配的組件都不會被緩存

十五、計算屬性computed 和methods 的區別？computed 和 watch的 區別？

計算屬性是自動監聽屬性的變化，從而動態返回內容，監聽是一個過程，當監聽的一個值發生變化時，會觸發一個回調，并做一個事情，所以區別在于用法，

只是需要動態值那就用computer，而如果是要在值發生變化后執行業務邏輯就用watch .

computed 是一個對象時，他有get和 set兩個選項可以緩存的

methods 是一個方法他可以接受參數，而computed不可以，但computed可以緩存的，而methods不可以

watch 監聽屬性配置：

handler

deep 是否深度

immeditate 是否立即執行

十六、vue-loader是什么？使用它的用途有哪些？

是vue文件的一個加載器，跟template、js、

總結

以上是生活随笔為你收集整理的vue 面试题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。