vue的底層原理?

vue組件之間的通信石蔗？

JS中判斷數(shù)據(jù)類型的方法有幾種?

最常見的判斷方法：typeof

判斷已知對象類型的方法：instanceof

根據(jù)對象的constructor判斷： constructor

無敵萬能的方法：jquery.type()

vue與angular的區(qū)別?

1.vue僅僅是mvvm中的view層闪朱，只是一個如jquery般的工具庫，而不是框架犀斋，而angular而是mvvm框架。

2.vue的雙向邦定是基于ES5 中的 3.getter/setter來實現(xiàn)的锌妻，而angular而是由自己實現(xiàn)一套模版編譯規(guī)則楚里，需要進(jìn)行所謂的“臟”檢查，vue則不需要优训。因此朵你，vue在性能上更高效，但是代價是對于ie9以下的瀏覽器無法支持揣非。

4.vue需要提供一個el對象進(jìn)行實例化抡医，后續(xù)的所有作用范圍也是在el對象之下，而angular而是整個html頁面早敬。一個頁面忌傻，可以有多個vue實例，而angular好像不是這么玩的搞监。

5.vue真的很容易上手水孩，學(xué)習(xí)成本相對低，不過可以參考的資料不是很豐富琐驴，官方文檔比較簡單俘种，缺少全面的使用案例。高級的用法绝淡，需要自己去研究源碼宙刘，至少目前是這樣。

1.vue優(yōu)點牢酵？

答：輕量級框架：只關(guān)注視圖層悬包，是一個構(gòu)建數(shù)據(jù)的視圖集合，大小只有幾十kb馍乙；

簡單易學(xué)：國人開發(fā)布近，中文文檔垫释，不存在語言障礙 ，易于理解和學(xué)習(xí)吊输；

雙向數(shù)據(jù)綁定：保留了angular的特點饶号，在數(shù)據(jù)操作方面更為簡單铁追；

組件化：保留了react的優(yōu)點季蚂，實現(xiàn)了html的封裝和重用，在構(gòu)建單頁面應(yīng)用方面有著獨特的優(yōu)勢琅束；

視圖扭屁，數(shù)據(jù)，結(jié)構(gòu)分離：使數(shù)據(jù)的更改更為簡單涩禀，不需要進(jìn)行邏輯代碼的修改料滥，只需要操作數(shù)據(jù)就能完成相關(guān)操作；

虛擬DOM：dom操作是非常耗費性能的艾船， 不再使用原生的dom操作節(jié)點葵腹，極大解放dom操作，但具體操作的還是dom不過是換了另一種方式屿岂；

運行速度更快:相比較與react而言践宴，同樣是操作虛擬dom，就性能而言爷怀，vue存在很大的優(yōu)勢阻肩。

2.vue父組件向子組件傳遞數(shù)據(jù)？

答：通過props

3.子組件像父組件傳遞事件运授？

答：$emit方法

4.v-show和v-if指令的共同點和不同點烤惊？

答: 共同點：都能控制元素的顯示和隱藏；

不同點：實現(xiàn)本質(zhì)方法不同吁朦，v-show本質(zhì)就是通過控制css中的display設(shè)置為none柒室，控制隱藏，只會編譯一次逗宜；v-if是動態(tài)的向DOM樹內(nèi)添加或者刪除DOM元素伦泥，若初始值為false，就不會編譯了锦溪。而且v-if不停的銷毀和創(chuàng)建比較消耗性能不脯。

總結(jié)：如果要頻繁切換某節(jié)點，使用v-show(切換開銷比較小刻诊，初始開銷較大)防楷。如果不需要頻繁切換某節(jié)點使用v-if（初始渲染開銷較小，切換開銷比較大）则涯。

5.如何讓CSS只在當(dāng)前組件中起作用复局？

答：在組件中的style前面加上scoped

6.<keep-alive></keep-alive>的作用是什么?

答:keep-alive 是 Vue 內(nèi)置的一個組件冲簿，可以使被包含的組件保留狀態(tài)，或避免重新渲染亿昏。

