vue

1、 你知道vue的模板語法用的是哪個web模板引擎的嗎？說說你對這模板引擎的理解

Vue使用了Mustache語法小作，即雙大括號的語法。

2稼钩、 你知道v-model的原理嗎顾稀？說說看

原生input其實只是一個語法糖，:bind="value"與@change="value = $event.target.value"的結(jié)合变抽。
自定義組件的時候的v-model默認監(jiān)聽change事件和綁定value 的prop础拨。

3、 你有使用過vue開發(fā)多語言項目嗎绍载？說說你的做法？

采用i18n來解決國際化問題滔蝉，關(guān)于語言環(huán)境的存儲方案击儡，看到有同學(xué)解答localStorage的方式，個人認為這種還是采用Cookie的存儲方法蝠引，通過路由實現(xiàn)不同模塊加載不同的國際化配置文件

我個人網(wǎng)站的多語言是用vuex實現(xiàn)的阳谍，所有語言對于信息都命名蛀柴，存在后端，由restful接口返回矫夯，在切換語言時觸發(fā)dispatch鸽疾，調(diào)用接口，在所有頁面里mapState拿到語言配置训貌，渲染上去

4制肮、 在使用計算屬性的時，函數(shù)名和data數(shù)據(jù)源中的數(shù)據(jù)可以同名嗎递沪？

不可以豺鼻，同名會報錯：The computed property "xxxx" is already defined in data

初始化vm的過程，會先把data綁定到vm,再把computed的值綁定到vm款慨，會把data覆蓋了

可以同名儒飒，但data會覆蓋methods。并且本就不該同名檩奠，同名說明你命名不規(guī)范桩了。

寫在計算屬性中的數(shù)據(jù)名稱，不能在data中定義,因為不管是計算屬性還是data還是props 都會被掛載在vm實例上埠戳，因此這三個都不能同名

然后解釋為什么會覆蓋圣猎，因為Props、methods乞而、data送悔、computed、watch都是在initState函數(shù)中被初始化的爪模。初始化順序就是我上面給出的順序欠啤，本質(zhì)上這些都是要掛載到this上面的，你如果重名的話屋灌，后面出現(xiàn)的屬性自然而然會覆蓋之前掛載的屬性了洁段。如果你的eslint配置比較嚴格的話，同名是編譯不通過的共郭。

5祠丝、 vue中data的屬性可以和methods中的方法同名嗎？為什么除嘹？

同4

6写半、 怎么給vue定義全局的方法？

1尉咕、通過prototype叠蝇，這個非常方便。Vue.prototype[method]=method;
2年缎、通過插件Vue.use(plugin)悔捶；
3铃慷、通過mixin，Vue.mixin(mixins);

7蜕该、 vue2.0不再支持v-html中使用過濾器了怎么辦犁柜？

1：全局方法
2：computed
3：$options.filters

8、 怎么解決vue打包后靜態(tài)資源圖片失效的問題堂淡？

設(shè)置assetsPublicPath將 assetsPublicPath: '/' 改為 assetsPublicPath: './'

9馋缅、怎么解決vue動態(tài)設(shè)置img的src不生效的問題？

因為動態(tài)添加src被當做靜態(tài)資源處理了淤齐，沒有進行編譯股囊，所以要加上require。require('@/assets/images/xxx.png')

10更啄、 使用vue后怎么針對搜索引擎做SEO優(yōu)化稚疹？

ssr,即單頁面后臺渲染
vue-meta-info 與prerender-spa-plugin 預(yù)渲染
nuxt，但是nuxt部署有一定局限性祭务，需要服務(wù)器配置node環(huán)境
phantomjs針對爬蟲做處理

11内狗、跟keep-alive有關(guān)的生命周期是哪些？描述下這些生命周期

activated和deactivated
keep-alive的生命周期

1.activated： 頁面第一次進入的時候义锥，鉤子觸發(fā)的順序是created->mounted->activated
2.deactivated: 頁面退出的時候會觸發(fā)deactivated柳沙，當再次前進或者后退的時候只觸發(fā)activated

12、 如果現(xiàn)在讓你從vue/react/angularjs三個中選擇一個拌倍，你會選哪個赂鲤？說說你的理由

首先會根據(jù)團隊的技術(shù)棧來進行選型，有利于團隊管理及技術(shù)交流柱恤，在此基礎(chǔ)上不斷演化出適合公司內(nèi)部的實現(xiàn)方式数初；
拋開團隊來說的話，個人會選擇vue梗顺，原因是:

一直接觸的都是vue泡孩，目前沒有什么痛感，喜歡使用模板
輕量寺谤、語法簡單仑鸥，支持模板和渲染函數(shù)的彈性選擇
更快的渲染+更小的體積

13、你知道vue2.0兼容IE哪個版本以上嗎变屁？

14眼俊、 使用vue開發(fā)一個todo小應(yīng)用，談下你的思路

15敞贡、 你有看過vue推薦的風格指南嗎泵琳？列舉出你知道的幾條

1、使用v-for時記得加key誊役，可以快速定位到需要更新的DOM節(jié)點获列，提高效率。
2蛔垢、永遠不要把 v-if 和 v-for 同時用在同一個元素上击孩。提高渲染效率
3、優(yōu)先通過 Vuex 管理全局狀態(tài)鹏漆，而不是通過 this.$root 或一個全局事件總線
4巩梢、為組件樣式設(shè)置scoped作用域

16、 你是從vue哪個版本開始用的艺玲？你知道1.x和2.x有什么區(qū)別嗎括蝠？

vue1.0的數(shù)據(jù)綁定完全依賴于數(shù)據(jù)偵測，使用Object.defineProperty方法使數(shù)據(jù)去通知相應(yīng)watch饭聚，改變dom結(jié)構(gòu)忌警。vue2.0引入了虛擬dom，只通知到組件秒梳，提升了顆粒度法绵。

17、 你知道vue中key的原理嗎酪碘？說說你對它的理解

便于diff算法的更新朋譬，key的唯一性，能讓算法更快的找到需要更新的dom兴垦，需要注意的是徙赢，key要唯一，不然會出現(xiàn)很隱蔽性的更新問題探越。

18狡赐、 vue中怎么重置data？

Object.assign(this.$data, this.$options.data())

Object.assign（）方法用于將所有可枚舉屬性的值從一個或多個源對象復(fù)制到目標對象
this.$data獲取當前狀態(tài)下的data
this.$options.data()獲取該組件初始狀態(tài)下的data扶关。
Object.assign(this.$data, this.$options.data())

19阴汇、 vue渲染模板時怎么保留模板中的HTML注釋呢？

設(shè)置comments屬性节槐，官網(wǎng)默認為舍棄注釋

<template comments>
<!--我是注釋內(nèi)容-->
</template>
<script>
export default {
    comments: true;
}
</script>

20搀庶、 Vue.observable你有了解過嗎？說說看

vue2.6發(fā)布一個新的API铜异，可以處理一些簡單的跨組件共享數(shù)據(jù)狀態(tài)的問題哥倔。類輕量級vuex，用作狀態(tài)管理

讓一個對象可響應(yīng)揍庄。Vue 內(nèi)部會用它來處理 data 函數(shù)返回的對象咆蒿。
返回的對象可以直接用于渲染函數(shù)和計算屬性內(nèi)，并且會在發(fā)生改變時觸發(fā)相應(yīng)的更新；也可以作為最小化的跨組件狀態(tài)存儲器沃测。

21缭黔、你知道style加scoped屬性的用途和原理嗎？

用途：防止全局同名CSS污染
原理：在標簽加上v-data-something屬性蒂破，再在選擇器時加上對應(yīng)[v-data-something]馏谨，即CSS帶屬性選擇器，以此完成類似作用域的選擇方式

1附迷、很多時候使用ui框架如果加scope就不能覆蓋惧互，這個時候一般寫sass 會在最外層包裹該組件名的id 就可以不使用scoped 了
2、用/deep/也可以對組件內(nèi)的樣式進行覆蓋

22喇伯、你期待vue3.0有什么功能或者改進的地方喊儡？

23、 vue邊界情況有哪些稻据？

訪問根實例艾猜、訪問父組件、子組件

24攀甚、如何在子組件中訪問父組件的實例箩朴？

vue中如果父組件想調(diào)用子組件的方法，可以在子組件中加上ref秋度，然后通過this.$refs.ref.method調(diào)用
Vue中子組件調(diào)用父組件的方法炸庞，這里有三種方法提供參考：
1：直接在子組件中通過this.$parent.event來調(diào)用父組件的方法
2：在子組件里用$emit向父組件觸發(fā)一個事件，父組件監(jiān)聽這個事件
3：父組件把方法傳入子組件中荚斯，在子組件里直接調(diào)用這個方法

詳細：（https://www.cnblogs.com/jin-zhe/p/9523782.html）

25埠居、watch的屬性用箭頭函數(shù)定義結(jié)果會怎么樣？

因為箭頭函數(shù)默綁定父級作用域的上下文事期，所以不會綁定vue實例滥壕，所以 this 是undefind

26、 在vue項目中如果methods的方法用箭頭函數(shù)定義結(jié)果會怎么樣兽泣？

因為箭頭函數(shù)默綁定父級作用域的上下文绎橘，所以不會綁定vue實例，所以 this 是undefind

27唠倦、 在vue項目中如何配置favicon称鳞？

1、將 favicon 圖片放到 static 文件夾下

2稠鼻、用 vue-cli 搭建的Vue項目冈止。

3、然后在 index.html 中添加：

<link rel="shortcut icon" type="image/x-icon" href="static/favicon.ico">

4候齿、刷新瀏覽器頁面熙暴。

推薦在index.html中引入闺属，不建議在配置文件中配置，成本太高,在vue.config.js中的pwa字段配置favicon路徑等相關(guān)設(shè)置

28周霉、你有使用過babel-polyfill模塊嗎掂器？主要是用來做什么的？

babel默認只轉(zhuǎn)換語法,而不轉(zhuǎn)換新的API,如需使用新的API,還需要使用對應(yīng)的轉(zhuǎn)換插件或者polyfill去模擬這些新特性诗眨。

