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