7.如何獲取dom?

答：ref="domName" 用法：this.$refs.domName

8.說出幾種vue當(dāng)中的指令和它的用法峦剔？

答：v-model雙向數(shù)據(jù)綁定；

v-for循環(huán)角钩；

v-if v-show 顯示與隱藏吝沫；

v-on事件；v-once: 只綁定一次递礼。

9. vue-loader是什么惨险？使用它的用途有哪些？

答：vue文件的一個加載器脊髓，將template/js/style轉(zhuǎn)換成js模塊辫愉。

用途：js可以寫es6、style樣式可以scss或less将硝、template可以加jade等

10.為什么使用key?

答：需要使用key來給每個節(jié)點做一個唯一標(biāo)識恭朗，Diff算法就可以正確的識別此節(jié)點。

作用主要是為了高效的更新虛擬DOM依疼。

11.axios及安裝?

答：請求后臺資源的模塊痰腮。npm install axios --save裝好，

js中使用import進(jìn)來涛贯，然后.get或.post诽嘉。返回在.then函數(shù)中如果成功，失敗則是在.catch函數(shù)中弟翘。

12.v-modal的使用虫腋。

答：v-model用于表單數(shù)據(jù)的雙向綁定，其實它就是一個語法糖稀余，這個背后就做了兩個操作：

v-bind綁定一個value屬性悦冀；

v-on指令給當(dāng)前元素綁定input事件。

13.請說出vue.cli項目中src目錄每個文件夾和文件的用法睛琳？

答：assets文件夾是放靜態(tài)資源盒蟆；components是放組件；router是定義路由相關(guān)的配置; app.vue是一個應(yīng)用主組件师骗；main.js是入口文件历等。

14.分別簡述computed和watch的使用場景

答：computed:

　　　　當(dāng)一個屬性受多個屬性影響的時候就需要用到computed

　　　　最典型的栗子： 購物車商品結(jié)算的時候

watch:

　　　　當(dāng)一條數(shù)據(jù)影響多條數(shù)據(jù)的時候就需要用watch

　　　　栗子：搜索數(shù)據(jù)

15.v-on可以監(jiān)聽多個方法嗎？

答：可以辟癌，栗子：<input type="text" v-on="{ input:onInput,focus:onFocus,blur:onBlur, }">寒屯。

16.$nextTick的使用

答：當(dāng)你修改了data的值然后馬上獲取這個dom元素的值，是不能獲取到更新后的值，

你需要使用$nextTick這個回調(diào)寡夹，讓修改后的data值渲染更新到dom元素之后在獲取处面，才能成功。

17.vue組件中data為什么必須是一個函數(shù)菩掏？

答：因為JavaScript的特性所導(dǎo)致魂角，在component中，data必須以函數(shù)的形式存在智绸，不可以是對象野揪。

　　組建中的data寫成一個函數(shù)，數(shù)據(jù)以函數(shù)返回值的形式定義传于，這樣每次復(fù)用組件的時候囱挑，都會返回一份新的data醉顽，相當(dāng)于每個組件實例都有自己私有的數(shù)據(jù)空間沼溜，它們只負(fù)責(zé)各自維護(hù)的數(shù)據(jù)，不會造成混亂游添。而單純的寫成對象形式系草，就是所有的組件實例共用了一個data，這樣改一個全都改了唆涝。

18.漸進(jìn)式框架的理解

答：主張最少找都；可以根據(jù)不同的需求選擇不同的層級；

19.Vue中雙向數(shù)據(jù)綁定是如何實現(xiàn)的廊酣？

答：vue 雙向數(shù)據(jù)綁定是通過 數(shù)據(jù)劫持 結(jié)合 發(fā)布訂閱模式的方式來實現(xiàn)的能耻， 也就是說數(shù)據(jù)和視圖同步，數(shù)據(jù)發(fā)生變化亡驰，視圖跟著變化晓猛，視圖變化，數(shù)據(jù)也隨之發(fā)生改變凡辱；

核心：關(guān)于VUE雙向數(shù)據(jù)綁定戒职，其核心是 Object.defineProperty()方法。