29唉匾、說說你對vue的錯誤處理的了解孕讳？

分為errorCaptured與errorHandler
errorCaptured是組件內(nèi)部鉤子匠楚，可捕捉本組件與子孫組件拋出的錯誤，接收error厂财、vm芋簿、info三個參數(shù)，return false后可以阻止錯誤繼續(xù)向上拋出璃饱。
errorHandler為全局鉤子与斤，使用Vue.config.errorHandler配置，接收參數(shù)與errorCaptured一致荚恶，2.6后可捕捉v-on與promise鏈的錯誤撩穿，可用于統(tǒng)一錯誤處理與錯誤兜底。

30谒撼、在vue事件中傳入$event食寡，使用e.target和e.currentTarget有什么區(qū)別？

currentTarget：事件綁定的元素
target:鼠標觸發(fā)的元素

currentTarget 始終是監(jiān)聽事件者廓潜，而 target 是事件的真正發(fā)出者

31抵皱、 在.vue文件中style是必須的嗎？那script是必須的嗎辩蛋？為什么呻畸？

試驗了下，在 .vue 文件中悼院，template是必須的伤为，而script與style都不是必須的。
如果沒有 template据途，則 [Vue warn]: Failed to mount component: template or render function not defined.

32绞愚、 vue怎么實現(xiàn)強制刷新組件？

強制重新渲染

this.$forceUpdate()
強制重新刷新某組件

//模版上綁定key

<SomeComponent :key="theKey"/>
//選項里綁定data
data(){
  return{
      theKey:0
  }
}
//刷新key達到刷新組件的目的
theKey++;

33昨凡、 vue自定義事件中父組件怎么接收子組件的多個參數(shù)爽醋？

this.$emit("eventName",data)
data為一個對象

34、實際工作中便脊，你總結(jié)的vue最佳實踐有哪些蚂四？

35、 vue給組件綁定自定義事件無效怎么解決？

兩種方式
1遂赠、組件外部加修飾符.navtive
2久妆、組件內(nèi)部聲明$emit('自定義事件')

36、 vue的屬性名稱與method的方法名稱一樣時會發(fā)生什么問題跷睦？

報warn筷弦，項目可以運行(vue2.5.17)
但data屬性會覆蓋methods定義的值，報屬性已定義警告
props不會覆蓋值抑诸，但會報屬性已定義警告和Prop異常警告

37烂琴、 vue變量名如果以_多望、$開頭的屬性會發(fā)生什么問題菊匿？怎么訪問到它們的值音婶？

報錯 變量未定義
以 _ 或 $ 開頭的屬性 不會 被 Vue 實例代理葫男，
因為它們可能和 Vue 內(nèi)置的屬性掰吕、API 方法沖突杖们。
你可以使用例如 $data.xxx或者_data.xxx 的方式訪問這些屬性画饥。

38蚂斤、 vue使用v-for遍歷對象時辛块，是按什么順序遍歷的畔派？如何保證順序？

在遍歷對象時润绵，會按 Object.keys() 的結(jié)果遍歷线椰，
但是不能保證它的結(jié)果在不同的 JavaScript 引擎下都一致。

39授药、 vue如果想擴展某個現(xiàn)有的組件時士嚎，怎么做呢？

使用Vue.extend直接擴展
使用Vue.mixin全局混入
HOC封裝
加slot擴展

40悔叽、 說下 attr和listeners的使用場景

組件傳值莱衩，祖孫組件有跨度的傳值。

41娇澎、 分析下vue項目本地開發(fā)完成后部署到服務(wù)器后報404是什么原因呢笨蚁？

1.檢查nginx配置，是否正確設(shè)置了資源映射條件趟庄；
2.檢查vue.config.js中是否配置了publicPath括细，若有則檢查是否和項目資源文件在服務(wù)器擺放位置一致。

42戚啥、 v-once的使用場景有哪些奋单？

表單提交∶ㄊ可防止用戶在請求未及時響應(yīng)時览濒，多次提交~

43呆盖、 說說你對vue的表單修飾符.lazy的理解

input標簽v-model用lazy修飾之后，vue并不會立即監(jiān)聽input 
Value的改變贷笛，會在input失去焦點之后应又，才會觸發(fā)input Value的改變

44、 vue為什么要求組件模板只能有一個根元素乏苦？

因為"樹"狀數(shù)據(jù)結(jié)構(gòu)株扛，肯定要有個"根"，一個遍歷起始點
通過這個‘根節(jié)點’汇荐，來遞歸遍歷整個vue‘樹’下的所有節(jié)點洞就，并處理為vdom，最后再渲染成真正的HTML拢驾，插入在正確的位置

45奖磁、EventBus注冊在全局上時，路由切換時會重復(fù)觸發(fā)事件繁疤，如何解決呢？

在組件銷毀前 $off

46秕狰、 怎么修改vue打包后生成文件路徑稠腊？

47、 你有使用做過vue與原生app交互嗎鸣哀？說說vue與app交互的方法

jsBridge,建立連接架忌，然后相互調(diào)用

48、 使用vue寫一個tab切換

v-for循環(huán)我衬，利用下標和v-show顯示
作用域插槽+子組件

49叹放、 vue中什么是遞歸組件？舉個例子說明下挠羔？

用過組件的name屬性井仰，調(diào)用自身。例如生成樹型菜單

50破加、 怎么訪問到子組件的實例或者子元素俱恶？

1、this.$refs：在子組件標簽上加 ref屬性如ref="baseAlert"范舀，在父組件通過this.$refs.baseAlert.子組件方法名合是。
2、this.$children

51锭环、 在子組件中怎么訪問到父組件的實例聪全？

this.$parent

52、在組件中怎么訪問到根實例辅辩？

1难礼、this.$root
2吱七、無限循環(huán)調(diào)用$parent直到?jīng)]有這個屬性為止

53、 說說你對Object.defineProperty的理解

Object.defineProperty定義新屬性或修改原有的屬性鹤竭；
vue的數(shù)據(jù)雙向綁定的原理就是用的Object.defineProperty這個
方法踊餐，里面定義了setter和getter方法，通過觀察者模式（發(fā)布訂閱模式）
來監(jiān)聽數(shù)據(jù)的變化臀稚，從而做相應(yīng)的邏輯處理吝岭。

54、 vue組件里寫的原生addEventListeners監(jiān)聽事件吧寺，要手動去銷毀嗎窜管？為什么？

肯定要稚机，一方面是綁定多次幕帆，另一方面是函數(shù)沒釋放會內(nèi)存溢出

55、 vue組件里的定時器要怎么銷毀赖条？

當生命周期銷毀后失乾，并沒有將組件中的計時器銷毀，雖然頁面上看不出來纬乍，但是如果在控制臺打印的話碱茁，會發(fā)現(xiàn)計時器還在運行，所以要銷毀計時器仿贬，避免代碼一直執(zhí)行

const timer = setInterval(() =>{
// 某些定時器操作
}, 500);
// 通過$once來監(jiān)聽定時器纽竣，在beforeDestroy鉤子可以被清除。
this.$once('hook:beforeDestroy', () => {
clearInterval(timer);
})

56茧泪、 vue組件會在什么時候下被銷毀蜓氨？

v-if=‘false‘
沒有使用keep-alive時的路由切換
路由跳轉(zhuǎn)的時候

57、 使用vue渲染大量數(shù)據(jù)時應(yīng)該怎么優(yōu)化队伟？說下你的思路穴吹！

1.如果需要響應(yīng)式，考慮使用虛表（只渲染要顯示的數(shù)據(jù)）缰泡；
2.如果不考慮響應(yīng)式刀荒，變量在beforeCreated或created中聲明（Object.freeze會導(dǎo)致列表無法增加數(shù)據(jù)）

58、 在vue中使用this應(yīng)該注意哪些問題棘钞？

vue中methods中函數(shù)盡量不要使用箭頭函數(shù)缠借，會改變this指向，在vue-cli構(gòu)建的項目中this會為undefined

59宜猜、 你有使用過JSX嗎泼返？說說你對JSX的理解

jsx不是一門新的語言，是一種新的語法糖姨拥。讓我們在js中可以
編寫像html一樣的代碼绅喉。允許XML語法直接加入到JavaScript
代碼中渠鸽，讓你能夠高效的通過代碼而不是模板來定義界面

60、 說說組件的命名規(guī)范

定義組件名有兩種方式：
1.kebab-case（短橫線分隔命名）柴罐，引用時必須也采用kebab-case徽缚；
2.PascalCase（首字母大寫命名），引用時既可以采用PascalCase也可以使用kebab-case革屠；
但在DOM中使用只有kebab-case是有效的

61凿试、 怎么配置使vue2.0+支持TypeScript寫法？

62似芝、 <template></template>有什么用那婉？

當做一個不可見的包裹元素，減少不必要的DOM元素党瓮，整個結(jié)構(gòu)會更加清晰详炬。
分組的條件判斷和列表渲染

63、 vue的is這個特性你有用過嗎寞奸？主要用在哪些方面呛谜？

vue中is的屬性引入是為了解決dom結(jié)構(gòu)中對放入html的元素有限制的問題

<ul>
  <li is='my-component'></li>
</ul>

64、 vue的:class和:style有幾種表示方式蝇闭？

:class 綁定變量 綁定對象 綁定一個數(shù)組 綁定三元表達式
:style 綁定變量 綁定對象 綁定函數(shù)返回值 綁定三元表達式

65呻率、 你了解什么是函數(shù)式組件嗎？

函數(shù)式組件：
需要提供一個render方法呻引， 接受一個參數(shù)（createElement函數(shù)）， 方法內(nèi)根據(jù)業(yè)務(wù)邏輯吐咳，通過createElement創(chuàng)建vnodes逻悠，最后return vnodes
createElement函數(shù)， 三個參數(shù)韭脊， 第一個參數(shù)是html標簽或自定義組件童谒，第二個參數(shù)一個obj（包含props， on...等等）沪羔， 第三個參數(shù)children(通過createElement構(gòu)建饥伊， 或者字符串)

66、 vue怎么改變插入模板的分隔符蔫饰？

delimiters

