1. Vue.js介紹? ??

Vue.js是一個輕巧轻要、高性能舌缤、可組件化的MVVM庫慨飘，同時擁有非常容易上手的API；

Vue.js是一個構(gòu)建數(shù)據(jù)驅(qū)動的Web界面的庫鄙信。

Vue.js是一套構(gòu)建用戶界面的 漸進式框架瞪醋。與其他重量級框架不同的是，Vue 采用自底向上增量開發(fā)的設(shè)計装诡。Vue的核心庫只關(guān)注視圖層银受，并且非常容易學習，非常容易與其它庫或已有項目整合鸦采。另一方面宾巍，Vue 完全有能力驅(qū)動采用單文件組件和 Vue生態(tài)系統(tǒng)支持的庫開發(fā)的復雜單頁應用。數(shù)據(jù)驅(qū)動+組件化的前端開發(fā)渔伯。

簡而言之：Vue.js是一個構(gòu)建數(shù)據(jù)驅(qū)動的 web 界面的漸進式框架顶霞。Vue.js 的目標是通過盡可能簡單的 API實現(xiàn)響應的數(shù)據(jù)綁定和組合的視圖組件。核心是一個響應的數(shù)據(jù)綁定系統(tǒng)锣吼。

2选浑、使用Vue的好處

vue兩大特點：響應式編程、組件化

vue的優(yōu)勢：輕量級框架吐限、簡單易學鲜侥、雙向數(shù)據(jù)綁定、組件化诸典、視圖描函、數(shù)據(jù)和結(jié)構(gòu)的分離崎苗、虛擬DOM、運行速度快

3舀寓、MVVM定義

MVVM是Model-View-ViewModel的簡寫胆数。即模型-視圖-視圖模型』ツ梗【模型】指的是后端傳遞的數(shù)據(jù)必尼。【視圖】指的是所看到的頁面篡撵∨欣颍【視圖模型】mvvm模式的核心，它是連接view和model的橋梁育谬。它有兩個方向：一是將【模型】轉(zhuǎn)化成【視圖】券盅，即將后端傳遞的數(shù)據(jù)轉(zhuǎn)化成所看到的頁面。實現(xiàn)的方式是：數(shù)據(jù)綁定膛檀。二是將【視圖】轉(zhuǎn)化成【模型】锰镀，即將所看到的頁面轉(zhuǎn)化成后端的數(shù)據(jù)。實現(xiàn)的方式是：DOM 事件監(jiān)聽咖刃。這兩個方向都實現(xiàn)的泳炉，我們稱之為數(shù)據(jù)的雙向綁定『垦睿總結(jié)：在MVVM的框架下視圖和模型是不能直接通信的花鹅。它們通過ViewModel來通信，ViewModel通常要實現(xiàn)一個observer觀察者磕潮，當數(shù)據(jù)發(fā)生變化翠胰，ViewModel能夠監(jiān)聽到數(shù)據(jù)的這種變化，然后通知到對應的視圖做自動更新自脯，而當用戶操作視圖，ViewModel也能監(jiān)聽到視圖的變化斤富，然后通知數(shù)據(jù)做改動膏潮，這實際上就實現(xiàn)了數(shù)據(jù)的雙向綁定。并且MVVM中的View 和 ViewModel可以互相通信

4满力、Vue的生命周期

beforeCreate（創(chuàng)建前） 在數(shù)據(jù)觀測和初始化事件還未開始

created（創(chuàng)建后） 完成數(shù)據(jù)觀測焕参，屬性和方法的運算，初始化事件油额，$el屬性還沒有顯示出來

beforeMount（載入前） 在掛載開始之前被調(diào)用叠纷，相關(guān)的render函數(shù)首次被調(diào)用。實例已完成以下的配置：編譯模板潦嘶，把data里面的數(shù)據(jù)和模板生成html涩嚣。注意此時還沒有掛載html到頁面上。

mounted（載入后） 在el 被新創(chuàng)建的 vm.$el 替換，并掛載到實例上去之后調(diào)用航厚。實例已完成以下的配置：用上面編譯好的html內(nèi)容替換el屬性指向的DOM對象顷歌。完成模板中的html渲染到html頁面中。此過程中進行ajax交互幔睬。