20.單頁面應(yīng)用和多頁面應(yīng)用區(qū)別及優(yōu)缺點

答：單頁面應(yīng)用（SPA）透乾，通俗一點說就是指只有一個主頁面的應(yīng)用洪燥，瀏覽器一開始要加載所有必須的 html, js, css。所有的頁面內(nèi)容都包含在這個所謂的主頁面中乳乌。但在寫的時候捧韵，還是會分開寫（頁面片段），然后在交互的時候由路由程序動態(tài)載入汉操，單頁面的頁面跳轉(zhuǎn)再来，僅刷新局部資源。多應(yīng)用于pc端客情。

多頁面（MPA）其弊，就是指一個應(yīng)用中有多個頁面癞己，頁面跳轉(zhuǎn)時是整頁刷新

單頁面的優(yōu)點：

用戶體驗好，快梭伐，內(nèi)容的改變不需要重新加載整個頁面痹雅，基于這一點spa對服務(wù)器壓力較小糊识；前后端分離绩社；頁面效果會比較炫酷（比如切換頁面內(nèi)容時的專場動畫）。

單頁面缺點：

不利于seo赂苗；導(dǎo)航不可用愉耙，如果一定要導(dǎo)航需要自行實現(xiàn)前進(jìn)、后退拌滋。（由于是單頁面不能用瀏覽器的前進(jìn)后退功能朴沿，所以需要自己建立堆棧管理）；初次加載時耗時多败砂；頁面復(fù)雜度提高很多赌渣。

21.v-if和v-for的優(yōu)先級

答：當(dāng) v-if 與 v-for 一起使用時，v-for 具有比 v-if 更高的優(yōu)先級昌犹，這意味著 v-if 將分別重復(fù)運行于每個 v-for 循環(huán)中坚芜。所以，不推薦v-if和v-for同時使用斜姥。

如果v-if和v-for一起用的話鸿竖，vue中的的會自動提示v-if應(yīng)該放到外層去。

22.assets和static的區(qū)別

答：相同點：assets和static兩個都是存放靜態(tài)資源文件铸敏。項目中所需要的資源文件圖片缚忧，字體圖標(biāo)，樣式文件等都可以放在這兩個文件下搞坝，這是相同點?

不相同點：assets中存放的靜態(tài)資源文件在項目打包時搔谴，也就是運行npm run build時會將assets中放置的靜態(tài)資源文件進(jìn)行打包上傳，所謂打包簡單點可以理解為壓縮體積桩撮，代碼格式化敦第。而壓縮后的靜態(tài)資源文件最終也都會放置在static文件中跟著index.html一同上傳至服務(wù)器。static中放置的靜態(tài)資源文件就不會要走打包壓縮格式化等流程店量，而是直接進(jìn)入打包好的目錄芜果，直接上傳至服務(wù)器。因為避免了壓縮直接進(jìn)行上傳融师，在打包時會提高一定的效率右钾，但是static中的資源文件由于沒有進(jìn)行壓縮等操作，所以文件的體積也就相對于assets中打包后的文件提交較大點。在服務(wù)器中就會占據(jù)更大的空間舀射。

建議：將項目中template需要的樣式文件js文件等都可以放置在assets中窘茁，走打包這一流程。減少體積脆烟。而項目中引入的第三方的資源文件如iconfoont.css等文件可以放置在static中山林，因為這些引入的第三方文件已經(jīng)經(jīng)過處理，我們不再需要處理邢羔，直接上傳驼抹。

23.vue常用的修飾符

答：.stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡拜鹤；

.prevent：等同于JavaScript中的event.preventDefault()框冀，防止執(zhí)行預(yù)設(shè)的行為（如果事件可取消，則取消該事件敏簿，而不停止事件的進(jìn)一步傳播）明也；

.capture：與事件冒泡的方向相反，事件捕獲由外到內(nèi)极谊；

.self：只會觸發(fā)自己范圍內(nèi)的事件诡右，不包含子元素安岂；

.once：只會觸發(fā)一次轻猖。