67琅豆、 組件中寫name選項有什么作用？

1篓吁、項目使用keep-alive時茫因，可搭配組件name進行緩存過濾
2、DOM做遞歸組件時需要調(diào)用自身name
3杖剪、vue-devtools調(diào)試工具里顯示的組見名稱是由vue中組件name決定的

68冻押、 說說你對provide和inject的理解

通過在父組件中inject一些數(shù)據(jù)然后再所有子組件中都可以通過provide獲取使用該參數(shù),
主要是為了解決一些循環(huán)組件比如tree, menu, list等, 傳參困難, 并且難以管理的問題, 主要用于組件封裝, 常見于一些ui組件庫

69驰贷、 開發(fā)過程中有使用過devtools嗎？

大力協(xié)助vue項目開發(fā)洛巢，看組件括袒，參數(shù)，傳值等稿茉，尤其是用的vuex的時候锹锰，用于調(diào)試vue應(yīng)用，這可以極大地提高我們的調(diào)試效率

70狈邑、 說說你對slot的理解有多少城须？slot使用場景有哪些？

slot, 插槽, 在使用組件的時候, 在組建內(nèi)部插入東西.
組件封裝的時候最常使用到

71米苹、 你有使用過動態(tài)組件嗎糕伐？說說你對它的理解

72、 prop驗證的type類型有哪幾種蘸嘶？

props:{
    title:String,
    likes: Number,
    isPublished: Boolean,
    commentIds: Array,
    author: Object,
    callback: Function,
    contactsPromise: Promise
}

73良瞧、 prop是怎么做驗證的？可以設(shè)置默認值嗎训唱？

單個類型就用Number等基礎(chǔ)類型褥蚯，多個類型用數(shù)組，必填的話
設(shè)置require為true况增，默認值的話設(shè)置default赞庶，對象和數(shù)組設(shè)置默認用工廠函數(shù)，
自定義驗證函數(shù)validator澳骤。

74歧强、 怎么緩存當前打開的路由組件，緩存后想更新當前組件怎么辦呢为肮？

可以在路由meta中加入?yún)?shù), 對打開的路由進行keep-alive的判
斷, 通過鉤子active等

75摊册、 說說你對vue組件的設(shè)計原則的理解

第一: 容錯處理, 這個要做好, 極端場景要考慮到, 不能我傳錯了一個參數(shù)你就原地爆炸
第二: 缺省值(默認值)要有, 一般把應(yīng)用較多的設(shè)為缺省值
第三: 顆粒化, 把組件拆分出來.
第四: 一切皆可配置, 如有必要, 組件里面使用中文標點符號, 還是英文的標點符號, 都要考慮到
第五: 場景化, 如一個dialog彈出, 還需要根據(jù)不同的狀態(tài)封裝成success, waring, 等
第六: 有詳細的文檔/注釋和變更歷史, 能查到來龍去脈, 新版本加了什么功能是因為什么
第七: 組件名稱, 參數(shù)prop, emit, 名稱設(shè)計要通俗易懂, 最好能做到代碼即注釋這種程度
第八: 可拓展性, 前期可能不需要這個功能, 但是后期可能會用上, 要預(yù)留什么, 要注意什么, 心里要有逼數(shù)
第九: 規(guī)范化,我這個input組件, 叫on-change, 我另外一個select組件叫change, 信不信老子捶死你
第十: 分階段: 不是什么都要一期開發(fā)完成看具體業(yè)務(wù), 如果一個select, 我只是個簡單的select功能, 什么multi老子這個版本壓根不需要, 別TM瞎折騰! 給自己加戲

76颊艳、 你了解vue的diff算法嗎茅特？

image.png

77、 vue如何優(yōu)化首頁的加載速度棋枕？

異步路由和異步加載
還有分屏加載, 按需加載, 延時加載圖片等, cdn, 域名才分
不要什么東西動不動就打包到vendor中, 惡心

78白修、 vue打包成最終的文件有哪些？

vendor.js, app.js, app.css,
1.xxx.js
2.xxx.js

如果有設(shè)置到單獨提取css的話
還有
1.xxx.css

默認的一個html文件戒悠，然后是js熬荆。css

79、 ajax、fetch卤恳、axios這三都有什么區(qū)別累盗？

ajax是最早出現(xiàn)發(fā)送后端請求的技術(shù)，屬于原生js范疇,核心是使用XMLHttpRequest對象,使用較多并有先后順序的話突琳，容易產(chǎn)生回調(diào)地獄若债。

fetch號稱可以代替ajax的技術(shù)，是基于es6中的Promise對象設(shè)計的拆融，參數(shù)和jQuery中的ajax類似蠢琳，它并不是對ajax進一步封裝，它屬于原生js范疇镜豹。沒有使用XMLHttpRequest對象傲须。

axios不是原生js,使用時需要對其進行安裝，客戶端和服務(wù)器端都可以使用趟脂，可以在請求和相應(yīng)階段進行攔截泰讽，基于promise對象

80、 vue能監(jiān)聽到數(shù)組變化的方法有哪些昔期？為什么這些方法能監(jiān)聽到呢已卸？

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

數(shù)組更新檢測

81、 vue中是如何使用event對象的硼一？

