目錄
4.解釋slot作用，，，
7.vue history與hash區別以及如何判斷history與hash是否造成頁面改變
8.vue中computed與data中的值在雙向數據綁定處理中有什麼不同點
1.解釋vue虛擬dom原理
（js操作dom速度很慢，操作js對象速度很快，把節點映射爲一個js對象，此時js對象爲虛擬dom,真正的dom位於哪個節點上，虛擬dom爲映射的一個js對象，然後統一的操作dom。 ）
每一個vnode都映射到一個真實的dom節點上。其中幾個比較重要的屬性:
tag屬性即這個vnode的標籤屬性data屬性包含了最後渲染成真實dom節點後，節點上的class,attribute,style以及綁定的事件children屬性是vnode的子節點text屬性是文本屬性elm屬性爲這個vnode對應的真實dom節點key屬性是vnode的標記，在diff過程中可以提高diff的效率，後文有講解
比如，我定義了一個vnode，它的數據結構是:
{
tag: 'div'
data: {
id: 'app',
class: 'page-box'
},
children: [
{
tag: 'p',
text: 'this is demo'
}
]
}
最後渲染出的實際的dom結構就是:
<div id="app" class="page-box">
<p>this is demo</p>
</div>
2.解釋雙向數據綁定
實現過程
我們已經知道如何實現數據的雙向綁定了， 那麼首先要對數據進行劫持監聽，所以我們首先要設置一個監聽器Observer,用來監聽所有的屬性，當屬性變化時，就需要通知訂閱者Watcher,看是否需要更新．因爲屬性可能是多個，所以會有多個訂閱者，故我們需要一個消息訂閱器Dep來專門收集這些訂閱者，並在監聽器Observer和訂閱者Watcher之間進行統一的管理．以爲在節點元素上可能存在一些指令，所以我們還需要有一個指令解析器Compile，對每個節點元素進行掃描和解析，將相關指令初始化成一個訂閱者Watcher，並替換模板數據並綁定相應的函數，這時候當訂閱者Watcher接受到相應屬性的變化，就會執行相對應的更新函數，從而更新視圖．
整理上面的思路，我們需要實現三個步驟，來完成雙向綁定：
1.實現一個監聽器Observer，用來劫持並監聽所有屬性，如果有變動的，就通知訂閱者。
2.實現一個訂閱者Watcher，可以收到屬性的變化通知並執行相應的函數，從而更新視圖。
3.實現一個解析器Compile，可以掃描和解析每個節點的相關指令，並根據初始化模板數據以及初始化相應的訂閱器。
vue的數據雙向綁定 將MVVM作爲數據綁定的入口，整合Observer，Compile和Watcher三者，通過Observer來監聽自己的model的數據變化，通過Compile來解析編譯模板指令（vue中是用來解析 {{}}），最終利用watcher搭起observer和Compile之間的通信橋樑，達到數據變化 —>視圖更新；視圖交互變化（input）—>數據model變更雙向綁定效果。
3.解釋render作用
4.解釋slot作用
目的是用在內容分發
簡單例子，這兩塊內容 標題部分都是一樣的，但是內容區域完全不同，如果把這個卡片作爲組件那麼內容部分就是slot
<swiper :options="swiperOption" class="swiper-box">
<swiper-slide class="swiper-item"><img src="../assets/images/y-banner01.jpg" alt="..."></swiper-slide>
<swiper-slide class="swiper-item"><img src="../assets/images/y-banner03.jpg" alt="..."></swiper-slide>
<div class="swiper-pagination" slot="pagination"><select><option>.....</select></div>
</swiper>
vue-awesome-swiper 頁碼部分的結構由使用者傳入
vue-awesome-swiper源碼
<div class=swiper-container><slot name=parallax-bg></slot><div :class=defaultSwiperClasses.wrapperClass><slot></slot></div>**<slot name=pagination></slot>**<slot name=button-prev></slot><slot name=button-next></slot><slot name=scrollbar></slot></div>"
除了pagination, 還容許用戶傳入 button-prv button-next樣式結構...
這樣組件只負責核心功能, 其他非核心可以用戶自由定義, 增加組件的靈活性 可擴展性..
Vue 實現了一套內容分發的 API
pc主板中的插槽都知道吧
slot的作用和pc主板中的slot是一個道理
需要什麼功能，就預留什麼功能塊的slot
留個口子
5.v-if與v-show的區別
共同點：
v-if 和 v-show 都是動態顯示DOM元素。
區別：
1、編譯過程： v-if 是 真正 的 條件渲染，因爲它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷燬和重建。v-show 的元素始終會被渲染並保留在 DOM 中。v-show 只是簡單地切換元素的 CSS 屬性display。
2、編譯條件： v-if 是惰性的：如果在初始渲染時條件爲假，則什麼也不做。直到條件第一次變爲真時，纔會開始渲染條件塊。v-show不管初始條件是什麼，元素總是會被渲染，並且只是簡單地基於 CSS 進行切換。
3、性能消耗： v-if有更高的切換消耗。v-show有更高的初始渲染消耗。
4、應用場景： v-if適合運行時條件很少改變時使用。v-show適合頻繁切換。
6.VUE生命週期解釋
每一個組件或者實例都會經歷一個完整的生命週期，總共分爲三個階段：初始化、運行中、銷燬。
實例、組件通過new Vue() 創建出來之後會初始化事件和生命週期，然後就會執行beforeCreate鉤子函數，這個時候，數據還沒有掛載呢，只是一個空殼，無法訪問到數據和真實的dom，一般不做操作
掛載數據，綁定事件等等，然後執行created函數，這個時候已經可以使用到數據，也可以更改數據,在這裏更改數據不會觸發updated函數，在這裏可以在渲染前倒數第二次更改數據的機會，不會觸發其他的鉤子函數，一般可以在這裏做初始數據的獲取
接下來開始找實例或者組件對應的模板，編譯模板爲虛擬dom放入到render函數中準備渲染，然後執行beforeMount鉤子函數，在這個函數中虛擬dom已經創建完成，馬上就要渲染,在這裏也可以更改數據，不會觸發updated，在這裏可以在渲染前最後一次更改數據的機會，不會觸發其他的鉤子函數，一般可以在這裏做初始數據的獲取
接下來開始render，渲染出真實dom，然後執行mounted鉤子函數，此時，組件已經出現在頁面中，數據、真實dom都已經處理好了,事件都已經掛載好了，可以在這裏操作真實dom等事情...
當組件或實例的數據更改之後，會立即執行beforeUpdate，然後vue的虛擬dom機制會重新構建虛擬dom與上一次的虛擬dom樹利用diff算法進行對比之後重新渲染，一般不做什麼事兒
當更新完成後，執行updated，數據已經更改完成，dom也重新render完成，可以操作更新後的虛擬dom
當經過某種途徑調用$destroy方法後，立即執行beforeDestroy，一般在這裏做一些善後工作，例如清除計時器、清除非指令綁定的事件等等
組件的數據綁定、監聽...去掉後只剩下dom空殼，這個時候，執行destroyed，在這裏做善後工作也可以
7.vue history與hash區別以及如何判斷history與hash是否造成頁面改變
8.vue中computed與data中的值在雙向數據綁定處理中有什麼不同點
9.computed生命週期
10.vue路由
11.vue v-for中 key的作用
12. vue指令修飾符
13.vue input框只能輸入字母如何實現