24.vue的兩個核心點

答：數(shù)據(jù)驅(qū)動、組件系統(tǒng)

數(shù)據(jù)驅(qū)動：ViewModel域那，保證數(shù)據(jù)和視圖的一致性咙边。

組件系統(tǒng)：應(yīng)用類UI可以看作全部是由組件樹構(gòu)成的。

25.vue和jQuery的區(qū)別

答：jQuery是使用選擇器（$）選取DOM對象次员，對其進(jìn)行賦值败许、取值、事件綁定等操作淑蔚，其實和原生的HTML的區(qū)別只在于可以更方便的選取和操作DOM對象市殷，而數(shù)據(jù)和界面是在一起的。比如需要獲取label標(biāo)簽的內(nèi)容：$("lable").val();,它還是依賴DOM元素的值刹衫。?

Vue則是通過Vue對象將數(shù)據(jù)和View完全分離開來了醋寝。對數(shù)據(jù)進(jìn)行操作不再需要引用相應(yīng)的DOM對象，可以說數(shù)據(jù)和View是分離的带迟，他們通過Vue對象這個vm實現(xiàn)相互的綁定音羞。這就是傳說中的MVVM。

26. 引進(jìn)組件的步驟

答: 在template中引入組件仓犬；

在script的第一行用import引入路徑嗅绰；

用component中寫上組件名稱。

27.delete和Vue.delete刪除數(shù)組的區(qū)別

答：delete只是被刪除的元素變成了 empty/undefined 其他的元素的鍵值還是不變。Vue.delete 直接刪除了數(shù)組 改變了數(shù)組的鍵值窘面。

28.SPA首屏加載慢如何解決

答：安裝動態(tài)懶加載所需插件翠语；使用CDN資源。

29.Vue-router跳轉(zhuǎn)和location.href有什么區(qū)別

答：使用location.href='/url'來跳轉(zhuǎn)财边，簡單方便啡专，但是刷新了頁面；

使用history.pushState('/url')制圈，無刷新頁面们童，靜態(tài)跳轉(zhuǎn)；

引進(jìn)router鲸鹦，然后使用router.push('/url')來跳轉(zhuǎn)慧库，使用了diff算法，實現(xiàn)了按需加載馋嗜，減少了dom的消耗齐板。

其實使用router跳轉(zhuǎn)和使用history.pushState()沒什么差別的，因為vue-router就是用了history.pushState()葛菇，尤其是在history模式下甘磨。

30. vue slot

答：簡單來說，假如父組件需要在子組件內(nèi)放一些DOM眯停，那么這些DOM是顯示济舆、不顯示、在哪個地方顯示莺债、如何顯示滋觉，就是slot分發(fā)負(fù)責(zé)的活。

31.你們vue項目是打包了一個js文件齐邦，一個css文件椎侠，還是有多個文件？

答：根據(jù)vue-cli腳手架規(guī)范措拇，一個js文件我纪，一個CSS文件。

32.Vue里面router-link在電腦上有用丐吓，在安卓上沒反應(yīng)怎么解決浅悉？

答：Vue路由在Android機(jī)上有問題，babel問題汰蜘，安裝babel polypill插件解決仇冯。

33.Vue2中注冊在router-link上事件無效解決方法

答： 使用@click.native。原因：router-link會阻止click事件族操，.native指直接監(jiān)聽一個原生事件苛坚。

34.RouterLink在IE和Firefox中不起作用（路由不跳轉(zhuǎn)）的問題

答: 方法一：只用a標(biāo)簽比被，不適用button標(biāo)簽；方法二：使用button標(biāo)簽和Router.navigate方法

35.axios的特點有哪些

答：從瀏覽器中創(chuàng)建XMLHttpRequests泼舱；

node.js創(chuàng)建http請求等缀；

支持Promise API；

攔截請求和響應(yīng)娇昙；

轉(zhuǎn)換請求數(shù)據(jù)和響應(yīng)數(shù)據(jù)尺迂；

取消請求；

自動換成json冒掌。