[@click](https://github.com/click)=“func” 默認第一個參數(shù)傳入event對象
[@click](https://github.com/click)="func(0, $event)" 如果自己需要傳入?yún)?shù)和event對象累澡，則需要使用$event來獲取event對象并傳入func

82、 vue首頁白屏是什么問題引起的般贼？如何解決呢愧哟？

1.打包后文件引用路徑不對，導(dǎo)致找不到文件報錯白屏
2.路由模式mode設(shè)置影響
3.加載緩慢哼蛆，出現(xiàn)短暫白屏

83翅雏、 說說你對單向數(shù)據(jù)流和雙向數(shù)據(jù)流的理解

單向數(shù)據(jù)流：所有狀態(tài)的改變可記錄、可跟蹤人芽，源頭易追溯；所有數(shù)據(jù)只有一份绩脆，組件數(shù)據(jù)只有唯一的入口和出口萤厅，使得程序更直觀更容易理解，有利于應(yīng)用的可維護性靴迫；一旦數(shù)據(jù)變化惕味，就去更新頁面(data-頁面)，但是沒有(頁面-data)玉锌；如果用戶在頁面上做了變動名挥，那么就手動收集起來(雙向是自動)，合并到原有的數(shù)據(jù)中主守。
雙向數(shù)據(jù)流：無論數(shù)據(jù)改變禀倔，或是用戶操作榄融，都能帶來互相的變動，自動更新救湖。

84愧杯、 移動端ui你用的是哪個ui庫？有遇到過什么問題嗎鞋既？

vant力九，mint等等吧，各有各的坑邑闺，不過大部分都是可以查到解決方案的

85跌前、你知道nextTick的原理嗎？

86陡舅、 說說你對v-clock和v-pre指令的理解

v-cloak指令只是在標簽中加入一個v-cloak自定義屬性抵乓，在HTML還編譯完成之后該屬性會被刪除。
v-pre可以用來阻止預(yù)編譯蹭沛，有v-pre指令的標簽內(nèi)部的內(nèi)容不會被編譯臂寝，會原樣輸出。

87摊灭、 寫出你知道的表單修飾符和事件修飾符

事件修飾符.stop .prevent .capture .self .once .passive
表單修飾符.number .lazy .trim

88咆贬、 說說你對proxy的理解

目前只知道用來修改 屬性的get set方法 vue3 來替換Object.defineProperty房官。一方面提高性能 另一方面可以免去給數(shù)組重寫方法缴阎。

vue的數(shù)據(jù)劫持有兩個缺點:
1、無法監(jiān)聽通過索引修改數(shù)組的值的變化
2衫冻、無法監(jiān)聽object也就是對象的值的變化
所以vue2.x中才會有$set屬性的存在
proxy是es6中推出的新api煤杀，可以彌補以上兩個缺點眷蜈，所以vue3.x版本用proxy替換object.defineproperty

89、 你有自己用vue寫過UI組件庫嗎沈自？

90酌儒、 用vue怎么實現(xiàn)一個換膚的功能？

這個……全局的theme屬性然后做class判斷或者加載不同的樣式文件枯途。一種是編譯時換膚 一種是用戶操作換膚忌怎。編譯時換膚可以通過css in js相關(guān)技術(shù)修改css預(yù)處理器的變量 。用戶操作換膚 只能內(nèi)置一些styleb變量供用戶選擇了

91酪夷、 有在vue中使用過echarts嗎榴啸？踩過哪些坑？如何解決的晚岭？

多注意dom的渲染時機 和chart的實例化時機 在相應(yīng)的生命周期方法中做操作鸥印。結(jié)合強制刷新 應(yīng)該就能解決大部分問題

92、 如果讓你教一個2-3年經(jīng)驗前端經(jīng)驗的同事使用vue，你該怎么教库说？

93狂鞋、 vue性能的優(yōu)化的方法有哪些？

94璃弄、 SSR解決了什么問題要销？有做過SSR嗎？你是怎么做的夏块？

SSR服務(wù)端渲染疏咐，解決SEO問題，用next吧脐供，最佳實踐
優(yōu)化首屏加載速度

95浑塞、 說說你覺得認為的vue開發(fā)規(guī)范有哪些？
https://juejin.im/post/5b67e49551882508603d1431

96政己、 vue部署上線前需要做哪些準備工作酌壕？

router 是不是hash 是否需要配置nginx , publicPath , 是不是要配置cdn

97、 vue過渡動畫實現(xiàn)的方式有哪些歇由？

1.使用vue的transition標簽結(jié)合css樣式完成動畫
2.利用animate.css結(jié)合transition實現(xiàn)動畫
3.利用vue中的鉤子函數(shù)實現(xiàn)動畫

98卵牍、 vue在created和mounted這兩個生命周期中請求數(shù)據(jù)有什么區(qū)別呢？

看實際情況沦泌，一般在 created（或beforeRouter） 里面就可以糊昙，如果涉及到需要頁面加載完成之后的話就用 mounted。
在created的時候谢谦，視圖中的html并沒有渲染出來释牺，所以此時如果直接去操作html的dom節(jié)點，一定找不到相關(guān)的元素
而在mounted中回挽，由于此時html已經(jīng)渲染出來了没咙，所以可以直接操作dom節(jié)點，（此時document.getelementById 即可生效了）

99千劈、 vue父子組件雙向綁定的方法有哪些祭刚？

1.利用對象的引用關(guān)系來實現(xiàn)
2.父子組件之間的數(shù)據(jù)傳遞
3.使用.sync修飾符

100、 vue怎么獲取DOM節(jié)點墙牌？

view：v-ref:xxx
data：this.$ref.xxx 這樣就ok啦

101袁梗、 vue項目有做過單元測試嗎？

102憔古、 vue項目有使用過npm run build --report嗎？

給 process.env 對象添加了一個屬性 npm_config_report: "true"淋袖，
表示開啟編譯完成后的報告

103鸿市、 如何解決vue打包vendor過大的問題？

1、在webpack.base.conf.js新增externals配置焰情，表示不需要打
包的文件陌凳，然后在index.html中通過CDN引入

externals: {
    "vue": "Vue",
    "vue-router": "VueRouter",
    "vuex": "Vuex",
    "element-ui": "ELEMENT",
    "BMap": "BMap"
  }
2、使用路由懶加載 [官網(wǎng)]
(https://router.vuejs.org/zh/guide/advanced/lazy-loading.html)

104内舟、webpack打包vue速度太慢怎么辦合敦？

105、 vue在開發(fā)過程中要同時跟N個不同的后端人員聯(lián)調(diào)接口（請求的url不一樣）時你該怎么辦验游？

devServer中把所有的服務(wù)人員的地址代理都寫進去充岛，
然后動態(tài)更改接口的baseUrl，這樣切換不同后端人員的時候不用重啟

106耕蝉、 vue要做權(quán)限管理該怎么做崔梗？如果控制到按鈕級別的權(quán)限怎么做？

可以通過指令去做
Vue.directive('hasPermission', {
    bind(el, binding, vnode) {
        const permissions = vnode.context.$store.state.account.permissions
        if (binding.value === '') return
        const value = binding.value.split(',')
        let flag = true
        for (const v of value) {
            if (!permissions.includes(v)) {
                flag = false
            }
        }
        if (!flag) {
            if (!el.parentNode) {
                el.style.display = 'none'
            } else {
                el.parentNode.removeChild(el)
            }
        }
    }
}

107垒在、 說下你的vue項目的目錄結(jié)構(gòu)蒜魄，如果是大型項目你該怎么劃分結(jié)構(gòu)和劃分組件呢？

views目錄存放一級路由的組件场躯，即視圖組件
Components目錄存放組件
Store存放vuex相關(guān)文件
Router目錄存放路由相關(guān)文件
Untils目錄存放工具js文件
API目錄存放封裝好的與后端交互的邏輯
Assets存放靜態(tài)文件

108谈为、在移動端使用vue，你覺得最佳實踐有哪些踢关？
vant 有贊的 感覺不錯

109伞鲫、你們項目為什么會選vue而不選擇其它的框架呢？

Vue.js是一個輕巧耘成、高性能榔昔、可組件化的MVVM庫，同時擁有非
常容易上手的API瘪菌；vue是單頁面應(yīng)用撒会，使頁面局部刷新，不用
每次跳轉(zhuǎn)頁面都要請求所有數(shù)據(jù)和dom师妙，這樣大大加快了訪問
速度和提升用戶體驗诵肛。而且他的第三方ui庫很多節(jié)省開發(fā)時間。

110默穴、 對于即將到來的vue3.0特性你有什么了解的嗎怔檩？

111、 vue開發(fā)過程中你有使用什么輔助工具嗎蓄诽？
vue-devtools

112薛训、 vue和微信小程序?qū)懛ㄉ嫌惺裁磪^(qū)別？

113仑氛、 怎么緩存當前的組件乙埃？緩存后怎么更新闸英？

keep-alive
通過actived鉤子

114、 你了解什么是高階組件嗎介袜？可否舉個例子說明下甫何？

115、 為什么我們寫組件的時候可以寫在.vue里呢遇伞？可以是別的文件名后綴嗎辙喂？

配合相應(yīng)的loader 想咋寫就咋寫

116、 vue-loader是什么鸠珠？它有什么作用巍耗？

解析和轉(zhuǎn)換 .vue 文件，提取出其中的邏輯代碼 script跳芳、樣式代
碼 style芍锦、以及 HTML 模版 template，再分別把它們交給對應(yīng)的 
Loader 去處理飞盆。

117娄琉、說說你對vue的extend（構(gòu)造器）的理解，它主要是用來做什么的吓歇？

構(gòu)建一個組件和vue.components注冊組件一起使用

119孽水、如何將axios異步請求同步化處理？
async ,await
Generator函數(shù)
回調(diào)里面寫回調(diào)

    async getHistoryData (data) {
      try {
        let res = await axios.get('/api/survey/list/', {
          params: data
        })
        this.tableData = res.data.result
        this.totalData = res.data.count
      } catch (err) {
        console.log(err)
        alert('請求出錯城看！')
      }
    }
  }

120女气、 怎么捕獲組件vue的錯誤信息？

errorCaptured

121测柠、 為什么vue使用異步更新組件炼鞠？

批量更新 收集當前的改動一次性更新 節(jié)省diff開銷

122、如何實現(xiàn)一個虛擬DOM轰胁？說說你的思路

createElement,render

虛擬Dom在vue底層實現(xiàn)中是一個類谒主，每次_render的時候都會
實例化Vnode為一個虛擬dom對象。也就是說本質(zhì)上是用一個js
對象來描述dom節(jié)點赃阀。

123霎肯、 寫出多種定義組件模板的方法

1、字符串
2榛斯、模板字面量
3观游、<script type="x-template"></script>
4、文件組件模板
5驮俗、inline-template

124懂缕、 SPA單頁面的實現(xiàn)方式有哪些？

1.監(jiān)聽地址欄中hash變化驅(qū)動界面變化

2.用pushsate記錄瀏覽器的歷史王凑，驅(qū)動界面發(fā)送變化

3.直接在界面用普通事件驅(qū)動界面變化

它們都是遵循同一種原則：div 的顯示與隱藏

125提佣、 說說你對SPA單頁面的理解吮蛹，它的優(yōu)缺點分別是什么？

 

介紹：SPA應(yīng)用就是一個web應(yīng)用拌屏，可理解為：是一種只需要將單個頁面加載到服務(wù)器之中的web應(yīng)用程序。當瀏覽器向服務(wù)器發(fā)出第一個請求時术荤，服務(wù)器會返回一個index.html文件倚喂，它所需的js，css等會在顯示時統(tǒng)一加載瓣戚，部分頁面需要時加載端圈。
優(yōu)點：
1.良好的交互式體驗。意思是：用戶無需刷新頁面子库，獲取數(shù)據(jù)通過異步ajax獲取舱权，頁面顯示流暢
2.良好的前后端分離模式（MVVM），減輕服務(wù)端壓力仑嗅。服務(wù)器只需要輸出數(shù)據(jù)就可以宴倍，不用管邏輯和頁面展示，吞吐能力會提高幾倍
3.共用同一套后端程序代碼仓技，不用修改就可用于web界面鸵贬，手機和平板等客戶端設(shè)備
缺點：
1.不利于SEO優(yōu)化
2.由于單頁應(yīng)用在一個頁面中顯示，所以不可以使用瀏覽器自帶的前進后退功能脖捻，想要實現(xiàn)頁面切換需要自己進行管理
3.首屏加載過慢（初次加載耗時多）阔逼，原因是：為了實現(xiàn)單頁web應(yīng)用功能及展示效果，在頁面初始化的時候就會將js地沮，css等統(tǒng)一加載嗜浮，部分頁面在需要時加載。當然也有解決方法摩疑。
解決方法：①使用路由懶加載 ②開啟Gzip壓縮 ③使用webpack的externals屬性把不需要的庫文件分離出去危融，減少打包后文件的大小 ④使用vue的服務(wù)端渲染（SSR）
舉例spa應(yīng)用：網(wǎng)易云音樂、QQ音樂等

126未荒、 說說你都用vue做過哪些類型的項目专挪？

127、 在vue項目中如何引入第三方庫（比如jQuery）片排？有哪些方法可以做到寨腔？

1、絕對路徑直接引入
在index.html中用script引入
<script src="./static/jquery-1.12.4.js"></script>
然后在webpack中配置external
externals: { 'jquery': 'jQuery' }
在組件中使用時import
import $ from 'jquery'

2 率寡、在webpack中配置alias
resolve: { extensions: ['.js', '.vue', '.json'], alias: { '@': resolve('src'), 'jquery': resolve('static/jquery-1.12.4.js') } }
然后在組件中import

3迫卢、在webpack中配置plugins
plugins: [ new webpack.ProvidePlugin({ $: 'jquery' }) ]
全局使用，但在使用eslint情況下會報錯冶共，需要在使用了 $ 的代碼前添加 /* eslint-disable*/ 來去掉 ESLint 的檢查乾蛤。

128每界、 使用vue手寫一個過濾器
價格格式 日期格式

全局過濾器
Vue.filter('addHobby',(val,hobby)=>{
return val + hobby
})
局部過濾器
filters:{
addHobby(val,hobby){
return val + hobby
}
}

129、 你有使用過render函數(shù)嗎家卖？有什么好處眨层？

template也會翻譯成render，只有一點上荡，template中元素的
tag_name是靜態(tài)的趴樱，不可變化，使用createEelment可以生
成不同tag_name, 比如h1 ... h6, 可以通過一個number變量
控制

130酪捡、 寫出你常用的指令有哪些叁征？

@ : v-once v-pre v-clock v-for v-html v-text v-model

131、 手寫一個自定義指令及寫出如何調(diào)用

全局自定義指令
Vue,directive('test',(el,binding,vnode)=>{
業(yè)務(wù)邏輯
})

局部指令
directives:{
test(el,binding,vnode){
業(yè)務(wù)邏輯
}
}
調(diào)用逛薇，都是v-test

132捺疼、 組件進來請求接口時你是放在哪個生命周期？為什么永罚？

一般在created 因為在這個生命周期我們常用到的都已經(jīng)初始化好了
如果涉及dom 那就mounted

133啤呼、 你有用過事件總線(EventBus)嗎？說說你的理解

也是組件傳值的一種方式（例如兄弟組件）

134尤蛮、 說說vue的優(yōu)缺點分別是什么媳友？

135、 DOM渲染在哪個周期中就已經(jīng)完成了产捞？

mounted生命周期

136醇锚、 第一次加載頁面時會觸發(fā)哪幾個鉤子？

beforeCreate, created, beforeMount, mounted

137坯临、 vue生命周期總共有幾個階段焊唬？

beforeCreate：在 new 一個 vue 實例后，只有一些默認的生命周期鉤子和默認事件看靠，其他的東西都還沒創(chuàng)建赶促。

created：data 和 methods 都已經(jīng)被初始化好了。（如果要調(diào)用 methods 中的方法挟炬，或者操作 data 中的數(shù)據(jù)鸥滨，最早可以在這個階段中操作）

beforeMount：在內(nèi)存中已經(jīng)編譯好了模板了，但是還沒有掛載到頁面中谤祖，此時婿滓，頁面還是舊的。

mounted：Vue 實例已經(jīng)初始化完成了粥喜。此時組件脫離了創(chuàng)建階段凸主，進入到了運行階段。 （如果我們想要通過插件操作頁面上的 DOM 節(jié)點额湘，最早可以在和這個階段中進行）

beforeUpdate：頁面中的顯示的數(shù)據(jù)還是舊的卿吐，data 中的數(shù)據(jù)是更新后的旁舰， 頁面還沒有和最新的數(shù)據(jù)保持同步。

updated：頁面顯示的數(shù)據(jù)和 data 中的數(shù)據(jù)已經(jīng)保持同步了嗡官，都是最新的箭窜。

beforeDestroy：Vue 實例從運行階段進入到了銷毀階段，這個時候上所有的 data 和 methods 衍腥， 指令绽快， 過濾器 ……都是處于可用狀態(tài)。還沒有真正被銷毀紧阔。

destroyed：這個時候上所有的 data 和 methods ， 指令续担， 過濾器 ……都是處于不可用狀態(tài)擅耽。組件已經(jīng)被銷毀了。

138物遇、 vue生命周期的作用是什么乖仇？

準確地控制數(shù)據(jù)流和其對DOM的影響

139、 vue和angular有什么區(qū)別呢询兴？

140乃沙、 如何引入scss？引入后如何使用诗舰？

一般放在 style 中 引入設(shè)置 lang = ‘scss’警儒，并配置好 對應(yīng)的 loader

安裝scss依賴包：
npm install sass-loader --save-dev npm install node-sass --save-dev
在build文件夾下修改 webpack.base.conf.js 文件：
在 module 下的 rules 里添加配置，如下：
{ test: /\.scss$/, loaders: ['style', 'css', 'sass'] }
應(yīng)用：
在vue文件中應(yīng)用scss時眶根，需要在style樣式標簽上添加lang="scss"蜀铲，即<style lang="scss">。

141属百、 使用vue開發(fā)過程你是怎么做接口管理的记劝？

在request.js中對 axios 請求 和 響應(yīng)進行劫持，統(tǒng)一處理族扰，然后在 api 文件夾中引入 request.js 后再使用 封裝后的方法進行請求

142厌丑、 為何官方推薦使用axios而不用vue-resource？

1.vue-resources不再更新了渔呵，vue作者尤大推薦axios怒竿。
2.axios更加強大
3.axios就是一個基于ES6的Promise的網(wǎng)絡(luò)請求庫，其實說干凈了就是一個打包好的XMLHttpRequests厘肮，也就是說愧口，這個也是一個ajax庫。
4.axios
在瀏覽器里建立XHR
通過nodejs進行http請求
轉(zhuǎn)換或者攔截請求數(shù)據(jù)或響應(yīng)數(shù)據(jù)
支持Promise的API
可以取消請求
自動轉(zhuǎn)換JSON
可以防御XSRF攻擊类茂！
5.vue-resources
只提供了瀏覽器版本

143耍属、 你了解axios的原理嗎托嚣？有看過它的源碼嗎？

1.axios通過對Promise的封裝實現(xiàn)異步請求厚骗；
2.if(answer == '有'){
if(這個問題到此為止){
return ‘有’;
}else{
return '沒';
}
}

144示启、 你有封裝過axios嗎？主要是封裝哪方面的领舰？

封裝處理配置（路徑夫嗓、時間、token）冲秽、統(tǒng)一管理接口舍咖、錯誤處理、不同形式的請求、消息提示、loading等颈走。

145、 如何中斷axios的請求攻柠？

cancelToken

146、 axios是什么后裸？怎樣使用它瑰钮？怎么解決跨域的問題？

axios 的是一種異步請求微驶，用法和ajax類似浪谴，安裝npm install axios --save 即可使用，請求中包括get,post,put, patch ,delete等五種請求方式祈搜，解決跨域可以在請求頭中添加Access-Control-Allow-Origin较店，也可以在index.js文件中更改proxyTable配置等解決跨域問題

因為axios在vue中利用中間件http-proxy-middleware做了一個本地的代理服務(wù)A，相當于你的瀏覽器通過本地的代理服務(wù)A請求了服務(wù)端B容燕，瀏覽器通過服務(wù)A并沒有跨域梁呈，因此就繞過了瀏覽器的同源策略，解決了跨域的問題蘸秘。

147官卡、說說你對vue的template編譯的理解？

組件化開發(fā) 復(fù)用性

148醋虏、 v-on可以綁定多個方法嗎寻咒？

可以 例如 input 的聚焦 失焦事件綁定各自的方法, 是不是可以這樣理解

<input type="text" :value="name" @input="onInput" @focus="onFocus" @blur="onBlur" />

149、 vue常用的修飾符有哪些颈嚼？列舉并說明

.trim .once .lazy .stop .native .prevent .number

150毛秘、 你認為vue的核心是什么？

兩部分 一部分 數(shù)據(jù)->虛擬dom->dom, 另一部分 響應(yīng)式數(shù)據(jù)
這兩部分大大節(jié)省了開發(fā)者對數(shù)據(jù)變動轉(zhuǎn)換到頁面顯示的操作，可以讓開發(fā)者聚焦業(yè)務(wù)叫挟，聚焦數(shù)據(jù)的處理艰匙。

151、 v-model是什么抹恳？有什么用呢员凝？

對數(shù)據(jù)進行雙向綁定
一則語法糖，相當于v-bind:value="xxx" 和 @input奋献，意思是綁定了一個value屬性的值健霹，子組件可對value屬性監(jiān)聽，通過$emit('input', xxx)的方式給父組件通訊瓶蚂。自己實現(xiàn)v-model方式的組件也是這樣的思路糖埋。

152、 說說你對vue的mixin的理解窃这，有什么應(yīng)用場景阶捆？

多個實例引用了相同或相似的方法或?qū)傩缘龋蓪⑦@些重復(fù)的內(nèi)容抽取出來作為mixins的js钦听，export出去，在需要引用的vue文件通過mixins屬性注入倍奢，與當前實例的其他內(nèi)容進行merge

一個混入對象可以包含任意組件選項朴上。同一個生命周期，混入對象會比組件的先執(zhí)行卒煞。

153痪宰、 SPA首屏加載速度慢的怎么解決？

1.通過Gzip壓縮
2.使用路由懶加載
3.利用webpack中的externals這個屬性把打包后不需要打包的庫文件都分離出去畔裕，減小項目打包后的大小
4.使用SSR渲染

154衣撬、 刪除數(shù)組用delete和Vue.delete有什么區(qū)別？

delete：不能觸發(fā)vue的響應(yīng)式更新
Vue.delete：能

delete：只是被刪除數(shù)組成員變?yōu)?empty / undefined扮饶，其他元素鍵值不變
Vue.delete：直接刪了數(shù)組成員具练，并改變了數(shù)組的鍵值（對象是響應(yīng)式的，確保刪除能觸發(fā)更新視圖甜无，這個方法主要用于避開 Vue 不能檢測到屬性被刪除的限制）