beforeUpdate（更新前） 在數(shù)據(jù)更新之前調(diào)用眯漩，發(fā)生在虛擬DOM重新渲染和打補丁之前÷槎ィ可以在該鉤子中進一步地更改狀態(tài)赦抖，不會觸發(fā)附加的重渲染過程。

updated（更新后） 在由于數(shù)據(jù)更改導致的虛擬DOM重新渲染和打補丁之后調(diào)用辅肾。調(diào)用時队萤，組件DOM已經(jīng)更新，所以可以執(zhí)行依賴于DOM的操作宛瞄。然而在大多數(shù)情況下浮禾，應該避免在此期間更改狀態(tài)，因為這可能會導致更新無限循環(huán)份汗。該鉤子在服務(wù)器端渲染期間不被調(diào)用盈电。

beforeDestroy（銷毀前） 在實例銷毀之前調(diào)用。實例仍然完全可用杯活。

destroyed（銷毀后） 在實例銷毀之后調(diào)用匆帚。調(diào)用后，所有的事件監(jiān)聽器會被移除旁钧，所有的子實例也會被銷毀吸重。該鉤子在服務(wù)器端渲染期間不被調(diào)用。

5歪今、Vue的響應式原理

當一個Vue實例創(chuàng)建時嚎幸，vue會遍歷data選項的屬性，用 Object.defineProperty 將它們轉(zhuǎn)為 getter/setter并且在內(nèi)部追蹤相關(guān)依賴寄猩，在屬性被訪問和修改時通知變化嫉晶。 每個組件實例都有相應的 watcher 程序?qū)嵗鼤诮M件渲染的過程中把屬性記錄為依賴田篇，之后當依賴項的 setter 被調(diào)用時替废，會通知 watcher 重新計算，從而致使它關(guān)聯(lián)的組件得以更新泊柬。

6椎镣、第一次頁面加載會觸發(fā)哪幾個鉤子？

觸發(fā) 下面這幾個beforeCreate, created, beforeMount, mounted 兽赁，并在mounted的時候DOM渲染完成

7状答、vue中data必須是一個函數(shù)

對象為引用類型冷守，當重用組件時，由于數(shù)據(jù)對象都指向同一個data對象剪况，當在一個組件中修改data時教沾，其他重用的組件中的data會同時被修改；而使用返回對象的函數(shù)译断，由于每次返回的都是一個新對象（Object的實例）授翻，引用地址不同，則不會出現(xiàn)這個問題孙咪。

8堪唐、vue中做數(shù)據(jù)渲染的時候如何保證將數(shù)據(jù)原樣輸出？

v-text：將數(shù)據(jù)輸出到元素內(nèi)部翎蹈，如果輸出的數(shù)據(jù)有HTML代碼淮菠，會作為普通文本輸出

v-html：將數(shù)據(jù)輸出到元素內(nèi)部，如果輸出的數(shù)據(jù)有HTML代碼荤堪，會被渲染

?{{}}：插值表達式合陵，可以直接獲取Vue實例中定義的數(shù)據(jù)或函數(shù)，使用插值表達式的時候澄阳，值可能閃爍最楷；而使用v-html窑多、v-text不會閃爍氓辣，有值就顯示薛夜，沒值就隱藏

9、active-class是哪個組件的屬性肮塞？

vue-router模塊的router-link組件襟齿。

10、vue-router有哪幾種導航鉤子枕赵？

三種猜欺。

一種是全局導航鉤子：router.beforeEach(to,from,next)，作用：跳轉(zhuǎn)前進行判斷攔截拷窜。

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

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

11、$route和$router的區(qū)別

$route是“路由信息對象”装黑，包括path，params弓熏，hash恋谭，query，fullPath挽鞠，matched疚颊，name等路由信息參數(shù)狈孔。而$router是“路由實例”對象包括了路由的跳轉(zhuǎn)方法，鉤子函數(shù)等

12材义、vue幾種常用的指令

v-for 均抽、 v-if 、v-bind其掂、v-on油挥、v-show、v-else

13款熬、v-if 和 v-show 區(qū)別

v-if按照條件是否渲染深寥，v-show是display的block或none

14、vue常用的修飾符贤牛？

.prevent: 提交事件不再重載頁面惋鹅；.stop: 阻止單擊事件冒泡；.self: 當事件發(fā)生在該元素本身而不是子元素的時候會觸發(fā)殉簸；.capture: 事件偵聽闰集，事件發(fā)生的時候會調(diào)用

