vue最全面试题
1.mvc，mvp與mvvm模式
MVC
MVC是應(yīng)用最廣泛的軟件架構(gòu)之一，一般 MVC 分為：
Model（ 模型 ） 、 Controller（ 控制器 ） 、 View（ 視圖 ） 。
這主要是基于分層的目的，讓彼此的職責(zé)分開。 View 一般通過 Controller 來和 Model 進行聯(lián)系。
Controller 是 Model 和 View 的協(xié)調(diào)者， View 和 Model 不直接聯(lián)系。基本聯(lián)系都是單向的。
1、View 傳送指令到 Controller
2、Controller 完成業(yè)務(wù)邏輯后，要求 Model 改變狀態(tài)
3、Model 將新的數(shù)據(jù)發(fā)送到 View，用戶得到反饋
MVP
MVP 模式將 Controller 改名為 Presenter ，同時改變了通信方向
1、各部分之間的通信，都是雙向的。
2、View 與 Model 不發(fā)生聯(lián)系，都通過 Presenter 傳遞。
3、View 非常薄，不部署任何業(yè)務(wù)邏輯，稱為"被動視圖"（Passive View），即沒有任何主動性，而 Presenter非常厚，所有邏輯都部署在那里。
MVVM
MVVM 是把 MVC 的 Controller 和 MVP 的 Presenter 改成了 ViewModel
View 的變化會自動更新到 ViewModel ， ViewModel 的變化也會自動同步到 View 上顯示。這種自動
同步是因為 ViewModel 中的屬性實現(xiàn)了 Observer ，當(dāng)屬性變更時都能觸發(fā)對應(yīng)的操作。
2 .MVVM模式的優(yōu)點以及與MVC模式的區(qū)別？
MVVM模式的優(yōu)點：
1、低耦合： 視圖（View）可以獨立于 Model 變化和修改，一個 ViewModel 可以綁定到不同
的"View"上，當(dāng)View變化的時候Model可以不變，當(dāng)Model變化的時候View也可以不變。
2、可重用性： 你可以把一些視圖邏輯放在一個ViewModel里面，讓很多 view 重用這段視圖邏輯。
3、獨立開發(fā)： 開發(fā)人員可以專注于業(yè)務(wù)邏輯和數(shù)據(jù)的開發(fā)（ViewModel），設(shè)計人員可以專注于頁面設(shè)計。
4、可測試： 界面素來是比較難于測試的，而現(xiàn)在測試可以針對ViewModel來寫
MVVM 和 MVC 的區(qū)別：
mvc 和 mvvm 其實區(qū)別并不大。都是一種設(shè)計思想
mvc 中 Controller演變成 mvvm 中的 viewModel，
mvvm 通過數(shù)據(jù)來顯示視圖層而不是節(jié)點操作。
mvvm主要解決了: mvc中大量的DOM 操作使頁面渲染性能降低，加載速度變慢，影響用戶體驗
3.常見的實現(xiàn)MVVM數(shù)據(jù)綁定的做法有哪些？
（1）發(fā)布者-訂閱者模式（backbone.js）
（2）臟值檢查（angular.js）
（3）數(shù)據(jù)劫持（vue.js）
1、發(fā)布者-訂閱者模式:
一般通過 sub , pub 的方式實現(xiàn)數(shù)據(jù)和視圖的綁定監(jiān)聽，
更新數(shù)據(jù)方式通常做法是 vm.set('property', value) 。
這種方式現(xiàn)在畢竟太low了，我們更希望通過 vm.property = value 這種方式更新數(shù)據(jù)，同時自動更新視圖，于是有了下面兩種方式
2、臟值檢查:
angular.js 是通過臟值檢測的方式比對數(shù)據(jù)是否有變更，來決定是否更新視圖，
最簡單的方式就是通過 setInterval() 定時輪詢檢測數(shù)據(jù)變動，angular只有在指定的事件觸發(fā)時進入臟值檢測
3、數(shù)據(jù)劫持:
vue.js 則是采用 數(shù)據(jù)劫持 結(jié)合 發(fā)布者-訂閱者 模式的方式，
通過 Object.defineProperty() 來劫持各個屬性的 setter ， getter ，
在數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)
4 .Object.defineProperty()方法的作用是什么？
Object.defineProperty() 方法 會直接在一個對象上定義一個新屬性，或者修改一個對象的現(xiàn)有屬性， 并返回這個對象。
語法：Object.defineProperty(obj, prop, descriptor)
參數(shù)說明：
obj：必需。目標(biāo)對象
prop：必需。需定義或修改的屬性的名
descriptor：必需。目標(biāo)屬性所擁有的特性
返回值：傳入函數(shù)的對象。即第一個參數(shù)obj
5.vue.js的兩個核心是什么？
1、數(shù)據(jù)驅(qū)動，也叫雙向數(shù)據(jù)綁定。
Vue.js數(shù)據(jù)觀測原理在技術(shù)實現(xiàn)上，利用的是ES5Object.defineProperty和存儲器屬性: getter和setter（所以只兼容IE9及以上版本），可稱為基于依賴收集的觀測機制。核心是VM，即ViewModel，保證數(shù)據(jù)和視圖的一致性
2、組件系統(tǒng)
.vue組件的核心選項
1、模板（template）：模板聲明了數(shù)據(jù)和最終展現(xiàn)給用戶的DOM之間的映射關(guān)系。
2、初始數(shù)據(jù)（data）：一個組件的初始數(shù)據(jù)狀態(tài)。對于可復(fù)用的組件來說，這通常是私有的狀
態(tài)。
3、接受的外部參數(shù)(props)：組件之間通過參數(shù)來進行數(shù)據(jù)的傳遞和共享。
4、方法（methods）：對數(shù)據(jù)的改動操作一般都在組件的方法內(nèi)進行。
5、生命周期鉤子函數(shù)（lifecycle hooks）：一個組件會觸發(fā)多個生命周期鉤子函數(shù)，最新2.0版本對于生命周期函數(shù)名稱改動很大。
6、私有資源（assets）：Vue.js當(dāng)中將用戶自定義的指令、過濾器、組件等統(tǒng)稱為資源。一個組件可以聲明自己的私有資源。私有資源只有該組件和它的子組件可以調(diào)用
6.什么是vue生命周期？
Vue實例有一個完整的生命周期，也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載Dom、渲染→更新→渲染、銷毀等一系列過程，我們稱這是Vue的生命周期。通俗說就是Vue實例從創(chuàng)建到銷毀的過程，就是生命周期
7.vue生命周期鉤子函數(shù)都有哪些？分別是什么意思
總共分為8個階段創(chuàng)建前/后，載入前/后，更新前/后，銷毀前/后。
創(chuàng)建前/后： 在beforeCreated階段，vue實例的掛載元素el還沒有。在created階段,vue實例的數(shù)據(jù)對象data有了,el還沒有.
載入前/后：在beforeMount階段，vue實例的$el和data都初始化了，但還是掛載之前為虛擬的dom節(jié)點，data.message還未替換。在mounted階段，vue實例掛載完成，data.message成功渲染。
更新前/后：當(dāng)data變化時，會觸發(fā)beforeUpdate和updated方法。
銷毀前/后：在執(zhí)行destroy方法后，對data的改變不會再觸發(fā)周期函數(shù)，說明此時vue實例已經(jīng)解除了事件監(jiān)聽以及和dom的綁定，但是dom結(jié)構(gòu)依然存在
8.vue生命周期的作用是什么？
生命周期中有多個事件鉤子，讓我們在控制整個 vue 實例的過程時更容易形成好的邏輯
9.第一次頁面加載會觸發(fā)哪幾個鉤子 ？
第一次加載會觸發(fā) beforeCreate、created、beforeMount、mounted
10.簡述每個周期具體適合哪些場景?
生命周期鉤子的一些使用方法：
beforecreate : 可以在這加個loading事件，在加載實例時觸發(fā)
created : 初始化完成時的事件寫在這里，如在這結(jié)束loading事件，異步請求也適宜在這里調(diào)用
mounted : 掛載元素，獲取到DOM節(jié)點
updated : 如果對數(shù)據(jù)統(tǒng)一處理，在這里寫上相應(yīng)函數(shù)
beforeDestroy : 可以做一個確認停止事件的確認框 nextTick : 更新數(shù)據(jù)后立即操作dom
11.created和mounted的區(qū)別? ?
created:在模板渲染成html前調(diào)用，即通常初始化某些屬性值，然后再渲染成視圖。
mounted:在模板渲染成html后調(diào)用，通常是初始化頁面完成后，再對html的dom節(jié)點進行一些需要的操作
12.vue獲取數(shù)據(jù)在哪個周期函數(shù)?？
看實際情況，一般在 created（或beforeRouter） 里面就可以，如果涉及到需要頁面加載完成之后的話就用 mounted。
在created的時候，視圖中的html并沒有渲染出來，所以此時如果直接去操作html的dom節(jié)點，一定找不到相關(guān)的元素而在mounted中，由于此時html已經(jīng)渲染出來了，所以可以直接操作dom節(jié)點，（此時document.getelementById 即可生效了）
13.什么是vue路由？
Vue路由就是指vue-router,其中router是指根據(jù)url分配到對應(yīng)的處理程序,所以說路由就是用來解析URL以及調(diào)用對應(yīng)的控制器并返回從視圖對象中提取好的網(wǎng)頁代碼給web服務(wù)器,最終返回給客戶端
14.vue路由的優(yōu)點以及缺點是什么？
優(yōu)點：
不需要每次都從服務(wù)器獲取，渲染頁面更快速
缺點:
不利于SEO
使用瀏覽器前進、后退按鍵時重新發(fā)送請求，未合理利用緩存
單頁面無法記住之前滾動的位置
15.請簡單說一下vue路由的原理？
Vue的路由實現(xiàn)：hash模式 和history模式
hash模式：在瀏覽器中符號“#”，#以及#后面的字符稱之為hash，用window.location.hash讀取；
特點：
hash雖然在URL中，但不被包括在HTTP請求中；用來指導(dǎo)瀏覽器動作，對服務(wù)端安全無用，hash不會重加載頁面。hash 模式下，僅 hash 符號之前的內(nèi)容會被包含在請求中，如 http://www.xxx.com，因此對于后端來說，即使沒有做到對路由的全覆蓋，也不會返回 404 錯誤。history模式：history采用HTML5的新特性；且提供了兩個新方法：pushState（），replaceState（）可以對瀏覽器歷史記錄棧進行修改，以及popState事件的監(jiān)聽到狀態(tài)變更。
特點:
history 模式下，前端的 URL 必須和實際向后端發(fā)起請求的 URL 一致，如 http://www.xxx.com/items/id。后端如果缺少對 /items/id 的路由處理，將返回 404 錯誤。Vue-Router 官網(wǎng)里如此描述：“不過這種模式要玩好，還需要后臺配置支持……所以呢，你要在服務(wù)端增加一個覆蓋所有情況的候選資源：如果 URL 匹配不到任何靜態(tài)資源，則應(yīng)該返回同一個 index.html 頁面，這個頁面就是你 app 依賴的頁面
16.怎么定義 vue-router 的動態(tài)路由?如何獲取動態(tài)路由傳過來的值
定義動態(tài)路由：
在 router 目錄下的 index.js 文件中，對 path 屬性加上 /:id。
獲取動態(tài)路由傳過來的值:
使用 router 對象的 params.id 獲取
17.請描述vue-router路由守衛(wèi)的作用？
vue-router 的導(dǎo)航鉤子，主要用來作用是攔截導(dǎo)航，讓他完成跳轉(zhuǎn)或取消。
18.路由守衛(wèi)使用的方式有幾種？
全局的
單個路由獨享的
組件級的
19.路由守衛(wèi)的鉤子函數(shù)都有哪些？分別是什么意思？
vue-router全局有三個守衛(wèi)：
router.beforeEach 全局前置守衛(wèi) 進入路由之前
router.beforeResolve 全局解析守衛(wèi)(2.5.0+) 在beforeRouteEnter調(diào)用之后調(diào)用
router.afterEach 全局后置鉤子 進入路由之后
組件內(nèi)的守衛(wèi)：
beforeRouteEnter
beforeRouteUpdata(2.2新增)
beforeRouteLeave
20.路由守衛(wèi)鉤子函數(shù)里面的三個參數(shù)分別是什么
to,from,next 這三個參數(shù)：
to和from是將要進入和將要離開的路由對象,路由對象指的是平時通過this.$route獲取到的路由對象。next:Function 這個參數(shù)是個函數(shù)，且必須調(diào)用，否則不能進入路由(頁面空白)。next() 進入該路由。next(false): 取消進入路由，url地址重置為from路由地址(也就是將要離開的路由地址)。next 跳轉(zhuǎn)新路由，當(dāng)前的導(dǎo)航被中斷，重新開始一個新的導(dǎo)航。
我們可以這樣跳轉(zhuǎn)：next('path地址')或者next({path:''})或者next({name:''})且允許設(shè)置諸如 replace: true、name: 'home' 之類的選項以及你用在router-link或router.push的對象選項。
21路由守衛(wèi)的解析流程
導(dǎo)航被觸發(fā)
在失活的組件里調(diào)用離開守衛(wèi)
調(diào)用全局的 beforeEach 守衛(wèi)
在重用的組件里調(diào)用 beforeRouteUpdate 守衛(wèi)
在路由配置里調(diào)用 beforEnter
解析異步路由組件
在被激活的組件里調(diào)用 beforeRouteEnter
調(diào)用全局的 beforeResolve 守衛(wèi)
導(dǎo)航被確認
調(diào)用全局的 afterEach 鉤子
觸發(fā) DOM 更新
在創(chuàng)建好的實例調(diào)用 beforeRouteEnter 守衛(wèi)中傳給 next 的回調(diào)函數(shù)
22.vue-router路由傳參的方式一共有幾種？他們是如何就收傳遞過來的參數(shù)？
分別是query，params，動態(tài)路由傳參
接收：
通過query方式傳遞過來的參數(shù)一般是通過this.$route.query接收
通過params方式傳遞過來的參數(shù)一般是通過this.$route.params接收
通過動態(tài)路由傳參方式傳遞過來的參數(shù)一般是通過this.$route.params接收
23.query和arams方式的區(qū)別是什么？
query使用path和name傳參跳轉(zhuǎn)都可以，而params只能使用name傳參跳轉(zhuǎn)。
傳參跳轉(zhuǎn)頁面時，query不需要再路由上配參數(shù)就能在新的頁面獲取到參數(shù)，params也可以不用配，但是params不在路由配參數(shù)的話，當(dāng)用戶刷新當(dāng)前頁面的時候，參數(shù)就會消失。也就是說使用params不在路由配參數(shù)跳轉(zhuǎn)，只有第一次進入頁面參數(shù)有效，刷新頁面參數(shù)就會消失
24.什么是路由懶加載？以及路由懶加載是如何實現(xiàn)的
按需加載
當(dāng)打包構(gòu)建應(yīng)用時，Javascript 包會變得非常大，影響頁面加載。如果我們能把不同路由對應(yīng)的組件分割成不同的代碼塊，然后當(dāng)路由被訪問的時候才加載對應(yīng)組件，這樣就更加高效了。
結(jié)合 Vue 的 異步組件 和 Webpack 的 代碼分割 功能，輕松實現(xiàn) 路由組件的懶加載。
25.什么是vuex?
Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。
我的個人理解是vuex其實就是一個管理數(shù)據(jù)的工具，通過vuex我們可以解決組件之間數(shù)據(jù)共享的問題，后期也方便我們管理以及維護
26.vuex的優(yōu)點和缺點是什么？
優(yōu)點：
解決了非父子組件的消息傳遞（將數(shù)據(jù)存放在state中）
減少了AJAX請求次數(shù)，有些情景可以直接從內(nèi)存中的state獲取數(shù)據(jù)方便管理以及維護
缺點：小型項目使用的話，vuex會顯得有點繁瑣冗余
刷新瀏覽器，vuex中的state會重新變?yōu)槌跏紶顟B(tài)，我們?nèi)绾我鉀Q這個問題就可能需要用本地存儲或者vuex的一個插件
27.一般什么情況下使用 vuex?
當(dāng)頁面的組件比較多，業(yè)務(wù)比較復(fù)雜時，數(shù)據(jù)難以維護，這個時候我一般會使用vuex
28.vuex的原理是什么？
每個Vuex應(yīng)用的本質(zhì)是store(倉庫），包含應(yīng)用中大部分的狀態(tài)。
state, getters,mutations,actions,module
29.請你說一下vuex的用法？
安裝vuex
在src目錄下創(chuàng)建store文件夾，在該文件夾內(nèi)創(chuàng)建index.js
在store文件夾內(nèi)的index.js文件內(nèi)引入vuex
然后在引入vue
調(diào)用Vue.use()方法注冊vuex
對vuex進行實例化
進行實例化之后通過export default導(dǎo)出
在main.js文件內(nèi)引入store文件夾內(nèi)的index.js文件
掛載到new Vue實例上面
初始化vuex的狀態(tài)和屬性
30.你在項目中哪些地方用到了vuex？
登錄模塊，購物車模塊，訂單模塊，商品模塊
31.vuex的運行機制什么？
在vue組件里面，通過dispatch來觸發(fā)actions提交修改數(shù)據(jù)的操作。
然后再通過actions的commit來觸發(fā)mutations來修改數(shù)據(jù)。
mutations接收到commit的請求，就會自動通過Mutate來修改state（數(shù)據(jù)中心里面的數(shù)據(jù)狀態(tài)）里面的數(shù)據(jù)。
最后由store觸發(fā)每一個調(diào)用它的組件的更新
32.vuex都有哪些屬性
State、Getter、Mutation 、Action、Module 五種
state => 基本數(shù)據(jù)
getters => 從基本數(shù)據(jù)派生的數(shù)據(jù)
mutations => 提交更改數(shù)據(jù)的方法，同步！
actions => 像一個裝飾器，包裹mutations，使之可以異步。
modules => 模塊化Vuex
33. 你是如何獲取state的值，如何調(diào)用gettes里面定義的方法？如何調(diào)用mutations的方法？如何調(diào)用actions的方法？
state的值獲取的方式有兩種：
第一種是組件里面進行獲取 this.$store.state.狀態(tài)
第二種是在vuex內(nèi)部進行獲取
函數(shù)參數(shù)里面會有一個state參數(shù)，通過這個state參數(shù)我們可以直接拿到state的值getters的方法在組件內(nèi)調(diào)用的話是通過this.$store.getters來進行獲取，而getters的作用一般是用來獲取state的值
mutations的方法在組件內(nèi)調(diào)用時一般是通過this.$store.commit()來進行調(diào)用，而mutations的作用一般是用來改變state里面狀態(tài)，只不過通過同步的方式去改變
actions的方法在組件內(nèi)調(diào)用的話是通過this.$store.dispatch()來進行調(diào)用，而actions的作用一般是用來異步的改變狀態(tài)，actions也支持promise
34.vuex里面module屬性的作用是什么？
module屬性相當(dāng)于是vuex里面的模塊化方法，module屬性可以讓每一個模塊擁有自己的state、mutation、action、getters,使得結(jié)構(gòu)非常清晰，方便管理。
比如：購物車模塊，訂單模塊，商品模塊...每個模塊都有自己的數(shù)據(jù)，建立多個模塊文件來保存各自對應(yīng)模塊的數(shù)據(jù)，最后，在module屬性里面進行合并
35不使用vuex會帶來什么問題?
可維護性會下降，想修改數(shù)據(jù)要維護三個地方；
可讀性會下降，因為一個組件里的數(shù)據(jù)，根本就看不出來是從哪來的；
增加耦合，大量的上傳派發(fā)，會讓耦合性大大增加，本來Vue用Component就是為了減少耦合，現(xiàn)在這么用，和組件化的初衷相背
36.Vue.js中ajax請求代碼應(yīng)該寫在組件的methods中還是vuex的actions中？
如果請求來的數(shù)據(jù)是不是要被其他組件公用，僅僅在請求的組件內(nèi)使用，就不需要放入vuex 的state里。
如果被其他地方復(fù)用，這個很大幾率上是需要的，如果需要，請將請求放入action里，方便復(fù)用，
并包裝成promise返回，在調(diào)用處用async await處理返回的數(shù)據(jù)。如果不要復(fù)用這個請求，那么直接寫在vue文件里很方便。
37.Vuex中如何異步修改狀態(tài)？
actions去異步的改變state的狀態(tài)，mutations是同步改變狀態(tài)，調(diào)用actions內(nèi)定義的方法，需要通過this.$store.dispatch(),mutations方法是通過this.$store.commit()來進行調(diào)用,而在actions要調(diào)用mutations的方法，通過commit來進行調(diào)用
38.Vuex中actions和mutations的區(qū)別 ?
Action 提交的是 mutation，而不是直接變更狀態(tài)。
Action 可以包含任意異步操作
mutations只能是同步操作
39.頁面刷新后vuex的state數(shù)據(jù)丟失怎么解決？
localStorage 或者就是sessionStorage ，或者借用輔助插vuex-persistedstate
vuex怎么知道state是通過mutation修改還是外部直接修改的？
通過$watch監(jiān)聽mutation的commit函數(shù)中_committing是否為true
40.請你說一下你對vue組件通信的理解？
vue組件的通信是為了解決組件之間數(shù)據(jù)傳遞的問題，分為
父子組件之間的通信
非父子組件的通信
41.?父組件如何與子組件怎么通信？
父組件將數(shù)據(jù)綁定在子組件上
子組件通過props屬性來進行接收，props的接收方式有兩種，分別是數(shù)組的方式接收，以及對象的方式接收，他們兩個的不同是對象接收的方式可以設(shè)置默認值以及傳遞過來的類型
42.子組件如何與父組件進行通信？
在子組件里用 $emit 向父組件觸發(fā)一個事件，父組件監(jiān)聽這個事件就行了
43.非父子組件之間如何進行通信 ?
非父子組件之間通信我們可以使用vuex或者event bus，而這個event bus我們把它稱之為中央時間總線，vue中央事件總線這種方法適用于任何情況的父子組件通信，同級別組件通信，相當(dāng)于組件通信間的萬金油。但是碰到多人合作時，代碼的維護性較低，代碼可讀性低（這個缺點可以忽略）
44.除了組件之間的這種通信方式以外，還是什么方式可以讓組件的數(shù)據(jù)進行共享
路由，vuex，本地存儲
45.props接收父組件發(fā)送過來的數(shù)據(jù)有幾種形式
兩種，一種是數(shù)組，另外一種是對象
46.非父子組件之間通信的原理是什么
非父子組件之間通信我們一般使用event bus，中央時間總線來進行解決，而中央事件總線的魚哪里是通過vue實例化之后的對象調(diào)用bus.emit來進行數(shù)據(jù)的發(fā)送,通過bus.$on來進行接收
47.請描述vue的優(yōu)點是什么？缺點是什么?？
vue的優(yōu)點:
????????簡單易用
????????靈活漸進式
????????輕量高效
????????壓縮之后20KB大小
????????虛擬DOM
????????MVVM
????????數(shù)據(jù)驅(qū)動視圖
????????常規(guī)的操作方式都是DOM
????????普通的javascript數(shù)據(jù)
????????組件化
組件化優(yōu)點：
????????提高開發(fā)效率
????????方便重復(fù)使用
????????簡化調(diào)試步驟
????????提升整個項目的可維護性
????????便于協(xié)同開發(fā)
·vue的缺點：VUE不支持IE8
48.請你描述一下vue中讓元素隱藏的方式有幾種？區(qū)別是什么 ？
v-show v-if
共同點:
v-if 和 v-show 都是動態(tài)顯示DOM元素。
區(qū)別：
編譯過程： v-if 是 真正 的 條件渲染，因為它會確保在切換過程中條件塊內(nèi)的 事件監(jiān)聽器
和 子組件 適當(dāng)?shù)?被銷毀 和 重建 。 v-show 的元素 始終會 被渲染并保留 在 DOM 中 。 v- show 只是簡單地 切換 元素的 CSS 屬性 display 。
編譯條件： v-if 是惰性的：如果在初始渲染時條件為假，則什么也不做。直到條件第一次變?yōu)檎鏁r，才會開始渲染條件塊。 v-show 不管初始條件是什么，元素總是會被渲染，并且只是簡單地基于 CSS 進行切換
性能消耗： v-if有更高的切換消耗。v-show有更高的 初始渲染消耗`。
應(yīng)用場景： v-if適合運行時條件很少改變時使用。v-show適合頻繁切換
49.請你說一下keep-alive？你在哪些地方用過它？
keep-alive： 主要用于 保留組件狀態(tài) 或 避免重新渲染 。
比如： 有一個 列表頁面 和一個 詳情頁面 ，那么用戶就會經(jīng)常執(zhí)行打開 詳情=>返回列表=>打開詳情 這樣的話 列表 和 詳情 都是一個 頻率很高 的頁面，那么就可以 對列表組件 使用 `進行緩存，這樣用戶每 次 返回列表 的時候，都能 從緩存中快速渲染 ，而 不是重新渲染
50.請你說一下為什么使用key ？
key值：用于 管理可復(fù)用的元素。因為 Vue 會盡可能高效地渲染元素，通常會復(fù)用已有元素而不是從頭開始渲染。這么做使 Vue 變得非常快，但是這樣也不總是符合實際需求
51.請描述v-model是什么？以及他的作用？以及他的原理是什么？
v-model就是vue的雙向綁定的指令,能將頁面上控件輸入的值同步更新到相關(guān)綁定的data屬性，也會在更新data綁定屬性時候，更新頁面上輸入控件的值
v-model主要提供了兩個功能，view層輸入值影響data的屬性值，data屬性值發(fā)生改變會更新view層的數(shù)值變化
52.請你描述一下你對$nextTick的理解 ？
nextTick是vue里面提供的一個方法,當(dāng)dom更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào),在修改數(shù)據(jù)之后可以使用 nextTick,那么我們可以在回調(diào)中獲取更新后的dom，我們寫項目的時候，當(dāng)時點擊按鈕要獲取一個元素的內(nèi)容，但是發(fā)現(xiàn)了第二次點擊的時候才回去到了，后臺在網(wǎng)上查了一下，發(fā)現(xiàn)是vue異步更新隊列的問題，后來是通過$nextTick解決的
53.說一下你對漸進式框架的理解 ？
就是主張最少，可以只用一部分功能，而不必使用全部，而且可以跟其他框架結(jié)合使用，沒有多做職責(zé)之外的事
54.說一下你對vue數(shù)據(jù)雙向綁定的理解 ？
就是利用了Object.defineProperty()這個方法重新定義了對象獲取屬性get和設(shè)置屬性set來操作實現(xiàn)的
55.說一下vue單頁面和多頁面的區(qū)別 ？
單頁面就是組件之間來回跳轉(zhuǎn)，跳轉(zhuǎn)速度快，不需要請求數(shù)據(jù) 缺點：首屏加載慢，跳轉(zhuǎn)快
多頁面就是頁面之間來回跳轉(zhuǎn)，跳轉(zhuǎn)速度慢，每次跳轉(zhuǎn)都需要向后臺請求數(shù)據(jù) 缺點：首屏加載快，跳轉(zhuǎn)速度慢
56.請你說一下vue的核心是什么 ？
vue的核心是：數(shù)據(jù)驅(qū)動，組件化開發(fā)
數(shù)據(jù)驅(qū)動：
mvvm模式
組件化開發(fā):
就是內(nèi)聚性和藕合度（高內(nèi)聚，低藕合）
57.請你說一下vue和jquery的區(qū)別 ？
jquery是直接操作DOM的而vue是操作數(shù)據(jù)的
vue做到了數(shù)據(jù)和視圖完全分離，他首先把值和JS對象進行綁定，然后在修改JS對象的值，vue框架就會自動把DOM的值進行更新，對數(shù)據(jù)進行操作不在需要引用相應(yīng)的DOM對象，他們通過Vue對象實現(xiàn)數(shù)據(jù)和視圖的相互綁定
jquery則是先使用選擇器($)來選取Dom對象，然后對Dom對象進行操作（如賦值丶取值丶事件綁定等）
58.你在vue中怎么樣讓你寫的css樣式只在你當(dāng)前寫的組件中顯示
?在style前面加上scoped就可以了
scoped屬性是 HTML5 中的新屬性，是一個布爾屬性，如果使用該屬性，則樣式僅僅應(yīng)用到 style 元素的父元素及其子元素
59.請你說一下在vue中如何獲取dom元素 ?
不同的版本獲取dom對象的方法不同
vue.js 1.0版本中，通過v-el綁定，然后通過this.els.XXX來獲取
vue.js 2.0版本中，通過給元素綁定ref=‘XXX’，然后通過this.$refs.XXX或者this.refs['XXX']獲取
注意：vue中操作dom需要謹慎，尤其是添加或者刪除dom的時候，特別是mounted()和created（）的時候，此時的dom對象還沒有生成，要放在this.nextTick的回調(diào)函數(shù)中
60.說一下你對axios的理解？
axios是一個基于promise的http庫，可以用在瀏覽器和node.js中，axios之所以興起是因為完美的結(jié)合promise使用，可以同時在瀏覽器和服務(wù)器上使用，可配置性強，支持非常多的人性化特性
axios真正能夠單獨的發(fā)送請求，擁有各種請求方法，axios是一個實例對象，axios.create相當(dāng)于類對象的’構(gòu)造函數(shù)‘，對axios來說是有很多內(nèi)部屬性都可以配置的，但是一旦改變axios屬性，意味著以后所有的通過axios實例發(fā)出的請求，都會將外部配置和當(dāng)前axios實例內(nèi)部配置合并，這是非常可怕的。
61.說一下axios如何解決跨域 ？
首先說一下為啥會產(chǎn)生跨域，跨域：瀏覽器從?個域名的?頁去請求另?個域名的資源時，域名、端?、協(xié)議任?不同，都是跨域
使用跨域資源共享，cors進行跨域
changeOrigin: true?：開啟代理：在本地會創(chuàng)建一個虛假服務(wù)器，然后發(fā)送請求的數(shù)據(jù)，并同時接收請求的數(shù)據(jù)，這樣服務(wù)端和服務(wù)端就可以進行數(shù)據(jù)的交互。
apis就是接口實際請求的前綴，去代理了我們的實際的接口前綴的公共部分，也就是協(xié)議+主機名+端口號
62.請描述computed，watch和methods的區(qū)別？以及他們的使用場景
computed計算屬性對比于methods：?
computed計算屬性對比于watch偵聽器：
watch監(jiān)聽的值接收兩個參數(shù)——新值、舊值 ，可以設(shè)置在初始化時調(diào)用
63.請你說一下什么是vue的過濾器？你在項目中哪些地方使用過過濾器?
- 過濾器對將要顯示的文本，先進行特定格式化處理，然后在進行顯示。
- 注意：過濾器并沒有改變原本的數(shù)據(jù)，只是產(chǎn)生新的對應(yīng)的數(shù)據(jù)。
全局過濾器，局部過濾器
過濾器可以用在兩個地方：雙花括號{{}}?和?v-bind 表達式
64.請你說一下你對vue指令的理解？以及他的使用場景？ 并描述你在項目中安歇地方使用過vue自定義指令
v-model：雙向綁定?
-
mount 和 el 的作用相同 .$mount('#app')此方式只是掛載在實例后面。
-
v-text：展示其對應(yīng)的文本
-
v-once：對應(yīng)的標(biāo)簽只渲染一次
-
v-html：把值中的標(biāo)簽渲染出來
-
v-on：事件綁定
-
v-show=‘布爾’：布爾為 true 顯示，false 隱藏。
-
v-cloak：防止頁面加載時出現(xiàn) vuejs 的變量名指令，在項目在開發(fā)中，經(jīng)常會遇到當(dāng)數(shù)據(jù)加載時vue的一些標(biāo)簽就會閃現(xiàn)，然后等數(shù)據(jù)加載完后消失，這時候就需要用到 v-cloak 來解決
-
v-bind：適用于綁定行內(nèi)屬性
-
@keyup.enter：只有按 enter 鍵才會出發(fā)后邊的函數(shù)
使用自定義指令背景
- 代碼復(fù)用和抽象的主要形式是組件。
- 當(dāng)需要對普通 DOM 元素進行底層操作，此時就會用到自定義指令
- 但是，對于大幅度的 DOM 變動，還是應(yīng)該使用組件
65.請你說一下你在vue打包項目的時候有沒有出現(xiàn)什么問題？你是如何解決的 ？
1.syntax Error: Thread Loader (Worker 0) Cannot read property ‘length’ of undefined
解決方法：
npm cache clean -f
npm install
2.?gyp verb cli xxx
解決方法：
先試試
npm i --save node-sass
不行就
cnpm i --save node-sass
66.請你描述一下react和vue的區(qū)別是什么?
React與Vue的相同點
（1）都支持服務(wù)器渲染；
（2）都是數(shù)據(jù)驅(qū)動視圖；
在以前，我們需要頻繁操作DOM實現(xiàn)頁面效果。而Vue和React就隱藏了DOM的頻繁操作，采用數(shù)據(jù)驅(qū)動視圖的方式，只需要關(guān)注數(shù)據(jù)的變化。
（3）都遵循組件化思想；
React和Vue都遵循組件化思想，它們把注意力放在UI層，將頁面分成一一些細塊，也就是組件，組件之間組合嵌套就形成最后的網(wǎng)頁界面。
（4）都使用虛擬DOM；
（5）都有狀態(tài)管理；
react有redux，vue有vuex。
不同點
（1）框架本質(zhì)不同；
Vue本質(zhì)是MVVM框架，是由MVC發(fā)展來的；
React是前端組件框架，是由后端組件演化而來的。
（2）數(shù)據(jù)流不同；
Vue實現(xiàn)雙向綁定，在vue1.0中有兩種方法可以實現(xiàn)雙向綁定，父子組件之間的props以及組件與DOM直接的v-model。vue2去掉了第一種雙向綁定方法，通過v-model實現(xiàn)數(shù)據(jù)雙向綁定。
React一直不支持雙向綁定，提倡的是單向數(shù)據(jù)流（onChange/setState）。
（3）監(jiān)聽數(shù)據(jù)變化的實現(xiàn)原理不同；
Vue通過getter，setter以及一些函數(shù)的劫持，能精確知道數(shù)據(jù)的變化。
React是通過比較引用方式（diff）進行的，當(dāng)應(yīng)用的狀態(tài)改變時，全部組件都會重新渲染。
（4）組件寫法差異；
React推薦的做法是JSX + inline style, 也就是把 HTML 和 CSS 全都寫進 JavaScript 中；
Vue 推薦的做法是 template 的單文件組件格式，即 html,css,JS 寫在同一個文件(vue也支持JSX寫法)
（5）渲染過程不同。
Vue可以更快地計算出Virtual DOM的差異，這是由于它在渲染過程中，會跟蹤每一個組件的依賴關(guān)系，不需要重新渲染整個組件樹。
React在應(yīng)用的狀態(tài)被改變時，全部子組件都會重新渲染。通過shouldComponentUpdate這個生命周期方法可以進行控制。
（6）在state上的不同；
React中，state對象需要用setState方法更新狀態(tài)；
在Vue中，state對象不是必須的，數(shù)據(jù)由data屬性在vue對象中管理。
67.請你說一下如何優(yōu)化vue首屏加載的速度
對于第三方j(luò)s庫的優(yōu)化，分離打包
vue-router使用懶加載
圖片資源的壓縮，icon資源使用雪碧圖
開啟gizp壓縮
webpack相關(guān)配置優(yōu)化
前端頁面代碼層面的優(yōu)化
68.請你說一下你對slot的理解
Vue的slot插槽，可以從字面意思來了解用途，占用占坑的意思，既然是占坑肯定是先占坑后面有其他具體的內(nèi)容來替換代替。根據(jù)slot的應(yīng)用場景可以分為匿名slot和具名slot。
在子組件利用<slot></slot>元素作為承載分發(fā)內(nèi)容的出口，父組件的插槽內(nèi)容將在其中顯示
其實質(zhì)是對子組件的擴展，通過slot插槽向組件內(nèi)部指定位置傳遞內(nèi)容，即將<slot></slot>元素作為承載分發(fā)內(nèi)容的出口；
具名插槽??作用域插槽
69.請你描述一下封裝vue組件的過程 ？
vue組件的定義：
? ? ? ? 組件是vue.js最強大的功能之一
? ? ? ? 組件可以擴展html元素，封裝可重用代碼
?vue組件的功能：
能夠把頁面抽象成多個相對獨立的模塊
實現(xiàn)代碼重用，提高開發(fā)效率的代碼質(zhì)量，使代碼便于維護
vue組件封裝過程：
使用vue.extend()先創(chuàng)建一個組件
使用vue.component()方法注冊組件
接著，如果子組件需要數(shù)據(jù)，可以在props中接收定義
最后，子組件修改好數(shù)據(jù)之后，想把數(shù)據(jù)傳遞給父組件，可以使用emit（）方法
70.如果說你在開發(fā)項目的時候，后臺的接口還沒有寫完，請問這個時候你一般會怎么做 ？
在測試的時候經(jīng)常會碰到后端開發(fā)工程師的接口還沒有開發(fā)完成，但是測試任務(wù)已經(jīng)分配過來。
沒有接口怎么測試呢？
測試人員可以通過mock server自己去造一個接口來訪問。
mock server可用于模擬真實的接口。
收到請求時，它會根據(jù)配置返回對應(yīng)的請求。
在前后端分離的大背景下，mock server 在前端開發(fā)應(yīng)用非廣泛，也影響到測試人員。
1.注冊mock server
◆ 第 1 步，點擊 new;
◆ 第 2 步，選擇 mock server;
◆ 第 3 步，創(chuàng)建新的 api 和 mock server 的名字
2、已有api創(chuàng)建mock服務(wù)
3、創(chuàng)建接口
4、設(shè)置環(huán)境
5、返回動態(tài)參數(shù)
71.vue如何封裝通用組件
數(shù)據(jù)從父組件傳入
在父組件中處理事件
solt的應(yīng)用，插槽使用
統(tǒng)一管理各個組件的公共樣式
72.vue常用的ui組件庫有哪些
Element UI：它是一個用于 Web 的 UI 組件庫
??Vuetify 是一個基于 Vue.js 精心打造 UI 組件庫，整套 UI 設(shè)計為 Material 風(fēng)格
采用 BootstrapVue 構(gòu)建響應(yīng)式、移動優(yōu)先、ARIA項目（Accessible Rich Internet Application，可訪問的富媒體應(yīng)用，即無障礙友好應(yīng)用)，基于 Vue.js 和世界全球最受歡迎的 CSS 前端框架 — Bootstrap v4。
vue-material是一個建立在谷歌的Material Design基礎(chǔ)上的輕量級框架，是一個實現(xiàn)Google像素材料設(shè)計的Vue組件庫，它提供了適合所有現(xiàn)代Web瀏覽器的內(nèi)置動態(tài)主題的組件，它的API也簡單明了
VUX 是基于 WeUI 和 Vue(2.x) 開發(fā)的移動端UI組件庫，主要服務(wù)于微信頁面
View UI，即原先的 iView，是一套基于 Vue.js 的開源 UI 組件庫，主要服務(wù)于 PC 界面的中后臺產(chǎn)品。
Mint-UI 包含豐富的 CSS 和 JS 組件，能夠滿足日常的移動端開發(fā)需要。通過它，可以快速構(gòu)建出風(fēng)格統(tǒng)一的頁面，提升開發(fā)效率。它可以實現(xiàn)真正意義上的按需加載組件。可以只加載聲明過的組件及其樣式文件，無需再糾結(jié)文件體積過大。
Buefy 基于 Bulma 和 Vue.js 的輕量級UI組件，它提供了即裝即用的輕量級組件
Quasar 包括用 Vue 構(gòu)建的幾十個 Vue.js 組件組成，為響應(yīng)式 Web 應(yīng)用程序和混合移動應(yīng)用程序提供的豐富功能選項。組件是作為 Web 組件編寫的，所以它們嵌入了 HTML，CSS 和 Javascript 代碼，只需在頁面和布局模板中標(biāo)注一個 HTML 標(biāo)記即可使用
Vuesax是基于Vue.js的組件框架,從零開始設(shè)計，可以逐步采用。Vuesax致力于促進應(yīng)用程序的開發(fā)，在不刪除必要功能的情況下改進其設(shè)計。“我們希望所有組件具有獨立的顏色，形狀和設(shè)計，以實現(xiàn)我們前端喜歡的自由設(shè)計，同時又不損失創(chuàng)作和生產(chǎn)的速度。
73.vue常用的修飾符一共有哪些
.stop 阻止事件繼續(xù)傳播
.prevent 阻止標(biāo)簽?zāi)J行為
.capture 使用事件捕獲模式,即元素自身觸發(fā)的事件先在此處處理，然后才交由內(nèi)部元素進行處理
.self 只當(dāng)在 event.target 是當(dāng)前元素自身時觸發(fā)處理函數(shù)
.once 事件將只會觸發(fā)一次
.passive 告訴瀏覽器你不想阻止事件的默認行為
74.請你說一下ajax和axios的區(qū)別是什么
axios是通過promise實現(xiàn)對ajax技術(shù)的一種封裝，就像jQuery實現(xiàn)ajax封裝一樣。
簡單來說：?ajax技術(shù)實現(xiàn)了網(wǎng)頁的局部數(shù)據(jù)刷新，axios實現(xiàn)了對ajax的封裝。
axios是ajax ajax不止axios。
75.vue組件如何適配移動端
不僅僅只用到amfe-flexible還需要用到postcss-pxtorem。postcss-pxtorem是將我們在css中寫的px單位轉(zhuǎn)換為rem單位。與其相似的包還有postcss-pxtorem該包則是將px轉(zhuǎn)換成了2倍的rem單位。
76.說一下在vue中如何使用背景圖片 ？
77.如何解決禁用表單后移動端樣式不統(tǒng)一問題
input:disabled{color:xxx;opacity:1;//text-fill-color文本填充顏色，只兼容webkit內(nèi)核-webkit-text-fill-color:xxx;-webkit-opacity:1;font-size:16px; }78.?請你說一下數(shù)據(jù)雙向綁定的原理是什么
vue 雙向數(shù)據(jù)綁定是通過?數(shù)據(jù)劫持?結(jié)合?發(fā)布訂閱模式的方式來實現(xiàn)的，通過Object.defineProperty()來劫持各個屬性的setter，getter，在數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)。
79.什么是請求攔截，什么響應(yīng)攔截？ 攔截點分別是那幾個 ？
請求攔截器的作用是在請求發(fā)送前進行一些操作，例如在每個請求體里加上token，統(tǒng)一做了處理如果以后要改也非常容易。
響應(yīng)攔截器的作用是在接收到響應(yīng)后進行一些操作，例如在服務(wù)器返回登錄狀態(tài)失效，需要重新登錄的時候，跳轉(zhuǎn)到登錄頁
它們的共同點都是:都是提前做了一些操作，可以作為程序優(yōu)化的一種處理方式
總結(jié)
- 上一篇： 谈谈 css 的各种居中——读编写高质量
- 下一篇： PCB布线规则