155扛点、 動態(tài)給vue的data添加一個新的屬性時會發(fā)生什么？怎樣解決岂丘？

根據(jù)官方文檔定義：如果在實例創(chuàng)建之后添加新的屬性到實例上陵究，它不會觸發(fā)視圖更新。
Vue 不允許在已經(jīng)創(chuàng)建的實例上動態(tài)添加新的根級響應(yīng)式屬性 (root-level reactive property)奥帘。然而它可以使用 Vue.set(object, key, value) 方法將響應(yīng)屬性添加到嵌套的對象上铜邮。

  對象類型寫法
     this.$set("要給哪個對象添加","添加的對象的key",'添加的對象的value')
  數(shù)組類型寫法
    this.$set('你要修改的數(shù)據(jù)'，'你要修改這個數(shù)組的索引值'，要修改的值val)

156松蒜、 組件和插件有什么區(qū)別扔茅？

組件 (Component) 是用來構(gòu)成你的 App 的業(yè)務(wù)模塊，它的目標是 App.vue牍鞠。

插件 (Plugin) 是用來增強你的技術(shù)棧的功能模塊咖摹，它的目標是 Vue 本身。

157难述、 說說你使用vue過程中遇到的問題（坑）有哪些萤晴，你是怎么解決的？

從詳情頁返回列表頁時, 要保存所有狀態(tài), 比如: 滾動條位置, 數(shù)據(jù), 下拉數(shù)據(jù)等
當時想用keep-alive, 后來沒用, 直接存儲一些關(guān)鍵數(shù)據(jù), 返回到router時重新加載了數(shù)據(jù)

158胁后、 說說你對選項el,template,render的理解

el: 把當前實例掛載在元素上
template: 實例模版, 可以是.vue中的template, 也可以是template選項, 最終會編譯成render函數(shù)
render: 不需要通過編譯的可執(zhí)行函數(shù)
template和render, 開發(fā)時各有優(yōu)缺點, 不過在線上盡量不要有template