15、vue-loader是什么般卑？使用它的用途有哪些武鲁？

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

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

16蝇率、computed迟杂、watch、methods的區(qū)別

computed計算屬性是用來聲明式的描述一個值依賴了其它的值本慕。當你在模板里把數(shù)據(jù)綁定到一個計算屬性上時排拷，Vue 會在其依賴的任何值導致該計算屬性改變時更新 DOM。這個功能非常強大锅尘，它可以讓你的代碼更加聲明式监氢、數(shù)據(jù)驅(qū)動并且易于維護。

watch監(jiān)聽的是你定義的變量,當你定義的變量的值發(fā)生變化時藤违，調(diào)用對應的方法浪腐。就好在div寫一個表達式name，data里寫入num和lastname,firstname,在watch里當num的值發(fā)生變化時顿乒，就會調(diào)用num的方法议街，方法里面的形參對應的是num的新值和舊值，而計算屬性computed,計算的是Name依賴的值,它不能計算在data中已經(jīng)定義過的變量璧榄。

methods方法特漩，函數(shù)吧雹，綁定事件調(diào)用；不會使用緩存

17涂身、什么是js的冒泡雄卷？Vue中如何阻止冒泡事件？

js冒泡概念：當父元素內(nèi)多級子元素綁定了同一個事件蛤售，js會依次從內(nèi)往外或者從外往內(nèi)（丁鹉？）執(zhí)行每個元素的該事件，從而引發(fā)冒泡

?js解決冒泡：event.stopPropagation()

vue解決冒泡： 事件.stop,例如：@click.stop="" ,@mouseover.stop=""

18悍抑、vue 組件通信

1.父組件與子組件傳值

父組件傳給子組件：子組件通過props方法接受數(shù)據(jù);

子組件傳給父組件：$emit方法傳遞參數(shù)

2.非父子組件間的數(shù)據(jù)傳遞鳄炉，兄弟組件傳值

eventBus，就是創(chuàng)建一個事件中心搜骡，相當于中轉(zhuǎn)站拂盯，可以用它來傳遞事件和接收事件。也可使用vuex

19记靡、<keep-alive></keep-alive>的作用是什么谈竿？

<keep-alive></keep-alive>包裹動態(tài)組件時，會緩存不活動的組件實例,主要用于保留組件狀態(tài)或避免重新渲染摸吠。 大白話: 比如有一個列表和一個詳情空凸，那么用戶就會經(jīng)常執(zhí)行打開詳情=>返回列表=>打開詳情…這樣的話列表和詳情都是一個頻率很高的頁面，那么就可以對列表組件使用<keep-alive></keep-alive>進行緩存寸痢，這樣用戶每次返回列表的時候呀洲，都能從緩存中快速渲染，而不是重新渲染

20啼止、$nextTick是什么道逗？

vue實現(xiàn)響應式并不是數(shù)據(jù)發(fā)生變化后dom立即變化，而是按照一定的策略來進行dom更新献烦。

$nextTick?是在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)滓窍，在修改數(shù)據(jù)之后使用 $nextTick，則可以在回調(diào)中獲取更新后的 DOM

21巩那、Vue子組件調(diào)用父組件的方法

第一種方法是直接在子組件中通過this.$parent.event來調(diào)用父組件的方法

第二種方法是在子組件里用$emit向父組件觸發(fā)一個事件吏夯，父組件監(jiān)聽這個事件就行了。

22即横、Promise對象是什么噪生？

1.Promise是異步編程的一種解決方案，它是一個容器东囚，里面保存著某個未來才會結(jié)束的事件（通常是一個異步操作）的結(jié)果杠园。從語法上說，Promise 是一個對象，從它可以獲取異步操作的消息抛蚁。Promise 提供統(tǒng)一的 API，各種異步操作都可以用同樣的方法進行處理惕橙。promise對象是一個構(gòu)造函數(shù)瞧甩，用來生成Promise實例；

2.promise的兩個特點 對象狀態(tài)不受外界影響 && 一旦狀態(tài)改變弥鹦，就不會再變肚逸，任何時候都可以得到結(jié)果（pending狀態(tài)-->fulfilled || pending-->rejected）

23、axios的特點有哪些彬坏？

1朦促、axios是一個基于promise的HTTP庫，支持promise的所有API栓始；

2务冕、它可以攔截請求和響應；

