1、什么是vue生命周期？
Vue 實例從創(chuàng)建到銷毀的過程，就是生命周期。從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載Dom→渲染、更新→渲染、銷毀等一系列過程，稱之為 Vue 的生命周期。
2、vue生命周期總共有幾個階段？/ vue生命周期具體的名字和過程？
它可以總共分為8個階段：beforeCreate創(chuàng)建前、created創(chuàng)建后, beforeMount載入前、mounted載入后，beforeUpdate更新前、updated更新后，beforeDestroy銷毀前、destroyed銷毀后。
3、vue生命周期的作用是什么？
它的生命周期中有多個事件鉤子，讓我們在控制整個Vue實例的過程時更容易形成好的邏輯。
4、第一次頁面加載會觸發(fā)哪幾個鉤子？
會觸發(fā)下面這幾個beforeCreate, created, beforeMount, mounted 。
5、DOM 渲染在哪個周期中就已經(jīng)完成？
DOM 渲染在 mounted 中就已經(jīng)完成了。
6、簡述每個周期具體適合哪些場景？
1）beforeCreate：可以在這加loading事件，在加載實例時觸發(fā)。
2）created：初始化完成時的事件寫在這里，如在這里結(jié)束loading，異步請求也適合在這里調(diào)用。
3）mounted：掛載元素，獲取到dom節(jié)點。
4）updated：如果對數(shù)據(jù)統(tǒng)一處理，在這里寫上相應(yīng)的函數(shù)。
5）beforeDestroy：可以做一個確定停止事件的確認框。
7、Vue實現(xiàn)數(shù)據(jù)雙向綁定
Vue實現(xiàn)數(shù)據(jù)雙向綁定的原理：Object.defineProperty（）
vue實現(xiàn)數(shù)據(jù)雙向綁定主要步驟：
（1)需要observe的數(shù)據(jù)對象進行遞歸遍歷，包括子屬性對象的屬性，都加上 setter和getter。
這樣的話，給這個對象的某個值賦值，就會觸發(fā)setter，那么就能監(jiān)聽到了數(shù)據(jù)變化。
（2)compile解析模板指令，將模板中的變量替換成數(shù)據(jù)，然后初始化渲染頁面視圖，并將每個指令對應(yīng)的節(jié)點綁定更新函數(shù)，添加監(jiān)聽數(shù)據(jù)的訂閱者，一旦數(shù)據(jù)有變動，收到通知，更新視圖。
（3)Watcher訂閱者是Observer和Compile之間通信的橋梁，主要做的事情是:
①在自身實例化時往屬性訂閱器(dep)里面添加自己
②自身必須有一個update()方法
③待屬性變動dep.notice()通知時，能調(diào)用自身的update()方法，并觸發(fā)Compile中綁定的回調(diào)，則功成身退。
（4)MVVM作為數(shù)據(jù)綁定的入口，整合Observer、Compile和Watcher三者，通過Observer來監(jiān)聽自己的model數(shù)據(jù)變化，通過Compile來解析編譯模板指令，最終利用Watcher搭起Observer和Compile之間的通信橋梁，達到數(shù)據(jù)變化 -> 視圖更新；視圖交互變化(input) -> 數(shù)據(jù)model變更的雙向綁定效果。
8、js實現(xiàn)簡單的雙向綁定
<body>
<div id="app">
<input type="text" id="txt">
<p id="show"></p>
</div>
</body>
<script type="text/javascript">
var obj = {}
Object.defineProperty(obj, 'txt', {
get: function () {
return obj
},
set: function (newValue) {
document.getElementById('txt').value = newValue
document.getElementById('show').innerHTML = newValue
}
})
document.addEventListener('keyup', function (e) {
obj.txt = e.target.value
})
</script>
9、MVVM模式和MVC模式
MVVM模式是Model-View-ViewModel的縮寫。MVVM是一種設(shè)計思想。Model層代碼數(shù)據(jù)模型，也是可以在Model中定義數(shù)據(jù)修改和操作的業(yè)務(wù)邏輯；View層代表UI組件，它負責將數(shù)據(jù)模型轉(zhuǎn)化為UI展示出來，ViewModel是一個同步View和Model的對象。
在MVVM架構(gòu)中，View和Model之間沒有直接聯(lián)系，通過ViewModel進行交互，Model和ViewModel之間的交互是雙向的，因此View數(shù)據(jù)變化會同步到Model中，而Model的數(shù)據(jù)變化也會立即反應(yīng)到View上。
ViewModel通過雙向數(shù)據(jù)綁定把View層和Model層連接起來，而View和Model之間的同步工作完全是自動的，無需人為干涉，因開發(fā)者只需要關(guān)注業(yè)務(wù)邏輯，不需要手動操作DOM，不需要關(guān)注數(shù)據(jù)狀態(tài)的同步問題，復(fù)雜的數(shù)據(jù)狀態(tài)維護完全由MVVM來統(tǒng)一管理。
主要是MVC中的Controller演變成為MVVM中的ViewModel。MVVM主要解決了MVC中大量的DOM操作使頁面渲染性能下降，加載速度變慢，影響用戶體驗。和當Model頻繁變化的時候，開發(fā)者需要主動更新到View。
10、雙向綁定的原理
采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter/getter，在數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)相應(yīng)的監(jiān)聽回調(diào)。
具體步驟如下：
A.需要observe的數(shù)據(jù)對象進行遞歸遍歷
B.compile解析模板指令
C.Watcher訂閱者是Observer和Compile之間通信橋梁
D.MVVM作為數(shù)據(jù)綁定的入口，整合Observer、Compile和Watcher三者
11、angular雙向綁定和vue雙向綁定的區(qū)別
angular是通過臟檢查實現(xiàn)，angular會將UI事件，請求事件，settimeout這類延遲的對象放入到事件監(jiān)聽的臟隊列中，當數(shù)據(jù)變化的時候，觸發(fā)$diget方法進行數(shù)據(jù)的更新，視圖的渲染。
vue通過數(shù)據(jù)屬性的數(shù)據(jù)劫持和發(fā)布訂閱模式實現(xiàn)，大致可以理解為三個模塊組成，observer完成對數(shù)據(jù)的劫持，compile完成對模板片段的渲染，watcher作為橋梁鏈接二者，訂閱數(shù)據(jù)變化及更新視圖。
12、vue框架與jQuery類庫的區(qū)別
Vue直接操作視圖層，它通過Vue對象將數(shù)據(jù)和View完全分離開來了。對數(shù)據(jù)進行操作不需要引用相應(yīng)的DOM節(jié)點，只需要關(guān)注邏輯，完全實現(xiàn)了視圖層和邏輯層的解耦；
Jquery的操作是基于DOM節(jié)點的操作，jQuery是使用選擇器（$）選取DOM對象，對其進行賦值、取值、事件綁定等操作，其實和原生的js的區(qū)別只在于可以更方便的選取和操作DOM對象，而數(shù)據(jù)和界面是在一起的。它的優(yōu)勢在于良好的封裝和兼容，使調(diào)用簡單方便。
13、vue的生命周期
Vue 實例從創(chuàng)建到銷毀的過程，就是生命周期。從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載Dom→渲染、更新→渲染、銷毀等一系列過程，稱之為 Vue 的生命周期。
vue的生命周期中有多個事件鉤子，讓我們在控制整個Vue實例的過程時更容易形成好的邏輯。它可以總共分為8個階段：創(chuàng)建前/后, 載入前/后,更新前/后,銷毀前/銷毀后。
第一次頁面加載會觸發(fā) beforeCreate, created, beforeMount, mounted 這幾個鉤子函數(shù)；DOM 渲染在 mounted 中就已經(jīng)完成了。官方實例的異步請求是在mounted生命周期中調(diào)用的，而實際上也可以在created生命周期中調(diào)用。
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(掛載后)：掛載到實例之后被調(diào)用，實例完成以下配置：用上面編譯好的html內(nèi)容替換el屬性指向的DOM對象。完成模板中的html渲染到html頁面中。此過程中進行ajax交互。
beforeUpdate(更新前)：在數(shù)據(jù)更新之前調(diào)用，發(fā)生在虛擬DOM重新渲染和打補丁之前。可以在該鉤子中進一步地更改狀態(tài)，不會觸發(fā)附加的重渲染過程。
updated(更新后)：在由于數(shù)據(jù)更改導(dǎo)致的虛擬DOM重新渲染和打補丁之后調(diào)用。調(diào)用時，組件DOM已經(jīng)更新，所以可以執(zhí)行依賴于DOM的操作。然而在大多數(shù)情況下，應(yīng)該避免在此期間更改狀態(tài)，因為這可能會導(dǎo)致更新無限循環(huán)。該鉤子在服務(wù)器端渲染期間不被調(diào)用。
beforeDestroy(銷毀前)： 在實例銷毀之前調(diào)用。實例仍然完全可用。
destroyed(銷毀后)： 在實例銷毀之后調(diào)用。調(diào)用后，所有的事件監(jiān)聽器會被移除，所有的子實例也會被銷毀。該鉤子在服務(wù)器端渲染期間不被調(diào)用。
activited：keep-alive專屬，組件被激活時調(diào)用
deactivated：keep-alive專屬，組件被激活時調(diào)用
14、Vue實現(xiàn)數(shù)據(jù)雙向綁定的原理：Object.defineProperty（）
vue實現(xiàn)數(shù)據(jù)雙向綁定主要是：采用數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter，getter，在數(shù)據(jù)變動時發(fā)布消息給訂閱者，觸發(fā)相應(yīng)監(jiān)聽回調(diào)。
15、vue-cli是什么？
Vue.js提供一個官方命令行工具，可用于快速搭建大型單頁應(yīng)用（在一個完成的應(yīng)用或者站點中，只有一個完整的HTML頁面，這個頁面有一個容器，可以把需要加載的代碼（以組件的方式）插入到該容器中）。
該工具提供開箱即用的構(gòu)建工具配置，帶來現(xiàn)代化的前端開發(fā)流程。只需幾分鐘即可創(chuàng)建并啟動一個帶熱重載、保存時靜態(tài)檢查以及可用于生產(chǎn)環(huán)境的構(gòu)建配置的項目。
assets文件夾是放靜態(tài)資源；components是放組件；router是定義路由相關(guān)的配置;view視圖；app.vue是一個應(yīng)用主組件；main.js是入口文件等等
16、Vue組件如何通信
-
props/$emit+v-on: 通過props將數(shù)據(jù)自上而下傳遞，而通過$emit和v-on來向上傳遞信息。 - 中央事件總線
EventBus: 通過EventBus進行信息的發(fā)布與訂閱，實現(xiàn)非父子組件之間的通信 - vuex: 是全局數(shù)據(jù)管理庫，可以通過vuex管理全局的數(shù)據(jù)流
-
v-model方式：直接綁定父組件變量，把數(shù)據(jù)從子組件傳回父組件
17、vuex是什么？
Vuex 類似 Redux 的狀態(tài)管理器，用來管理Vue的所有組件狀態(tài)。
18、vue組件中的data為什么是一個函數(shù)？
組件是可復(fù)用的vue實例，一個組件被創(chuàng)建好之后，就可能被用在各個地方，而組件不管被復(fù)用了多少次，組件中的data數(shù)據(jù)都應(yīng)該是相互隔離，互不影響的，基于這一理念，組件每復(fù)用一次，data數(shù)據(jù)就應(yīng)該被復(fù)制一次，之后，當某一處復(fù)用的地方組件內(nèi)data數(shù)據(jù)被改變時，其他復(fù)用地方組件的data數(shù)據(jù)不受影響。
類似于給每個組件實例創(chuàng)建一個私有的數(shù)據(jù)空間，讓各個組件實例維護各自的數(shù)據(jù)。而單純的寫成對象形式，就使得所有組件實例共用了一份data，就會造成一個變了全都會變的結(jié)果。
19、computed和watch有什么區(qū)別?
- computed
1、computed是計算屬性,也就是計算值
2、computed具有緩存性,computed的值在getter執(zhí)行后是會緩存的，只有在它依賴的屬性值改變之后，下一次獲取computed的值時才會重新調(diào)用對應(yīng)的getter來計算
3、computed適用于計算比較消耗性能的計算場景
data: {
message: 'Hello'
},
computed: {
// 計算屬性的 getter
reversedMessage: function () {
// `this` 指向 vm 實例
return this.message.split('').reverse().join('')
}
}
- watch
1、Vue 提供了一種更通用的方式來觀察和響應(yīng) Vue 實例上的數(shù)據(jù)變動：偵聽屬性。
2、無緩存性，頁面重新渲染時值不變化也會執(zhí)行
watch: {
// 如果 `question` 發(fā)生改變，這個函數(shù)就會運行
question: function (newQuestion, oldQuestion) {
this.answer = 'Waiting for you to stop typing...'
this.debouncedGetAnswer()
}
}