axios中的發(fā)送字段的參數(shù)是data跟params兩個噪裕，兩者的區(qū)別在于params是跟請求地址一起發(fā)送的，data的作為一個請求體進(jìn)行發(fā)送

params一般適用于get請求，data一般適用于post put 請求。

36.請說下封裝 vue 組件的過程姐刁？

答：1. 建立組件的模板，先把架子搭起來祭陷，寫寫樣式，考慮好組件的基本邏輯趣席。(os：思考1小時兵志，碼碼10分鐘，程序猿的準(zhǔn)則宣肚。)

　　2. 準(zhǔn)備好組件的數(shù)據(jù)輸入想罕。即分析好邏輯，定好 props 里面的數(shù)據(jù)钉寝、類型弧呐。

　　3. 準(zhǔn)備好組件的數(shù)據(jù)輸出。即根據(jù)組件邏輯嵌纲，做好要暴露出來的方法。

　　4. 封裝完畢了腥沽，直接調(diào)用即可

37.params和query的區(qū)別

答：用法：query要用path來引入，params要用name來引入今阳，接收參數(shù)都是類似的，分別是this.$route.query.name和this.$route.params.name墓臭。

url地址顯示：query更加類似于我們ajax中g(shù)et傳參，params則類似于post妖谴，說的再簡單一點酌摇，前者在瀏覽器地址欄中顯示參數(shù)嗡载，后者則不顯示

注意點：query刷新不會丟失query里面的數(shù)據(jù)

params刷新 會 丟失 params里面的數(shù)據(jù)窑多。

38.vue初始化頁面閃動問題

答：使用vue開發(fā)時，在vue初始化之前洼滚，由于div是不歸vue管的，所以我們寫的代碼在還沒有解析的情況下會容易出現(xiàn)花屏現(xiàn)象千康，看到類似于{{message}}的字樣铲掐，雖然一般情況下這個時間很短暫迹炼，但是我們還是有必要讓解決這個問題的砸彬。

首先：在css里加上[v-cloak] {

display: none;

}砂碉。

如果沒有徹底解決問題刻两，則在根元素加上style="display: none;" :style="{display: 'block'}"

39.vue更新數(shù)組時觸發(fā)視圖更新的方法

答:push()磅摹；pop()；shift()饼灿；unshift()帝美；splice()悼潭； sort()；reverse()

40.vue常用的UI組件庫

答：Mint UI皆疹，element占拍，VUX

41.vue修改打包后靜態(tài)資源路徑的修改

答：cli2版本：將 config/index.js 里的 assetsPublicPath 的值改為 './' 。

build: {

...

assetsPublicPath: './',

...?

}

cli3版本：在根目錄下新建vue.config.js 文件立砸，然后加上以下內(nèi)容：（如果已經(jīng)有此文件就直接修改）