3幻赚、它可以轉(zhuǎn)換請求數(shù)據(jù)和響應數(shù)據(jù)禀忆，并對響應回來的內(nèi)容自動轉(zhuǎn)換為json類型的數(shù)據(jù)；

4落恼、它安全性更高箩退，客戶端支持防御XSRF；

24佳谦、vue中的 ref 是什么戴涝？

ref 被用來給元素或子組件注冊引用信息。引用信息將會注冊在父組件的 $refs 對象上钻蔑。如果在普通的 DOM 元素上使用啥刻，引用指向的就是 DOM 元素；如果用在子組件上矢棚，引用就指向組件實例郑什。

25、vue如何兼容ie

babel-polyfill插件

26蒲肋、頁面刷新vuex被清空解決辦法蘑拯？

1.localStorage 存儲到本地再回去

2.重新獲取接口獲取數(shù)據(jù)

27、Vue與Angular以及React的區(qū)別兜粘？

1.與AngularJS的區(qū)別

相同點：

都支持指令：內(nèi)置指令和自定義指令申窘；都支持過濾器：內(nèi)置過濾器和自定義過濾器；都支持雙向數(shù)據(jù)綁定孔轴；都不支持低端瀏覽器剃法。

不同點：

AngularJS的學習成本高，比如增加了Dependency Injection特性路鹰，而Vue.js本身提供的API都比較簡單贷洲、直觀收厨；在性能上，AngularJS依賴對數(shù)據(jù)做臟檢查优构，所以Watcher越多越慢诵叁；Vue.js使用基于依賴追蹤的觀察并且使用異步隊列更新，所有的數(shù)據(jù)都是獨立觸發(fā)的钦椭。

2.與React的區(qū)別

相同點：

React采用特殊的JSX語法拧额，Vue.js在組件開發(fā)中也推崇編寫.vue特殊文件格式，對文件內(nèi)容都有一些約定彪腔，兩者都需要編譯后使用侥锦；中心思想相同：一切都是組件，組件實例之間可以嵌套德挣；都提供合理的鉤子函數(shù)恭垦，可以讓開發(fā)者定制化地去處理需求；都不內(nèi)置列數(shù)AJAX盲厌，Route等功能到核心包署照，而是以插件的方式加載；在組件開發(fā)中都支持mixins的特性吗浩。

不同點：

React采用的Virtual DOM會對渲染出來的結(jié)果做臟檢查建芙；Vue.js在模板中提供了指令，過濾器等懂扼，可以非常方便禁荸，快捷地操作Virtual DOM。

28阀湿、localstorage和sessionstorage是什么?區(qū)別是什么?

localstorage和sessionstorage一樣都是用來存儲客戶端臨時信息的對象赶熟，他們均只能存儲字符串類型對象

localstorage生命周期是永久的，這意味著除非用戶在瀏覽器提供的UI上清除localstorage信息陷嘴，否則這些信息將永遠存在映砖。

sessionstorage生命周期為當前窗口或標簽，一旦窗口或標簽被永久關(guān)閉了灾挨，那么所有通過sessionstorage存儲的數(shù)據(jù)也將被清空邑退。

不同瀏覽器無法共享localstorage或sessionstorage中的信息。相同瀏覽器的不同頁面可以共享相同的localstorage（頁面屬于相同的域名和端口）劳澄，但是不同頁面或標簽間無法共享sessionstorage地技。這里需要注意的是，頁面及標簽僅指頂級窗口秒拔，如果一個標簽頁包含多個iframe標簽他們屬于同源頁面莫矗，那么他們之間是可以共享sessionstorage的。

29、為什么要進行前后端分離作谚？前后端分離的優(yōu)勢在哪里三娩？劣勢在哪里？

優(yōu)點：前端專門負責前端頁面和特效的編寫食磕，后端專門負責后端業(yè)務(wù)邏輯的處理尽棕，前端追求的是頁面美觀、頁面流暢彬伦、頁面兼容等。后端追求的是三高（高并發(fā)伊诵、高可用单绑、高性能）讓他們各自負責各自的領(lǐng)域，讓專業(yè)的人負責處理專業(yè)的事情曹宴，提高開發(fā)效率

缺點：1 搂橙、當接口發(fā)生改變的時候，前后端都需要改變

? ? ? ? ? ?2笛坦、 當發(fā)生異常的時候区转，前后端需要聯(lián)調(diào)--聯(lián)調(diào)是非常浪費時間的