Vue面試題
一：什么是MVVM
MVVM是是Model-View-ViewModel的縮寫，Model代表數據模型，定義數據操作的業務邏輯，View代表視圖層，負責將數據模型渲染到頁面上，ViewModel通過雙向綁定把View和Model進行同步交互，不需要手動操作DOM的一種設計思想。
二：MVVM和MVC區別？和其他框架(jquery)區別？那些場景適用？
MVVM和MVC都是一種設計思想，主要就是MVC中的Controller演變成ViewModel,，MVVM主要通過數據來顯示視圖層而不是操作節點，解決了MVC中大量的DOM操作使頁面渲染性能降低，加載速度慢，影響用戶體驗問題。主要用於數據操作比較多的場景。
三：Vue的優缺點是什么
優點：低耦合，可重用性，獨立開發，可測試，漸進式
缺點：不利於SEO，社區維護力度不強，相比還不夠成熟
三：組件之間傳值
父向子傳值：屬性傳值，父組件通過給子組件標簽上定義屬性，子組件通過props方法接收數據；
子向父傳值：事件傳值，子組件通過$emit(‘自定義事件名’，值)，父組件通過子組件上的@自定義事件名=“函數”接收
非父子組件傳值：全局定義bus，var bus=new Vue() ; 發送者， bus.$emit(‘自定義名’，值) ；接受者，bus.$on(‘自定義名’，(值)=>{})
四：路由之間傳參
路由字典中：routes={path:’/detail/:id’,component:Detail}
標簽中：<router-link :to=”‘/detail/’+item.id ”>
Js中：this.$route.params.id
五：axios的特點和使用
特點：基於promise的Http庫，支持promise的所有API，用來請求和響應數據的，而且對響應回來的數據自動轉化為json類型，安全性較高，客戶端支持防御XRSF(跨站請求偽造)，默認不攜帶cookie;
使用：下載包后引入 import axios from ‘axios’ , 讓其攜帶cookie ，axios.defaults.withCredentials=true, 然后添加到prototype中，Vue.prototype.$axios=axios ,組建中不用引入直接使用this.$axios.get(url,{params:{id:1}})。
六：Vuex是什么？怎么使用？用於哪些場景？
Vuex是框架中狀態管理；新建目錄store...export,然后main.js引入store再注入到vue實例中；用於購物車，登錄狀態，單頁應用等。
七：Vuex有哪幾種屬性？
五種：state，action，mutation，getter，module
State：數據源存放地，數據是響應式的
Action: 邏輯處理，提交的是mutation,包含任意異步操作
Mutation: 修改state里的公共數據
Getter: 相當於計算屬性，可以復用，可緩存
Module: 模塊化
八：Vuex取值
This.$store.state.city
This.$store.commit(‘getData’)
this.$store.dispath(‘getData’)
This.$store.getters.getData
九：不使用vuex會帶來什么問題？
可維護性下降，可讀性下降，增加耦合
十：v-show和v-if指令的共同點和不同點
V-show指令是通過修改元素的display的css樣式使其顯示隱藏
V-if指令是銷毀和重建DOM達到讓元素顯示隱藏
十一：如何讓css只在當前組件中起作用?
將當前組件的<style>修改為<style scoped>
十二：<keep-alive></keep-alive>的作用是什么，如何使用？
包裹動態組件時，會緩存不活動的組件實例，主要用於保留組件狀態或避免重新渲染；
使用：簡單頁面時
緩存： <keep-alive include=”組件名”></keep-alive>
不緩存：<keep-alive exclude=”組件名”></keep-alive>
使用：復雜項目時
路由字典中定義{path:’/detail’,meta:{keepAlive:false/true}} 是否緩存
根目錄中：
<keep-alive><router-view v-if=”$route.meta.keepAlive”></router-view></keep-alive>
<keep-alive><router-view v-if=” ! $route.meta.keepAlive”></router-view></keep-alive>
十三：Vue數據雙向綁定原理
Vue數據雙向綁定是通過數據劫持結合發布者-訂閱者模式方式來實現的，語法主要有{{}}和v-model。首先用遞歸方法遍歷所有的屬性值，再用Object.defineProperty()給屬性綁定getter和setter方法添加一個observe(val)監聽器對數據進行劫持監聽;然后創建一個訂閱器來在getter里收集訂閱者並創建和綁定watcher，如果數據變化，訂閱者就會執行自己對應的更新函數;watcher就是在自身實例化的時候往訂閱器里添加自己，自身必須有一個update的數據，是監聽器和模板渲染的通信橋梁;最后創建解析模板指令compile，替換數據，初始化視圖。最終observer來監聽自己的model數據變化通過compile解析編譯模板指令，利用watcher搭起observer和compile之間的通信橋梁，達到數據變化->視圖更新雙向綁定效果。
十四：Vue生命周期
vue生命周期就是從開始創建，初始化數據，編譯模板，掛載DOM，渲染->更新->渲染，銷毀等一系列過程。生命周期鈎子如下：
組件實例周期：
BeforeCreate：實例初始化后，無法訪問方法和數據；
Created：實例創建完成，可訪問數據和方法，注意，假如有某些數據必須獲取才允許進入頁面的話，並不適合；
beforeMonut：掛載DOM之前
Mounted :el被新創建的vm.$el替換，可獲取dom，改變data，注意，beforeRouterEnter的next的鈎子比mountend觸發靠后；
beforeUpdate：數據更新時調用，發生在虛擬DOM重新渲染前；
Updated：數據更改后，可以執行依賴於DOM的操作，注意，應該避免在此期間更改狀態，可能會導致更新無限循環；
beforeDestroy：實例銷毀之前，這一步還可以用this獲取實例，一般在這一步做重置操作，比如清定時器監聽dom事件；
Destroyed：實例銷毀后，會解除綁定，移除監聽。
十五：路由鈎子
全局路由鈎子：
Router.beforeEach((to,from,next)=>{... next()})
注意：一定要調用next(),否則頁面卡在那，一般用於對路由跳轉前進行攔截，參數：
To：即將要進入的目標路由對象 From：當前導航正要離開的路由
Next()：跳轉下一個頁面 next(‘/path’)：跳轉指定路由
Next(false)：返回原來頁面 next((vm)=>{})：且在beforeRouterEnter用
比如根據登錄狀態跳轉頁面判斷(to.name->name是路由名)
Router.beforeEach(function(to,from,next){if(to.name==’login’){..}next();})
Router.afterEach((to,from)=>{}) 跳轉后調用沒有next方法
組件路有鈎子：
beforeRouteEnter(to,from,next){next(vm=>{...})} 路由跳轉時
注意：此鈎子在beforeCreate之前執行，但是next在組件mounted周期之后,無法直接調用this訪問組件實例，可用next訪問vm實例，修改數據；
beforeRouteLeave(to,from,next){...next()} 離開路由時
注意：可以直接訪問this,next不可回調
beforeRouteUpdate 路由切換時
十六：指令周期
Bind：一次初始化調用 inserted：被綁定元素插入父節點調用
Update：模板更新調用 unbind：指令與元素解綁時
Vue.nextTick：在dom更新后執行，一般用於dom操作
Vue.$nextTick：一直到真實的dom渲染結束后執行
Ex:created(){this.$nextTick(()=>{...})}
十七：生命周期的作用是什么？
它的生命周期有多個事件鈎子，讓我們在控制整個Vue實例的過程時更容易形成好的邏輯。
十八：第一次加載會觸發哪幾個鈎子？
會觸發beforeCreate , created ,beforeMount ,mounted
十九：說出至少4種vue當中的指令和用法？
V-if：判斷是否隱藏 v-for：數據循環 v-bind：綁定屬性
v-model：雙向綁定 v-is：動態組件特殊特性 v-on：事件綁定
二十：vue-loader是什么？用途有哪些？
是解析vue文件的一個加載器，用途是js可以寫es6，style樣式可以scss或less，template可以加jade
二十一：active-class是那個組件屬性？
Vue-router模塊的router-link組件,設置激活時樣式
二十二：vue中使用插件的步驟是什么？
Inport ... from ... 引入插件，Vue.use(...)全局注冊
二十三：為什么使用key？
當有相同標簽名和元素切換時，需要通過key特性設置唯一的值來標記讓vue區分它們，否則vue為了效率只會替換相同標簽內部的內容
二十三：為什么避免v-if和v-for用在一起？
當vue處理指令時，v-for比v-if具有更高的優先級，通過v-if移動到容器的元素，不會在重復遍歷列表中的每個值，取而代之的是，我們只檢查它一次，且不會v-if為否的時候運算v-for
二十四：VNode是什么？虛擬DOM是什么？
Vue在頁面上渲染的節點，及其子節點稱為虛擬節點，簡稱VNode；虛擬DOM時由組件樹建立起來的整個VNode樹的稱呼
二十五：scss是什么？有哪些特性？怎么使用？
是css的預編譯，特新有可以用變量($變量名=值)，可以用混合器()，可以嵌套，可以繼承，可以運算，安裝先裝css-loader，node-loader，sass-loader，在webpack.base配置，style標簽上加lang=”scss”
二十五：Vue router如何實現跳轉
<router-link></router-link> router.push(‘/’) router.go(0)
二十六：vue router跳轉和location.href有什么區別？
Router是hash改變；location.href是頁面跳轉，刷新頁面
二十七：v-model原理
<input v-model="sth">
==相當於通過oninput(用戶輸入時觸發)把表單值給到變量
<input v-bind:value="sth" v-on:input="sth=$event.target.value">
二十八：vue的template的理解
通過compile編譯template生成AST語法樹，AST語法樹經過generate轉化為render function字符串后返回虛擬DOM節點(Vnode)的過程
二十九：vue和react區別
相同點：
都鼓勵組件化，都有’props’的概念，都有自己的構建工具，Reat與Vue只有框架的骨架，其他的功能如路由、狀態管理等是框架分離的組件。
不同點：
React：數據流單向，語法—JSX，在React中你需要使用setState()方法去更新狀態
Vue：數據雙向綁定，語法--HTML，state對象並不是必須的，數據由data屬性在Vue對象中進行管理。適用於小型應用，但對於對於大型應用而言不太適合。
三十：單頁面和多頁面的區別
單頁面：
整個項目中只有一個完整的HTML頁面，其它"頁面"只是一段HTML片斷而已
優: 請求少
缺: 不利於搜索引擎優化
頁面跳轉本質：把當前DOM樹中某個DIV刪除，下載並掛載另一個div片斷
多頁面：
項目中有多個獨立的完整的HTML頁面
缺: 請求次數多，效率低
頁面跳轉本質:
刪除舊的DOM樹，重新下載新的DOM樹
三十一：Vue的SPA如何優化加載速度
減少入口文件體積，靜態資源本地緩存，開啟Gzip壓縮，使用SSR，nuxt.js
三十二：Axios發送post請求
Import qs from ‘qs’
Var data=qs.stringify({
Number : ’1’
})
Axios.post(url,data).then()
VUE如何自定義屬性
全局自定義：
Vue.directive(‘focus’,{
Inserted:function(el){
el.focus() //聚焦函數
}
})
三十三：組件自定義
directive{
inserted:function(el){
el.focus()
}
}
三十四：Vue和vuex 有什么區別
Vue是框架，vuex是插件，vuex是專門為vue應用程序開發的狀態管理模式
三十五：.Vuex中actions和mutations的區別
Mutations的更改是同步更改，用於用戶執行直接數據更改，this.$store.commit(‘名’)觸發
Actions的更改是異步操作，用於需要與后端交互的數據更改,this.$store.dispath(“名”)觸發
注意：
1)：定義actions方法創建一個更改函數時，這個函數必須攜帶一個context參數，用於觸發mutations方法，context.commit(‘修改函數名’ , ’異步請求值’)；
2)：mutations第一個參數必須傳入state，第二個參數是新值