159店读、 vue實例掛載的過程是什么？

render, 沒有則去編譯
編譯vdom
對實例進行watch

160攀芯、 vue在組件中引入插件的方法有哪些屯断？

161、 v-if和v-for的優(yōu)先級是什么侣诺？如果這兩個同時出現(xiàn)時殖演，那應(yīng)該怎么優(yōu)化才能得到更好的性能？

v-for優(yōu)先級高于v-if年鸳，故如果需要兩個都存在趴久，v-if盡量在v-for的父級被包裹，避免增加無用的渲染開銷

163搔确、 分別說說vue能監(jiān)聽到數(shù)組或?qū)ο笞兓膱鼍氨斯鳎€有哪些場景是監(jiān)聽不到的？無法監(jiān)聽時有什么解決方案膳算？

164座硕、 $nextTick有什么作用？

處理數(shù)據(jù)動態(tài)變化后涕蜂，dom還未及時更新的問題华匾。nexttick就可以獲取到數(shù)據(jù)更新后最新的dom變化

console.log(this.$refs.message) // old dom
this.$nextTick()
  .then(() => {
    console.log(this.$refs.message) // new dom
})

165、 為什么data屬性必須聲明為返回一個初始數(shù)據(jù)對應(yīng)的函數(shù)呢机隙？

對象為引用類型瘦真，當重用組件時，由于數(shù)據(jù)對象都指向同一個data對象黍瞧，當在一個組件中修改data時诸尽，其他重用的組件中的data會同時被修改；而使用返回對象的函數(shù)印颤，由于每次返回的都是一個新對象（Object的實例）您机，引用地址不同，則不會出現(xiàn)這個問題。

166际看、 怎么在watch監(jiān)聽開始之后立即被調(diào)用咸产？

有個參數(shù)immediate

vm.$watch('a', callback, {
  immediate: true
})
// 立即以 `a` 的當前值觸發(fā)回調(diào)

167、 watch怎么深度監(jiān)聽對象變化仲闽？

'obj.xx': { handler: function(val) {}, deep:true }

168脑溢、 watch和計算屬性有什么區(qū)別？

1.一個是偵聽屬性赖欣，一個是計算屬性
2.一個是為了應(yīng)對復(fù)雜的邏輯計算屑彻，一個是對數(shù)據(jù)的變化作出反應(yīng)
3.一個是只有當緩存改變時才執(zhí)行，一個是只要從新渲染就會執(zhí)行
4.一個有緩存顶吮，一個沒有緩存

169社牲、 vue如何監(jiān)聽鍵盤事件？

或者直接全局監(jiān)聽

170悴了、 v-for循環(huán)中key有什么作用搏恤？

diff時更快更準確找到變化的位置, 性能優(yōu)化

171、 怎么在vue中使用插件湃交？

npm 安裝 然后再main.js 引入 最后 vue.use(插件名)

172熟空、 你有寫過自定義組件嗎？

173搞莺、 說說你對keep-alive的理解是什么痛阻？

keep-alive是Vue提供的一個抽象組件，用來對組件進行緩存腮敌，從而節(jié)省性能，由于是一個抽象組件俏扩，所以在頁面渲染完畢后不會被渲染成一個DOM元素

174糜工、 怎么使css樣式只在當前組件中生效？

css module <style scoped> </style>

175录淡、 你有看過vue的源碼嗎捌木？如果有那就說說看

176、 你有寫過自定義指令嗎嫉戚？自定義指令的生命周期（鉤子函數(shù)）有哪些刨裆？

bind inserted update componentUpdated unbind

177、 v-show和v-if有什么區(qū)別彬檀？使用場景分別是什么帆啃？

v-show 是css的display顯示和隱藏
v-if 是DOM 銷毀和重建

v-show 使用場景：
1.頻繁的切換顯示狀態(tài)
2.預(yù)渲染需求

178、 說說你對MVC窍帝、MVP努潘、MVVM模式的理解
179、 說下你對指令的理解？

要提供了一種機制疯坤，將數(shù)據(jù)的變化映射為DOM行為

180报慕、 請描述下vue的生命周期是什么？

181压怠、 vue組件之間的通信都有哪些眠冈？

父子Coms: 1/2/3 ..
兄弟Coms: 4/5
跨級Coms: 4/5/6/7
1.props
2.$emit/$on
3.( $parents/$children ) / $refs
4.Vuex
5.Bus
6.( provide/inject )
7.( $attrs/$listeners )

182、 什么是虛擬DOM菌瘫？

個人淺顯理解：VNode是真實DOM的映射蜗顽，其數(shù)據(jù)結(jié)構(gòu)是普通JS對象，包含type(類型突梦，是組件還是元素)诫舅，style，class宫患，children(子組件或子元素)刊懈，data(數(shù)據(jù)模型)等屬性，以樹的形式嵌套娃闲。
參考--渲染器

虛擬 dom 是相對于瀏覽器所渲染出來的真實 dom 的虚汛，在react，vue等技術(shù)出現(xiàn)之前皇帮，我們要改變頁面展示的內(nèi)容只能通過遍歷查詢 dom 樹的方式找到需要修改的 dom 然后修改樣式行為或者結(jié)構(gòu)卷哩，來達到更新 ui 的目的。
這種方式相當消耗計算資源属拾，因為每次查詢 dom 幾乎都需要遍歷整顆 dom 樹将谊，如果建立一個與 dom 樹對應(yīng)的虛擬 dom 對象（ js 對象），以對象嵌套的方式來表示 dom 樹渐白，那么每次 dom 的更改就變成了 js 對象的屬性的更改尊浓，這樣一來就能查找 js 對象的屬性變化要比查詢 dom 樹的性能開銷小。

183纯衍、 什么是雙向綁定栋齿？原理是什么？

雙向數(shù)據(jù)綁定個人理解就是存在data→view,view→data兩條數(shù)據(jù)流的模式襟诸。其實可以簡單的理解為change和bind的結(jié)合瓦堵。目前雙向數(shù)據(jù)綁定都是基于Object.defineProperty()重新定義get和set方法實現(xiàn)的。修改觸發(fā)set方法賦值歌亲，獲取觸發(fā)get方法取值菇用，并通過數(shù)據(jù)劫持發(fā)布信息.

虛擬 dom 是相對于瀏覽器所渲染出來的真實 dom 的，在react陷揪，vue等技術(shù)出現(xiàn)之前刨疼，我們要改變頁面展示的內(nèi)容只能通過遍歷查詢 dom 樹的方式找到需要修改的 dom 然后修改樣式行為或者結(jié)構(gòu)泉唁，來達到更新 ui 的目的。
這種方式相當消耗計算資源揩慕，因為每次查詢 dom 幾乎都需要遍歷整顆 dom 樹亭畜，如果建立一個與 dom 樹對應(yīng)的虛擬 dom 對象（ js 對象），以對象嵌套的方式來表示 dom 樹迎卤，那么每次 dom 的更改就變成了 js 對象的屬性的更改拴鸵，這樣一來就能查找 js 對象的屬性變化要比查詢 dom 樹的性能開銷小。

184蜗搔、 vue和react有什么不同劲藐？使用場景是什么？

vue上手易樟凄，響應(yīng)式數(shù)據(jù)聘芜，不需要手動render和優(yōu)化，維護整套解決方案(vuex,vue-router,nuxt.js)
react的jsx有一定上手成本(有限)缝龄， all in js很靈活汰现，可以很方便實踐ES新特性(::和?.學(xué)不動了),需手動更新(setState)和優(yōu)化(shouldComponentUpdate),社區(qū)活躍(貢獻了很多解決方案)，移動端解決方案(RN)

1叔壤、vue是完整一套由官方維護的框架瞎饲，核心庫主要有由尤雨溪大神獨自維護，而react是不要臉的書維護（很多庫由社區(qū)維護）炼绘，曾經(jīng)一段時間很多人質(zhì)疑vue的后續(xù)維護性嗅战，似乎這并不是問題。
2俺亮、vue上手簡單驮捍，進階式框架，白話說你可以學(xué)一點脚曾，就可以在你項目中去用一點东且，你不一定需要一次性學(xué)習(xí)整個vue才能去使用它，而react斟珊，恐怕如果你這樣會面對項目束手無策。
3富纸、語法上vue并不限制你必須es6+完全js形式編寫頁面囤踩，可以視圖和js邏輯盡可能分離，減少很多人看不慣react-jsx的惡心嵌套晓褪，畢竟都是作為前端開發(fā)者堵漱，還是更習(xí)慣于html干凈。
4涣仿、很多人說react適合大型項目勤庐，適合什么什么示惊，vue輕量級，適合移動端中小型項目愉镰，其實我想說米罚，說這話的人是心里根本沒點逼數(shù)，vue完全可以應(yīng)對復(fù)雜的大型應(yīng)用丈探，甚至于說如果你react學(xué)的不是很好录择，寫出來的東西或根本不如vue寫的，畢竟vue跟著官方文檔擼就行碗降，自有人幫你規(guī)范隘竭，而react比較懶散自由，可以自由發(fā)揮
5讼渊、vue在國內(nèi)人氣明顯勝過react动看，這很大程度上得益于它的很多語法包括編程思維更符合國人思想
6、學(xué)習(xí)前端爪幻，關(guān)注唯品秀前端技術(shù)博客菱皆，同時分享你的前端經(jīng)驗！

185笔咽、 說說vue的優(yōu)缺點

這個感覺和對vue的理解是差不多的題
優(yōu)點：
1. 數(shù)據(jù)驅(qū)動
2.模塊化
3.輕量級
4.SPA
5. 版本3.0的界面化管理工具比較好使
6.vue易入門
7.中文社區(qū)強大
缺點：
0. 不支持低版本瀏覽器,不支持IE8以下瀏覽器
1.吃內(nèi)存（每個組件都會實例化一個Vue實例搔预，實例的屬性和方法很多）
2.定義在data里面的對象，實例化時叶组，都會遞歸的遍歷轉(zhuǎn)成響應(yīng)式數(shù)據(jù)拯田，然而有的響應(yīng)式數(shù)據(jù)我們并不會用到，造成性能上的浪費
3.像keep-alive transition transition-group 這些內(nèi)置組件甩十，不管用不用其實都已經(jīng)掛到Vue.options.components上船庇，如果不用，造成對象變大侣监，從而占用內(nèi)存
4.父子組件更新鸭轮，沒有明確的來源