module.exports = {

publicPath: '', // 相對于 HTML 頁面（目錄相同） }

生命周期函數(shù)面試題

1.什么是 vue 生命周期初茶？有什么作用？

答：每個 Vue 實例在被創(chuàng)建時都要經(jīng)過一系列的初始化過程——例如螺戳，需要設(shè)置數(shù)據(jù)監(jiān)聽倔幼、編譯模板爽待、將實例掛載到 DOM 并在數(shù)據(jù)變化時更新 DOM 等鸟款。同時在這個過程中也會運行一些叫做 生命周期鉤子 的函數(shù)，這給了用戶在不同階段添加自己的代碼的機(jī)會组哩。（ps：生命周期鉤子就是生命周期函數(shù)）例如处渣，如果要通過某些插件操作DOM節(jié)點罐栈，如想在頁面渲染完后彈出廣告窗， 那我們最早可在mounted 中進(jìn)行们豌。

2.第一次頁面加載會觸發(fā)哪幾個鉤子浅妆？

答：beforeCreate凌外， created涛浙， beforeMount， mounted

3.簡述每個周期具體適合哪些場景

答：beforeCreate：在new一個vue實例后胸墙，只有一些默認(rèn)的生命周期鉤子和默認(rèn)事件按咒，其他的東西都還沒創(chuàng)建励七。在beforeCreate生命周期執(zhí)行的時候，data和methods中的數(shù)據(jù)都還沒有初始化吼野。不能在這個階段使用data中的數(shù)據(jù)和methods中的方法

create：data 和 methods都已經(jīng)被初始化好了，如果要調(diào)用 methods 中的方法瞳步，或者操作 data 中的數(shù)據(jù)腰奋，最早可以在這個階段中操作

beforeMount：執(zhí)行到這個鉤子的時候氛堕，在內(nèi)存中已經(jīng)編譯好了模板了，但是還沒有掛載到頁面中括儒，此時锐想，頁面還是舊的

mounted：執(zhí)行到這個鉤子的時候赠摇，就表示Vue實例已經(jīng)初始化完成了。此時組件脫離了創(chuàng)建階段烫罩，進(jìn)入到了運行階段贝攒。 如果我們想要通過插件操作頁面上的DOM節(jié)點时甚，最早可以在和這個階段中進(jìn)行

beforeUpdate： 當(dāng)執(zhí)行這個鉤子時，頁面中的顯示的數(shù)據(jù)還是舊的梨熙，data中的數(shù)據(jù)是更新后的咽扇， 頁面還沒有和最新的數(shù)據(jù)保持同步

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

beforeDestory：Vue實例從運行階段進(jìn)入到了銷毀階段，這個時候上所有的 data 和 methods 弥奸， 指令奋早， 過濾器 ……都是處于可用狀態(tài)耽装。還沒有真正被銷毀

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

4.created和mounted的區(qū)別

答：created:在模板渲染成html前調(diào)用涣狗，即通常初始化某些屬性值，然后再渲染成視圖穗熬。

mounted:在模板渲染成html后調(diào)用死陆，通常是初始化頁面完成后唧瘾，再對html的dom節(jié)點進(jìn)行一些需要的操作饰序。

5.vue獲取數(shù)據(jù)在哪個周期函數(shù)

答：一般 created/beforeMount/mounted 皆可.

比如如果你要操作 DOM , 那肯定 mounted 時候才能操作.

6.請詳細(xì)說下你對vue生命周期的理解求豫？

答：總共分為8個階段創(chuàng)建前/后，載入前/后最疆，更新前/后蚤告，銷毀前/后杜恰。

創(chuàng)建前/后： 在beforeCreated階段，vue實例的掛載元素$el和**數(shù)據(jù)對象**data都為undefined舔涎，還未初始化亡嫌。在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)依然存在漩仙。

vue路由面試題

1.mvvm 框架是什么队他？

答：vue是實現(xiàn)了雙向數(shù)據(jù)綁定的mvvm框架，當(dāng)視圖改變更新模型層锡凝，當(dāng)模型層改變更新視圖層窜锯。在vue中芭析，使用了雙向綁定技術(shù)馁启，就是View的變化能實時讓Model發(fā)生變化，而Model的變化也能實時更新到View翠勉。

2.vue-router 是什么?它有哪些組件

答：vue用來寫路由一個插件眉菱。router-link俭缓、router-view

3.active-class 是哪個組件的屬性酥郭？

答：vue-router模塊的router-link組件不从。children數(shù)組來定義子路由

4.怎么定義 vue-router 的動態(tài)路由? 怎么獲取傳過來的值椿息？

答：在router目錄下的index.js文件中，對path屬性加上/:id条舔。 使用router對象的params.id孟抗。

5.vue-router 有哪幾種導(dǎo)航鉤子?

答：三種钻心，

第一種：是全局導(dǎo)航鉤子：router.beforeEach(to,from,next)捷沸，作用：跳轉(zhuǎn)前進(jìn)行判斷攔截痒给。

第二種：組件內(nèi)的鉤子

第三種：單獨路由獨享組件

6.$route 和 $router 的區(qū)別

答：$router是VueRouter的實例侈玄，在script標(biāo)簽中想要導(dǎo)航到不同的URL,使用$router.push方法。返回上一個歷史history用$router.to(-1)

