1齿兔、vue的生命周期
初始化：
beforeCreate：一般沒啥用丙曙，數(shù)據(jù)沒掛載拯杠，DOM 沒有渲染出來
created：數(shù)據(jù)已經(jīng)掛載，但是 DOM 沒有渲染出來窒盐，這個(gè)鉤子函數(shù)里面可以做一些異步的操作草则，并且在這個(gè)鉤子函數(shù)里面更改數(shù)據(jù)不會(huì)影響到運(yùn)行時(shí)鉤子函數(shù)。
beforeMounte：這個(gè)函數(shù)代表著 DOM 快要被渲染出來了蟹漓，但是還沒有被渲染出來炕横，跟 created 一樣，做一些異步的操作
mounted：數(shù)據(jù)已經(jīng)掛載葡粒，真實(shí) DOM 也已經(jīng)渲染出來了份殿。
運(yùn)行中：
beforeUpdate：當(dāng)數(shù)據(jù)改變的時(shí)候才會(huì)執(zhí)行這個(gè)函數(shù)膜钓，在這個(gè)函數(shù)里面拿到的是改變之前的數(shù)據(jù)，千萬不能在這個(gè)里面更改數(shù)據(jù)卿嘲，否則會(huì)造成死循環(huán)
updated：拿到的是更新之后的數(shù)據(jù)颂斜，在這函數(shù)里面，生成新的 DOM 拾枣，跟上一次的虛擬 DOM 做對比沃疮，比較出差異之后，然后再渲染真實(shí)的 DOM 梅肤，當(dāng)數(shù)據(jù)引發(fā) DOM 重新渲染的時(shí)候司蔬，在這個(gè)鉤子函數(shù)里面就可以獲取到真實(shí)的 DOM。
銷毀時(shí)：
beforeDestroy：銷毀前姨蝴，做一些善后的操作
destroyed：數(shù)據(jù)的雙向綁定俊啼，監(jiān)聽都刪除了，但是真實(shí)的 DOM 還是存在的
2似扔、什么是 MVVM吨些？與 MVM 的區(qū)別搓谆。
mvvm 是一種簡化用戶界面的事件驅(qū)動(dòng)編程方式
View是視圖層炒辉，也是用戶交互層，主要是由 html 和 css 構(gòu)建
Model是視圖層泉手，泛指后端進(jìn)行的各種邏輯處理和數(shù)據(jù)操控
ViewModel是指視圖數(shù)據(jù)層黔寇，在這一層，前端開發(fā)者對從后端獲取到的 Model 數(shù)據(jù)進(jìn)行轉(zhuǎn)換處理斩萌，做二次封裝缝裤，以生成符合 View 層使用預(yù)期的視圖數(shù)據(jù)模型。
MVVM 主要是解決 MVM 的反饋不即使的問題颊郎。
3憋飞、完整的生命周期函數(shù)到底是什么？
beforeCreate：基本什么都干不了姆吭，data 沒有注入到 vue 里面榛做，獲取不到 data 信息，做一些預(yù)處理功能内狸，
created：數(shù)據(jù)可以獲取检眯，并且在鉤子函數(shù)中更改數(shù)據(jù)不會(huì)調(diào)用鉤子函數(shù)的執(zhí)行
beforeMount：此時(shí)還沒有生成 html 到頁面中。
mounted：初始化階段最后一個(gè)鉤子函數(shù)昆淡，可以操作真實(shí) DOM 了
數(shù)據(jù)更新的時(shí)候锰瘸，先調(diào)用 beforeUpdate，然后數(shù)據(jù)更新引發(fā)視圖渲染完成之后昂灵，才會(huì)執(zhí)行 updated
4避凝、VUE 中如何封裝組件舞萄？什么組件，為什么要封裝組件管削？組件中 data 為什么是一個(gè)函數(shù)鹏氧？
為什么要封裝組件？
主要就是為了解耦佩谣，提高代碼復(fù)用率把还。
什么是組件？
頁面上可以復(fù)用的都稱之為組件
它是 HTML茸俭、CSS吊履、JS 的聚合體。
組件就相當(dāng)于庫调鬓，把一些能在項(xiàng)目里或者不同項(xiàng)目里可以復(fù)用的代碼進(jìn)行需求性的封裝艇炎。
組件中的 data 為什么是一個(gè)函數(shù)
讓每個(gè)返回的實(shí)例都可以維護(hù)一份被返回對象的獨(dú)立的拷貝。
√谖选（延申）
什么是模塊缀踪？
相當(dāng)于業(yè)務(wù)邏輯塊，把同一類的項(xiàng)目里的功能邏輯進(jìn)行需求性的封裝虹脯。
模塊化開發(fā)：就是將 js 文件按照功能分離驴娃，根據(jù)需求引入不同的文件，源于服務(wù)端
組件化開發(fā)：具備單個(gè)可移植性循集，即“隨用隨加載”唇敞，不需要為其準(zhǔn)備復(fù)雜的基礎(chǔ)條件，組件是聲明式咒彤，非命令式
5疆柔、axios 是什么？
axios 主要是用來向后臺發(fā)送請求镶柱。支持promise
axios 支持并發(fā)請求旷档，可以同時(shí)請求多個(gè)接口
axios 提供了攔截器。
axios 可以防止 跨站請求偽造歇拆。也就是釣魚網(wǎng)站
axios 攔截器：
分為 request 請求攔截和 response 響應(yīng)攔截
request 請求攔截：發(fā)送請求前統(tǒng)一處理鞋屈。例如：設(shè)置請求頭 headers
response 相應(yīng)攔截：是根據(jù)響應(yīng)的代碼來進(jìn)行下一步的操作。例如：由于當(dāng)前的 token 過期查吊，接口返回 401 未授權(quán)谐区。那么我們就要跳轉(zhuǎn)到登陸界面
axios/fetch 是基于 promise。后者主要利用 callback 的形式
fetch 脫離了 xhr逻卖，是新的語法宋列，默認(rèn)不傳 cookie。另外也監(jiān)聽不到請求進(jìn)度
?6评也、VUEX 是什么炼杖？怎么使用灭返？那種場合能用？
vuex 是一個(gè)專門為 vue 構(gòu)建的狀態(tài)管理工具坤邪，主要是為了解決 多組間之間狀態(tài)共享問題熙含。強(qiáng)調(diào)的是集中式管理，（組件與組件之間的關(guān)系變成了組件與倉庫之間的關(guān)系）
vuex 的核心包括：state（存放狀態(tài)）艇纺、mutations（同步的更改狀態(tài)）怎静、actions（發(fā)送異步請求，拿到數(shù)據(jù)）黔衡、getters（根據(jù)之前的狀態(tài)派發(fā)新的狀態(tài)）蚓聘、modules（模塊劃分）
state 發(fā)布一條新的數(shù)據(jù)，在 getters 里面根據(jù)狀態(tài)派發(fā)新的狀態(tài)盟劫，actions 發(fā)送異步請求獲取數(shù)據(jù)夜牡，然后在 mutations 里面同步的更改數(shù)據(jù)
應(yīng)用場合：購物車的數(shù)據(jù)共享、登入注冊
7侣签、vue 的指令用法
v-if 條件渲染指令
v-bind 綁定屬性指令
v-on 監(jiān)聽事件指令
v-for 循環(huán)渲染指令
v-text 渲染文本
8塘装、導(dǎo)航鉤子？
vur-router
spa 單頁面應(yīng)用：指的是根據(jù)檢測地址欄的變化將對應(yīng)的路由組建進(jìn)行切換
也就是說影所，一個(gè)項(xiàng)目里面只有一個(gè)完整的 HTML 頁面蹦肴。其余的都是 HTML 組件，頁面之間跳轉(zhuǎn)刷新型檀，都是組件之間切換冗尤，減少了 http 請求的發(fā)送，提高了用戶體驗(yàn)胀溺，
原理就是 js 感知到 url 的變化，通過這一點(diǎn)皆看，可以用 js 動(dòng)態(tài)的將當(dāng)前頁面內(nèi)容清除仓坞，然后將下一個(gè)頁面的內(nèi)容掛載到當(dāng)前頁面上，這個(gè)時(shí)候路由不是后端做腰吟，而是前端完成无埃，判斷到底是顯示哪個(gè)頁面，清除不需要的毛雇，顯示需要的嫉称，這個(gè)過程就是單頁面應(yīng)用。
好處就是:良好的交互體驗(yàn)灵疮，良好的前后端分離模式织阅，減輕了服務(wù)器的壓力，公用一套代碼震捣。
history? ?hash
聲明式導(dǎo)航：router-link
history：這個(gè)模式會(huì)直接改變 url 地址荔棉，需要后端給我們配置闹炉。
hash：這個(gè)模式檢測到 url 地址欄 # 后面的路徑標(biāo)識符的更改，從而觸發(fā)瀏覽器的 hashchange 事件润樱，然后通過 location.hash 得到當(dāng)前的路徑標(biāo)識符渣触，在進(jìn)行路由跳轉(zhuǎn)操作。
一級路由壹若、二級路由嗅钻？ children
路由跳轉(zhuǎn)、兩種方式：router-link to? ? ? ? ?this.$router.push()
路由守衛(wèi) 攔截器
攔截器：request請求攔截器和response響應(yīng)攔截器 request 請求攔截：發(fā)送請求前同一處理店展，
例如：設(shè)置請求頭 headers啊犬、應(yīng)用的版本號、終端類型等 response 響應(yīng)式攔截：有時(shí)候我們要根據(jù)響應(yīng)式的狀態(tài)來進(jìn)行下一步操作壁查，
例如：由于當(dāng)前的 token 過期觉至，接口返回 401 未授權(quán)，我們就需要進(jìn)行重新登錄的操作睡腿。
導(dǎo)航鉤子就是 vue 中路由 vue-router
分類：? ? beforeEach? ? 在路由切換開始的時(shí)候調(diào)用? ? afterEach? ? 在路由切換離開的時(shí)候調(diào)用局部到單個(gè)路由? ? beforeRouteEnter組件的鉤子函數(shù)? ? beforeRouterEnter? ? beforeRouterUpdata? ? beforeRouteLeave三個(gè)屬性：? ? to 即將進(jìn)入的目標(biāo)對象? ? from 導(dǎo)航要離開的導(dǎo)航對象? ? next 是一個(gè)函數(shù)语御，調(diào)用 resolve 執(zhí)行下一步
$router：是路由操作對象，只寫對象
$route：路由信息對象席怪，只讀對象
?9应闯、v-model 是什么？
用于表單的數(shù)據(jù)雙向綁定的指令
有兩個(gè)操作：
1挂捻、v-bind 綁定了一個(gè) value 的屬性
2碉纺、v-on 把當(dāng)前元素綁定到一個(gè)事件上
10、swiper 插件從后臺獲取數(shù)據(jù)沒有問題刻撒，css 代碼啥的也沒有問題骨田，但是圖片沒動(dòng)，怎么解決声怔。
主要是因?yàn)?swiper 提前初始化了 态贤，但是數(shù)據(jù)還沒有完全出來。
this.$nextTick()? ?主要作用就是等數(shù)據(jù)改變引發(fā) DOM 重新渲染完成之后才會(huì)執(zhí)行醋火。
11悠汽、keep-alive
當(dāng)在這些組件之間切換的時(shí)候，想保持這么組建的狀態(tài)芥驳，以避免反復(fù)渲染導(dǎo)致的性能問題
原理：在 created 的時(shí)候柿冲，將需要緩存的虛擬 DOM 節(jié)點(diǎn)放到 cache 中，在 reader 的時(shí)候根據(jù) name 再進(jìn)行取出兆旬。
路由懶加載：
就是當(dāng)你需要的時(shí)候才會(huì)加載假抄，按需加載。
單頁面應(yīng)用的問題就是所有的頁面都需要引入一個(gè) js 文件，wepback 打包的時(shí)候生成一個(gè) js 慨亲，這個(gè) js 會(huì)再所有組件切換的時(shí)候調(diào)用
單頁引入了所有的一個(gè) js 婚瓜，日志也會(huì)引入所有的一個(gè) js ，這樣首頁加載速度變慢刑棵。解決方法就是路由懶加載巴刻。
12、單頁應(yīng)用
原理就是通過檢測地址欄的變化將對應(yīng)路由組件進(jìn)行組件之間的切換蛉签。
一個(gè)項(xiàng)目只有一個(gè)完整的 html 頁面胡陪，其他部分都是 html 組件組成，頁面的跳轉(zhuǎn)只是局部的刷新碍舍，不會(huì)重新加載全部的資源柠座，組件之間的之間的切換快，比較容易實(shí)現(xiàn)轉(zhuǎn)場動(dòng)畫片橡。頁面每次跳轉(zhuǎn)時(shí)候妈经，并不需要做 html 文件請求，這樣就節(jié)約了很多 http 發(fā)送請求捧书，我們的切換頁面的時(shí)候吹泡，速度會(huì)很快。
優(yōu)點(diǎn)：良好的交互體驗(yàn)经瓷、良好的前后端工作分離模式爆哑、減輕服務(wù)器的壓力、公用一套后端程序代碼
缺點(diǎn)：SEO 難度較大舆吮、頁面上不能進(jìn)行前進(jìn)后退管理揭朝、初次加載耗時(shí)多。
13色冀、什么是vue-loader潭袱？
vue-loder 就是一個(gè)加載器，把 vue 組件轉(zhuǎn)換成 js 模式呐伞。
為什么要轉(zhuǎn)譯此模塊敌卓？
可以動(dòng)態(tài)的渲染一些數(shù)據(jù)，對三個(gè)標(biāo)簽做了優(yōu)化
template? 寫虛擬 DOM
script? 寫 es6 語法
style? 默認(rèn)可以用 scss 語法伶氢，提供了作用域
并且開發(fā)階段提供了熱加載器
14、slot 是什么瘪吏？如何使用癣防？
插槽：具名插槽、匿名插槽掌眠、作用域插槽
在引用子組件開始標(biāo)簽和結(jié)束標(biāo)簽之間蕾盯，插入一個(gè)任意一個(gè)元素，用 slot 標(biāo)簽包裹一下蓝丙，在父組件調(diào)用子組件的時(shí)候级遭，這個(gè)插槽就會(huì)插入到子組件對應(yīng)的具名插槽的位置望拖。slot 有一個(gè) name 屬性，加 name 屬性就是具名插槽挫鸽，不加就是匿名插槽说敏。
15、什么是虛擬 DOM 丢郊？與 key 值得關(guān)系盔沫？
DOM 是用 js 對象記錄一個(gè) dom 節(jié)點(diǎn)得副本，當(dāng) dom 發(fā)生更改的時(shí)候枫匾，先用虛擬 dom 進(jìn)行 diff 算法架诞，算出最小差異，然后再修改真實(shí) dom干茉。
當(dāng)用傳統(tǒng)得方式操作 DOM 得時(shí)候谴忧，瀏覽器會(huì)從構(gòu)建 DOM 樹開始從頭到尾執(zhí)行一邊流程，效率很低角虫，而虛擬 DOM 是用 javascrit 對象表示的沾谓，而操作 javascriot 是很簡便高效的。虛擬 dom 和真實(shí)的 dom 有一層映射關(guān)系上遥，很多需要操作 dom 的地方都會(huì)去操作虛擬 dom 搏屑，最后一次更新 dom，因而可以提高性能粉楚。
虛擬 dom 的缺點(diǎn)：
1辣恋、代碼更多，體積更大
2模软、內(nèi)存占用增大
3伟骨、小量的單一的 DOM 修改使用 虛擬 DOM 成本反而更高，不如直接修改真實(shí) dom 快
16燃异、如何理解 vue 的 mvvm 框架携狭？
是一種簡化用戶界面的事件驅(qū)動(dòng)編程方程式。
view 層是視圖層回俐，使用戶交互層逛腿，主要是 HTML 和 CSS 來構(gòu)建
moedl 層數(shù)據(jù)模型層，泛指后端進(jìn)行的各種邏輯處理和數(shù)據(jù)操控
viewmodel 層是指視圖數(shù)據(jù)層仅颇。在這一層单默，前端開發(fā)者對從后端獲取的 model 數(shù)據(jù)進(jìn)行轉(zhuǎn)換處理，做二次封裝忘瓦，以生成符合 view 層使用預(yù)期的視圖數(shù)據(jù)模型搁廓。
數(shù)據(jù)雙向綁定：
? 當(dāng)視圖改變更新模型層，當(dāng)模型層改變更新視圖
vue 的數(shù)據(jù)雙向綁定：
vue 采用數(shù)據(jù)劫持&訂閱者發(fā)布模式的方法：vue 在創(chuàng)建 vm 的時(shí)候，會(huì)將數(shù)配置在實(shí)例中境蜕，然后會(huì)使用 object.defineproperty 對這些數(shù)據(jù)進(jìn)行處理蝙场，并且會(huì)將數(shù)據(jù)進(jìn)行處理，并且會(huì)為這些數(shù)據(jù)添加 getter 與 setter 方法粱年，當(dāng)數(shù)據(jù)改變之后售滤，就會(huì)觸發(fā)數(shù)據(jù)的 setter 方法，從而觸發(fā) vm 的 watcher 方法逼泣，然后數(shù)據(jù)改變了趴泌， vm 進(jìn)一步渲染 view 視圖。
17拉庶、active-class 是哪個(gè)組件的屬性嗜憔。
? vue-router 模塊提供的 router-link 組件的屬性
在 vue-router 中要使用 active-class 有兩種方式
1、直接在路由 js 文件中配置 linkActiveClass
2氏仗、在 router-link 中寫入 active-class
18吉捶、scss 是什么？
scss 是一種預(yù)編譯器皆尔。
19呐舔、vue 的第三方插件：
miui-ui? ?element-ui? ? vuex
20、axios 是什么慷蠕？
axios 是用來發(fā)送請求的珊拼。get 和 post 兩種
get：通過定義一個(gè) get 函數(shù)，他有兩個(gè)參數(shù)流炕，第一個(gè)參數(shù)就表示我們請求的 url 地址澎现，第二個(gè)參數(shù)就是我們要攜帶的請求參數(shù)，get 函數(shù)返回的是一個(gè) promise 對象每辟，當(dāng)axios 請求成功的時(shí)候服務(wù)器返回給我們的是 reslove 返回值剑辫，請求錯(cuò)誤的時(shí)候返回給我們的是 reject 錯(cuò)誤值，最后通過 export 拋出 get 函數(shù)
post：方法基本與 get 方法一致渠欺，但是需要設(shè)置請求頭妹蔽。
21、promise 的了解
promise 是異步函數(shù)的解決方案挠将，從語法上講 promise 是一個(gè)對象胳岂，從他可以獲取異步操作的消息， promise 有三個(gè)狀態(tài)舔稀，pending 等待狀態(tài)旦万、fulfilled 成功狀態(tài)、rejected 失敗狀態(tài)镶蹋，狀態(tài)一旦更改，就不會(huì)在變，創(chuàng)造出 promise 實(shí)例后贺归，他會(huì)立刻執(zhí)行淆两，promise 有兩個(gè)API 方法：resolve 和 reject，resolve 代表的是回調(diào)成功后的函數(shù)拂酣，reject 代表的是失敗后返回的結(jié)果秋冰，原型上有兩個(gè)放法：.then 和 .catch 方法，例如請求接口 .then 拿到的是數(shù)據(jù)婶熬，通過 .catch 捕獲錯(cuò)誤異常
22剑勾、自定義指令的方法：
vue.directive
鉤子：bind、inserted赵颅、update虽另、unbind
參數(shù)：el、binding饺谬、vnode
23捂刺、vue 之間的通信
父子：子組件用 props，接受父組件傳遞過來的值
子父：父組件生命一條數(shù)據(jù)募寨，再寫一個(gè)改變自身的方法族展，傳遞給子組件，然后把子組件添加到點(diǎn)擊事件上
兄弟之間傳值：
ref 鏈：父組件要給子組件傳值拔鹰，在子組件上定義一個(gè) ref 屬性仪缸，這樣通過父組件的 $refs 屬性就可以獲取子組件的值了，也可以進(jìn)行父子列肢，兄弟之間的傳值
even.bus 事件總線：簡單的場景下恰画，使用一個(gè) 空的 VUE 實(shí)例作為事件總線，可以實(shí)現(xiàn)兄弟之間的通信例书。
24锣尉、異步函數(shù)
async await
async 函數(shù)的返回值是一個(gè) Promise 對象。當(dāng)這個(gè) async 函數(shù)返回一個(gè)值時(shí)决采，Promise的 resolve 方法會(huì)負(fù)責(zé)傳遞這個(gè)值（相當(dāng)于Promise.resolve(value)）自沧；當(dāng) async 函數(shù)拋出異常時(shí)，Promise 的 reject 方法也會(huì)傳遞這個(gè)異常值（相當(dāng)于Promise.reject(value)）树瞭。
async?函數(shù)中可能會(huì)有?await?表達(dá)式拇厢，await 表達(dá)式會(huì)暫停當(dāng)前?async function?的執(zhí)行，等待 Promise 處理完成晒喷。若 Promise 正常處理(fulfilled)孝偎，其處理結(jié)果作為 await 表達(dá)式的值，繼續(xù)執(zhí)行?async function
25凉敲、VUE 路由之間的傳值
使用$router.push 拼接參數(shù)傳參
使用name來確定匹配的路由衣盾，通過params來傳遞參數(shù)
使用path來匹配路由寺旺，然后通過query來傳遞參數(shù)
26、模塊化開發(fā)
一個(gè)模塊就是實(shí)現(xiàn)特定功能的文件
好處：
1势决、避免了變量污染阻塑，命名沖突
2、提高代碼復(fù)用率
3果复、提高維護(hù)性
4陈莽、依賴關(guān)系的管理
27、vue 的計(jì)算屬性
在模板中放入太多的邏輯會(huì)讓模板過重且難以維護(hù)虽抄，在需要對數(shù)據(jù)進(jìn)行復(fù)雜處理走搁，且可能多次使用的情況下，盡量采用計(jì)算屬性的方法
好處
1迈窟、是數(shù)據(jù)處理結(jié)構(gòu)清晰
2私植、依賴于數(shù)據(jù)，數(shù)據(jù)更新菠隆，處理結(jié)果自動(dòng)更新兵琳，
3、計(jì)算屬性內(nèi)部 this 指向vm實(shí)例
4骇径、在 template 調(diào)用時(shí)躯肌，直接寫計(jì)算屬性姓名即可
5、常用的是 getter 方法破衔，獲取數(shù)據(jù)清女，也可以使用 set方法改變數(shù)據(jù)，
6晰筛、相較于methods嫡丙，不管依賴的數(shù)據(jù)變不變，methods都會(huì)重新計(jì)算读第，但是依賴數(shù)據(jù)不變的時(shí)候conputed從緩存中獲取曙博，不會(huì)重新計(jì)算，