186、 有使用過vue嗎橄霉？說說你對vue的理解

1.mvvm框架
2.數(shù)據(jù)驅(qū)動
3.SPA
4.漸進式

vue-cli

1窃爷、 vue-cli提供了的哪幾種腳手架模板？

vue-cli2.x 好像有個simple和完整版的
vue-cli3.x 提供了自定義裝箱配置 可以選裝
TypeScript
PWA
lint
e2e
css 預(yù)處理
router
vuex

2姓蜂、 vue-cli工程中常用的npm命令有哪些按厘？

npm run dev，npm install 模塊名钱慢，npm run build逮京，npm uninstall，npm help

3束莫、 在使用vue-cli開發(fā)vue項目時懒棉，自動刷新頁面的原理你了解嗎草描？

自動刷新頁面并不是vue-cli的功能，而是webpack的
hot-module-replacement-plugin插件在做這件事策严，這個插件是
webpack自帶的插件穗慕，用來做hmr的。如果需要配置hmr只
需要在webpack.config.js的devServer字段寫 下面的配置即
可享钞。
{
contentBase: 服務(wù)器可以訪問的根目錄,
hot:true, //開啟熱模塊替換也就是hmr
hotOnly:true //不刷新頁面揍诽，只做hmr
}
而由于vue-cli3集成了webpack的配置，
所以vue.config.js里面也有這個屬性栗竖，配置寫法是一樣的暑脆。

4、 vue-cli3插件有寫過嗎狐肢？怎么寫一個代碼生成插件添吗？

MyPlugin.install = function (Vue, options) {
// 1. 添加全局方法或?qū)傩?Vue.myGlobalMethod = function () {
// 邏輯...
}

// 2. 添加全局資源
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// 邏輯...
}
...
})

// 3. 注入組件選項
Vue.mixin({
created: function () {
// 邏輯...
}
...
})

// 4. 添加實例方法
Vue.prototype.$myMethod = function (methodOptions) {
// 邏輯...
}
}

5、 vue-cli生成的項目可以使用es6份名、es7的語法嗎碟联？為什么？

首先說結(jié)論, 有些可以直接使用, 有些不行

根據(jù)vue-cli 3.0的配置, 如果webpack能檢測到, 它會自動把
墊片自動打包到vendor中, 但是有些特性它檢測不出來, 如es6.promise, 等
vue-cli 配置了babel,可以將es6,es7....etc在webpack打包的
時候轉(zhuǎn)換成es5的代碼僵腺，所以上線的時候沒有問題鲤孵。但是腳
手架只是配置了一些默認常見的用法， 可以根據(jù)babel官網(wǎng)
配置一些尚在草案中的語法

6辰如、 vue-cli怎么解決跨域的問題普监？

vue-cli無法解決跨域問題。真正解決跨域問的是webpack琉兜。只不過vue-cli3.0將webpack的配置繼承到了vue.config.js中凯正，才給初學(xué)者造成了vue-cli可以解決跨域的錯覺。
與在webpack.config.js中配置跨域一樣，在vue.config.js中的devServer:{proxy:{}}字段可以編寫跨域配置。
具體的配置寫法webpack文檔寫的很清楚淮菠。

7、 vue-cli中你經(jīng)常的加載器有哪些组砚？

vue-loader/style-loader/sass-loader/url-loader...

8、 你知道什么是腳手架嗎？

在前端中, 就是幫助我們更好的管理代碼, 打包代碼和其它資源, 保證項目規(guī)范和一些規(guī)則的工具

vue項目一般是使用webpack進行打包構(gòu)建的，然而如果每一個項目都需要我們?nèi)ヅ渲胠oader和plugin的話缭受，是很重復(fù)的勞動，并且vue項目需要使用到的最基本的webpack loader和webpack plugin是相同的浩销。因此官方推出了vue-cli這個腳手架贯涎，使用它就可以快速的生成一份通用的webpack配置听哭，并且?guī)臀覀儼惭b好很多必定會用到的npm包慢洋。

9塘雳、 說下你了解的vue-cli原理？你可以自己實現(xiàn)個類vue-cli嗎普筹？

原理就是通過node環(huán)境發(fā)起git請求败明，把預(yù)先設(shè)置好的模板下載下來

10、 怎么使用vue-cli3創(chuàng)建一個項目太防？

直接 vue create 項目名

11妻顶、 vue-cli3你有使用過嗎？它和2.x版本有什么區(qū)別蜒车？

Vue CLI 的包名稱由 vue-cli 改成了 @vue/cli
vue cli 3 npm install -g @vue/cli
vue create hello-world
vue cli 2.x npm install -g vue-cli
vue init webpack my-project

vue-cli3.0 將webpack的配置集成了進來讳嘱，使用vue-cli3.0創(chuàng)建的項目在配置webpack的時候可以直接在vue.config.js里面配置。既可以用chainwebpack的鏈式語法也可以直接在configureWebpack字段內(nèi)直接寫webpack原生的配置酿愧。

12沥潭、 vue-cli默認是單頁面的，那要弄成多頁面該怎么辦呢嬉挡？
13钝鸽、 不用vue-cli，你自己有搭建過vue的開發(fā)環(huán)境嗎庞钢？流程是什么拔恰？

vue-router

1、 vue-router怎么重定向頁面基括？

redirect alias

方法一：在routes:[{
{ path: '/a', redirect: '/b' }
}]
方法二：別名
routes: [
{ path: '/a', component: A, alias: '/b' }
]

2颜懊、 vue-router怎么配置404頁面？

將path：'*' , *放在最后阱穗，因為如果你放在前面會導(dǎo)致后面的的不能匹配

3饭冬、 切換路由時，需要保存草稿的功能揪阶，怎么實現(xiàn)呢昌抠？

用keep-alive緩存那個路由

在beforeDestroy中加入check功能,
當檢測到有草稿時, 自動保存到vuex或者storage中或者window中等等
但是我要說的是, 這種方法是不靠譜的, 如果我是刷新頁面呢!
建議采用, 實施保存操作, 保存在storage中較為靠譜, 當然這種操作犧牲是比較多的,可以用beforeDestroy結(jié)合window.onbeforeunload解決性能問題

4、 vue-router路由有幾種模式鲁僚？說說它們的區(qū)別炊苫？

hash: 使用變更hash不會刷新頁面的特性, 來變更路由, 做到單頁面無刷新,hash表示的是url中#的變化，當#變化是引起路由跳轉(zhuǎn)
history: 使用html5的history方法, 不支持老舊瀏覽器, 但是如果要部署到服務(wù)器的化, 需要在ng上進行相應(yīng)的正向代理跳轉(zhuǎn), 否則拷貝的鏈接會打不開

5冰沙、 vue-router有哪幾種導(dǎo)航鉤子（ 導(dǎo)航守衛(wèi) ）侨艾？

共有三種守衛(wèi)：
1:全局守衛(wèi)：beforeEach,afterEach
2:路由獨享守衛(wèi)：beforeEnter
3:組件級別的守衛(wèi)beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave他們執(zhí)行順序：全局》路由》組件
除了afterEach全局后置外，其他的守衛(wèi)中務(wù)必要調(diào)用next(),否則無法完成導(dǎo)航
還有注意全局前置守衛(wèi)可以用來進行攔截拓挥，（登錄攔截）

6唠梨、 說說你對router-link的了解

vue-router插件的其中一個組件, 用于跳轉(zhuǎn)路由, 類似于a標簽, 它一般也會渲染成a標簽, 但是可以通過tag來變更默認渲染元素, 通過to來跳轉(zhuǎn)

7、 vue-router如何響應(yīng)路由參數(shù)的變化侥啤？

1.watch
2.在父組件的router-view上加個key

8当叭、 你有看過vue-router的源碼嗎茬故？說說看

9、 切換到新路由時蚁鳖，頁面要滾動到頂部或保持原先的滾動位置怎么做呢磺芭？

通過router 的meta來記錄需要保存滾動條的位置,在new VueRouter()時調(diào)用scrollBehavior(to, from, savedPosition) {return { x: 0, y: 0 }}的方法

10、 在什么場景下會用到嵌套路由醉箕？

舉個例子钾腺，例如做個管理系統(tǒng)，頂部欄和左側(cè)菜單欄是全局通用的讥裤，那就應(yīng)該放在父路由放棒，而右下的頁面內(nèi)容部分放在子路由

11、 如何獲取路由傳過來的參數(shù)己英？

如果使用query方式傳入的參數(shù)使用this.$route.query 接收
如果使用params方式傳入的參數(shù)使用this.$router.params接收

12哨查、 說說active-class是哪個組件的屬性？

active-class是vue-router模塊的router-link組件中的屬性剧辐，用來做選中樣式的切換

13寒亥、 在vue組件中怎么獲取到當前的路由信息？

this.$router.path

14荧关、 vur-router怎么重定向溉奕？

15、 怎樣動態(tài)加載路由忍啤？

router.addRoutes

16加勤、 怎么實現(xiàn)路由懶加載呢？

用箭頭函數(shù)的方法 component:()=>import('組件路徑')

17同波、 如果讓你從零開始寫一個vue路由鳄梅，說說你的思路

為了方便后期維護，建議獨立出一個 router.js 文件
npm install vue-router
引入注冊
import Router from 'vue-router';
Vue.user(Router);
向外暴露出一個router實例
export default new Router({
    mode: '',
    path: '',
    name: '',
    ...
});

18未檩、 說說vue-router完整的導(dǎo)航解析流程是什么戴尸？