$route為當(dāng)前router跳轉(zhuǎn)對象突颊。里面可以獲取當(dāng)前路由的name,path,query,parmas等律秃。

7.vue-router的兩種模式

答:hash模式：即地址欄 URL 中的 # 符號棒动；

history模式：window.history對象打印出來可以看到里邊提供的方法和記錄長度。利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法柜裸。（需要特定瀏覽器支持）疙挺。

8.vue-router實現(xiàn)路由懶加載（ 動態(tài)加載路由 ）

答:三種方式

第一種：vue異步組件技術(shù) ==== 異步加載怜浅，vue-router配置路由 , 使用vue的異步組件技術(shù) , 可以實現(xiàn)按需加載 .但是,這種情況下一個組件生成一個js文件恶座。

第二種：路由懶加載(使用import)跨琳。

第三種：webpack提供的require.ensure()湾宙，vue-router配置路由，使用webpack的require.ensure技術(shù)埠啃，也可以實現(xiàn)按需加載碴开。這種情況下潦牛，多個路由指定相同的chunkName挡育，會合并打包成一個js文件即寒。

9.請詳細(xì)說下你對vue生命周期的理解？

總共分為8個階段創(chuàng)建前/后逸爵，載入前/后师倔，更新前/后趋艘，銷毀前/后

創(chuàng)建前/后： 在beforeCreated階段致稀，vue實例的掛載元素$el和數(shù)據(jù)對象data都為undefined，還未初始化。在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的綁定理逊。

10.請說下封裝 vue 組件的過程晋被？

首先羡洛，組件可以提升整個項目的開發(fā)效率欲侮。能夠把頁面抽象成多個相對獨立的模塊威蕉，解決了我們傳統(tǒng)項目開發(fā)：效率低忘伞、難維護(hù)沙兰、復(fù)用性等問題鼎天。

然后斋射，使用Vue.extend方法創(chuàng)建一個組件，然后使用Vue.component方法注冊組件腹躁。子組件需要數(shù)據(jù)纺非，可以在props中接受定義赘方。而子組件修改好數(shù)據(jù)后窄陡，想把數(shù)據(jù)傳遞給父組件跳夭”姨荆可以采用emit方法套硼。

vuex常見面試題

你是怎么認(rèn)識vuex的邪意？

vuex可以理解為一種開發(fā)模式或框架反砌。比如PHP有thinkphp雾鬼，java有spring等。

通過狀態(tài)（數(shù)據(jù)源）集中管理驅(qū)動組件的變化（好比spring的IOC容器對bean進(jìn)行集中管理）宴树。

應(yīng)用級的狀態(tài)集中放在store中策菜； 改變狀態(tài)的方式是提交mutations，這是個同步的事物酒贬； 異步邏輯應(yīng)該封裝在action中又憨。

vue-loader是什么？使用它的用途有哪些锭吨？

解析.vue文件的一個加載器，跟template/js/style轉(zhuǎn)換成js模塊零如。

用途：js可以寫es6躏将、style樣式可以scss或less锄弱、template可以加jade等

請說出vue.cli項目中src目錄每個文件夾和文件的用法？

assets文件夾是放靜態(tài)資源祸憋；components是放組件会宪；router是定義路由相關(guān)的配置;view視圖；app.vue是一個應(yīng)用主組件蚯窥；main.js是入口文件

vue.cli中怎樣使用自定義的組件掸鹅？有遇到過哪些問題嗎？

第一步：在components目錄新建你的組件文件（smithButton.vue）沟沙，script一定要export default {

第二步：在需要用的頁面（組件）中導(dǎo)入：import smithButton from ‘../components/smithButton.vue’

第三步：注入到vue的子組件的components屬性上面,components:{smithButton}

第四步：在template視圖view中使用河劝，<smith-button>? </smith-button>

問題有：smithButton命名，使用的時候則smith-button矛紫。

聊聊你對Vue.js的template編譯的理解赎瞎？

簡而言之，就是先轉(zhuǎn)化成AST樹颊咬，再得到的render函數(shù)返回VNode（Vue的虛擬DOM節(jié)點）

詳情步驟：

首先务甥，通過compile編譯器把template編譯成AST語法樹（abstract syntax tree 即 源代碼的抽象語法結(jié)構(gòu)的樹狀表現(xiàn)形式），compile是createCompiler的返回值喳篇，createCompiler是用以創(chuàng)建編譯器的敞临。另外compile還負(fù)責(zé)合并option。

然后麸澜，AST會經(jīng)過generate（將AST語法樹轉(zhuǎn)化成render funtion字符串的過程）得到render函數(shù)挺尿，render的返回值是VNode，VNode是Vue的虛擬DOM節(jié)點炊邦，里面有（標(biāo)簽名编矾、子節(jié)點、文本等等）

vue的歷史記錄

history 記錄中向前或者后退多少步

vuejs與angularjs以及react的區(qū)別馁害？

1.與AngularJS的區(qū)別

相同點：

都支持指令：內(nèi)置指令和自定義指令窄俏。

都支持過濾器：內(nèi)置過濾器和自定義過濾器。

都支持雙向數(shù)據(jù)綁定碘菜。

都不支持低端瀏覽器凹蜈。

不同點：

1.AngularJS的學(xué)習(xí)成本高，比如增加了Dependency Injection特性忍啸，而Vue.js本身提供的API都比較簡單仰坦、直觀。

2.在性能上吊骤，AngularJS依賴對數(shù)據(jù)做臟檢查缎岗，所以Watcher越多越慢。

Vue.js使用基于依賴追蹤的觀察并且使用異步隊列更新白粉。所有的數(shù)據(jù)都是獨立觸發(fā)的传泊。

對于龐大的應(yīng)用來說鼠渺，這個優(yōu)化差異還是比較明顯的。

2.與React的區(qū)別

相同點：

React采用特殊的JSX語法眷细，Vue.js在組件開發(fā)中也推崇編寫.vue特殊文件格式拦盹，對文件內(nèi)容都有一些約定，兩者都需要編譯后使用溪椎。

中心思想相同：一切都是組件普舆，組件實例之間可以嵌套。

都提供合理的鉤子函數(shù)校读，可以讓開發(fā)者定制化地去處理需求沼侣。

都不內(nèi)置列數(shù)AJAX，Route等功能到核心包歉秫，而是以插件的方式加載蛾洛。

在組件開發(fā)中都支持mixins的特性。

不同點：

React依賴Virtual DOM,而Vue.js使用的是DOM模板雁芙。React采用的Virtual DOM會對渲染出來的結(jié)果做臟檢查轧膘。

Vue.js在模板中提供了指令，過濾器等兔甘，可以非常方便谎碍，快捷地操作DOM。

1.vuex是什么洞焙？怎么使用蟆淀？哪種功能場景使用它？

答：vue框架中狀態(tài)管理澡匪。在main.js引入store扳碍，注入。

新建了一個目錄store.js仙蛉，….. export 。

場景有：單頁應(yīng)用中碱蒙，組件之間的狀態(tài)荠瘪。音樂播放、登錄狀態(tài)赛惩、加入購物車

2.vuex有哪幾種屬性哀墓？

答：有五種，分別是 State喷兼、 Getter篮绰、Mutation 、Action季惯、 Module

state => 基本數(shù)據(jù)(數(shù)據(jù)源存放地)

getters => 從基本數(shù)據(jù)派生出來的數(shù)據(jù)

mutations => 提交更改數(shù)據(jù)的方法吠各，同步臀突！

actions => 像一個裝飾器，包裹mutations贾漏，使之可以異步候学。

modules => 模塊化Vuex

3.Vue.js中ajax請求代碼應(yīng)該寫在組件的methods中還是vuex的actions中？

答：如果請求來的數(shù)據(jù)是不是要被其他組件公用纵散，僅僅在請求的組件內(nèi)使用梳码，就不需要放入vuex 的state里。

如果被其他地方復(fù)用伍掀，這個很大幾率上是需要的掰茶，如果需要，請將請求放入action里蜜笤，方便復(fù)用濒蒋。