1.導(dǎo)航被觸發(fā)；2.在失活的組件里調(diào)用beforeRouteLeave守衛(wèi)冤狡；3.調(diào)用全局beforeEach守衛(wèi)孙蒙；4.在復(fù)用組件里調(diào)用beforeRouteUpdate守衛(wèi)；5.調(diào)用路由配置里的beforeEnter守衛(wèi)悲雳；6.解析異步路由組件挎峦；7.在被激活的組件里調(diào)用beforeRouteEnter守衛(wèi)；8.調(diào)用全局beforeResolve守衛(wèi)合瓢；9.導(dǎo)航被確認坦胶；10..調(diào)用全局的afterEach鉤子；11.DOM更新；12.用創(chuàng)建好的實例調(diào)用beforeRouteEnter守衛(wèi)中傳給next的回調(diào)函數(shù)顿苇。

19掷匠、 路由之間是怎么跳轉(zhuǎn)的？有哪些方式岖圈？

this.$router.go/replace/push
router-link to

20、 如果vue-router使用history模式钙皮，部署時要注意什么蜂科？

服務(wù)器的404頁面需要重定向到index.html

21、 route和router有什么區(qū)別短条？

route代表當前路由對象导匣，router代表整個vue實例下的路由對象,即router是new vueRouter的實例

22、 vue-router鉤子函數(shù)有哪些茸时？都有哪些參數(shù)贡定？

全局的：beforeEach、beforeResolve可都、afterEach
路由的：beforeEnter
組件的：beforeRouteEnter缓待、beforeRouteUpdate、beforeRouteLeave
參數(shù)：to渠牲、from旋炒、next；正對不同的鉤子函數(shù)參數(shù)有所差異签杈。

23瘫镇、 vue-router是用來做什么的？它有哪些組件答姥？

vue-router路由铣除，通俗來講主要是來實現(xiàn)頁面的跳轉(zhuǎn)，通過設(shè)置不同的path鹦付，向服務(wù)器發(fā)送的不同的請求尚粘，獲取不同的資源。
主要組件：router-view敲长、router-link

vuex

1背苦、 你有寫過vuex中store的插件嗎？
2潘明、 你有使用過vuex的module嗎行剂？主要是在什么場景下使用？

把狀態(tài)全部集中在狀態(tài)樹上钳降，非常難以維護厚宰。
按模塊分成多個module，狀態(tài)樹延伸多個分支，模塊的狀態(tài)內(nèi)聚铲觉，主枝干放全局共享狀態(tài)

3澈蝙、 vuex中actions和mutations有什么區(qū)別？

mutations可以直接修改state撵幽，但只能包含同步操作灯荧，同時，只能通過提交commit調(diào)用(盡量通過Action或mapMutation調(diào)用而非直接在組件中通過this.$store.commit()提交)
actions是用來觸發(fā)mutations的盐杂，它無法直接改變state逗载，它可以包含異步操作，它只能通過store.dispatch觸發(fā)

4链烈、 vuex使用actions時不支持多參數(shù)傳遞怎么辦厉斟？

一個Object解決所有問題

5、 你覺得vuex有什么缺點强衡？

6擦秽、 你覺得要是不用vuex的話會帶來哪些問題？

多組件公用狀態(tài)的時候想死, 特別是大型項目,數(shù)據(jù)共享不方便

7漩勤、 vuex怎么知道state是通過mutation修改還是外部直接修改的感挥？

通過$watch監(jiān)聽mutation的commit函數(shù)中_committing是否為true
這道題感覺有點問題，在vuex嚴格模式下越败，是不讓外部直接修改state的

8链快、 請求數(shù)據(jù)是寫在組件的methods中還是在vuex的action中？

個人認為如果請求回來的數(shù)據(jù)如果是多次在多個組件中共用的話眉尸，就寫在vuex這個統(tǒng)一數(shù)據(jù)管理倉庫中域蜗，并放在vuex的actions屬性中定義請求函數(shù)（請求是異步的，不能放在mutations中）噪猾，然后在用到請求數(shù)據(jù)的地方通過$this.dispatch（‘a(chǎn)ctions名稱’）去觸發(fā)執(zhí)行請求霉祸。
但是如果請求只在該組件用到的話就沒必要放在vuex中了，直接在該組件的methods中請求即可袱蜡。

9丝蹭、 怎么監(jiān)聽vuex數(shù)據(jù)的變化？

在mutations中監(jiān)視

10坪蚁、 vuex的action和mutation的特性是什么奔穿？有什么區(qū)別？

11敏晤、 頁面刷新后vuex的state數(shù)據(jù)丟失怎么解決贱田？

就是放在localStorage 或者就是sessionStorage ，或者借用輔助插vuex-persistedstate
通常情況state里的初始數(shù)據(jù)是空嘴脾，通過mutation或者action的方法獲取實際數(shù)據(jù)后存放在state中男摧。這些方法往往是在某個組件（組件A）的生命周期或者事件中調(diào)用蔬墩。如果在刷新頁面的時候這些方法沒有被調(diào)用（例如此時頁面中沒有組件A，或組件A的對應(yīng)事件沒有被觸發(fā)）耗拓，那么就沒有獲取實際數(shù)據(jù)拇颅，state的數(shù)據(jù)就是初始的空。
對癥下藥乔询，就是要確保刷新頁面以后調(diào)用對應(yīng)的獲取數(shù)據(jù)方法樟插。
最萬金油的解決是在App.vue的mounted生命周期中去調(diào)用這些方法。不管在哪個路由下刷新頁面竿刁，總會執(zhí)行黄锤。

12、 vuex的state们妥、getter、mutation勉吻、action监婶、module特性分別是什么？

state, 狀態(tài)初始化, 并實施觀察
getter, 獲取數(shù)據(jù)用于view或data中使用
mutation: 內(nèi)部處理state變化
action: 處理外部交互
module: 模塊化以上四個

13齿桃、 vuex的store有幾個屬性值惑惶？分別講講它們的作用是什么？

state:存貯公共數(shù)據(jù)的地方
Getters：獲取公共數(shù)據(jù)的地方
mutations：放的是同步的操作和reducer有點像 通過store的commit方法來讓mutations執(zhí)行
action：放的是異步的操作 通過dispatch的方法讓action里面的方法執(zhí)行
context是store的一個副本
Vuex就是提供一個倉庫短纵，store倉庫里面放了很多對象其中state即使數(shù)據(jù)源存放地带污，

14、 你理解的vuex是什么呢香到？哪些場景會用到鱼冀？不用會有問題嗎？有哪些特性悠就？

狀態(tài)管理, 當項目中有大量組件共用到一些狀態(tài)的時候, 我就會考慮用.
其實不是每個項目都需要
不用就是參數(shù)控制比較麻煩, 比如多個兄弟組件公用參數(shù).

15千绪、 使用vuex的優(yōu)勢是什么？

便于進行全局或者局部的狀態(tài)管理. 便于組件/插件/混合之間的聯(lián)系
其實vuex中的所有功能都能夠通過其他的方式進行實現(xiàn)梗脾，只不過vuex對這些方法進行了整合處理荸型，使用起來更加便捷，同時也便于維護炸茧。全局狀態(tài)變量的統(tǒng)一管理

16瑞妇、 有用過vuex嗎？它主要解決的是什么問題梭冠？推薦在哪些場景用辕狰？

我主要還是當全局變量來用的，比如登錄人信息控漠、token柳琢、瀏覽記錄、跨組件的較大臨時數(shù)據(jù)傳遞。
以往需要調(diào)個方法取全局變量或緩存柬脸，其實反而增加了初始化流程他去，而會自動更新的 vuex 就很好用了

ElementUI

1、 ElementUI是怎么做表單驗證的倒堕？在循環(huán)里對每個input驗證怎么做呢灾测？
model 綁定表單數(shù)據(jù) 通過prop 取表單數(shù)值，根據(jù)rule取form-item rules 或則rules[prop]校驗
2垦巴、 你有二次封裝過ElementUI組件嗎媳搪？

popover + button 的組件，點擊該按鈕后還有個二次確認或選擇的交互

3骤宣、 ElementUI怎么修改組件的默認樣式秦爆？

el-table /deep/{} 把要改的寫在里面
第一直接按照element默認修改主題的方式, 直接修改配置
第二直接覆蓋樣式

4、 ElementUI的穿梭組件如果數(shù)據(jù)量大會變卡怎么解決不卡的問題呢憔披？

在 left-footer 的 slot 里面加個翻頁組件等限，
并修改 filter-method 方法重繪穿梭機組件，
大概保持每頁 50 條這樣子芬膝。

5望门、 ElementUI表格組件如何實現(xiàn)動態(tài)表頭？

使用自定義表頭锰霜，即 <el-table-column> 中傳入自定義 slot筹误。
表頭整體結(jié)構(gòu)變化則得自己 v-for 表頭配置拼 <el-table-column> 重繪

6、 ElementUI使用表格組件時有遇到過問題嗎癣缅？
7厨剪、 有閱讀過ElementUI的源碼嗎？
8友存、 項目中有使用過ElementUI嗎丽惶？有遇到過哪些問題？它的使用場景主要是哪些爬立？

當然是用過了 很多后臺系統(tǒng)钾唬，都會是用vue結(jié)合上ElementUI來實現(xiàn)，很大程度上提高了開發(fā)效率侠驯；
遇到的問題：對于修改其默認樣式需謹慎

9抡秆、 有用過哪些vue的ui？說說它們的優(yōu)缺點吟策？

個人認為iview比elementUI好看儒士，elementUI在多級聯(lián)動菜單有一個bug（父子value一樣的時候不顯示）

mint-ui

1、 mint-ui使用過程中有沒有遇到什么坑檩坚？怎么解決的着撩？

1诅福，樣式不容易被修改，可以用/deep/或者》》》進行復(fù)寫拖叙；
2氓润，F(xiàn)ield組件在ios上，輸入框的提示信息太靠后薯鳍，由label引起的咖气，所以不要用它自帶的label做提示名；自己寫挖滤；
3崩溪，無限滾動很坑很坑

2、 說出幾個mint-ui常用的組件

3斩松、 mint-ui是什么伶唯？你有使用過嗎？

基于 Vue.js 的移動端組件庫,minit-ui是移動端是餓了么團隊開發(fā)的,后者element-ui是PC端也是餓了么團隊開發(fā)的

作者：浪子神劍
鏈接：http://www.reibang.com/p/5f9cef0bfa51