v-show與v-if的區別 1.v-show只是css級別的display屬性none和block之間的切換。而v-if 是“真正”的條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷毀和重建 2.v-show一般用在操作比較頻繁的地方，v-if用在運行時條件很少改變的地方。 ...
v-show與v-if的區別
1.v-show只是css級別的display屬性none和block之間的切換。而v-if 是“真正”的條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷毀和重建
2.v-show一般用在操作比較頻繁的地方，v-if用在運行時條件很少改變的地方。
3.v-if="false"時，內部組件不會渲染，可以利用這個合理渲染重要的內容。或者和v-else，v-else-if一起使用。
綁定class的數組用法
一般綁定class對象的用法如下
<div v-bind:class="{ active: isActive }"></div>
當isActive為true時，class="active"
你可以在對象中傳入更多屬性來動態切換多個 class,v-bind:class可以和普通的class共存
<div
class=”static“
v-bind:class="{ active: isActive,text-danger:hasError }">
</div>
data{
isActive:true,
hasError:false
}
那渲染結果為<div class="static active"></div>
數組的用法
<div v-bind:class="[ activeClass,errorClass ]"></div>
data{
activeClass:'active',
errorClass:'text-danger'
}
渲染為
<div class="active text-danger">
想根據條件切換數組中的class
可以用三元表達式：
<div v-bind:class=[isActive?activeClass:'',errorClass]>
這樣會始終添加errorClass，只有當isActive為true時添加activeClass
在數組語法中也可以使用對象語法：
<div v-bind:class=[{active:isActive},errorClass]>
計算屬性和watch的區別
計算屬性是自動監聽，依賴值的變化，從而動態返回內容。
如果我們還需要動態值，那就用計算屬性；需要知道值改變之後執行的邏輯，就用watch
補充：
1.computed是一個對象的時候，有get和set兩個選項。
2.methons是一個方法，可以接受參數，computed可以緩存。
3.computed可以依賴其他的computed，甚至是其他組件的data。
4.watch是一個對象的時候，有handler（執行的函數），deep（是否深度），immediate（是否立即執行）等常用選項。
事件修飾符
<!--ctrl按下時觸發，即使Alt或Shift被一同按下也會觸發-->
<button @click.ctrl="onClick">B</button>
<!-- 有且只有ctrl被按下時觸發-->
<button @click.ctrl.exact="onClick">B</button>
<!-- 沒有任何修飾符被按下時觸發-->
<button @click.exact="onClick">B</button>
<!-- 阻止單擊事件繼續傳播 --> <a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重載頁面 --> <form v-on:submit.prevent="onSubmit"></form>
<!-- 添加事件監聽器時使用事件捕獲模式 --> <!-- 即元素自身觸發的事件先在此處理，然後才交由內部元素進行處理 --> <div v-on:click.capture="doThis">...</div>
<!-- 只當在 event.target 是當前元素自身時觸發處理函數 --> <!-- 即事件不是從內部元素觸發的 --> <div v-on:click.self="doThat">...</div>
<!-- 點擊事件將只會觸發一次 --> <a v-on:click.once="doThis"></a>
<!-- 滾動事件的預設行為 (即滾動行為) 將會立即觸發 --> <!-- 而不會等待 `onScroll` 完成 --> <!-- 這其中包含 `event.preventDefault()` 的情況 --> <div v-on:scroll.passive="onScroll">...</div>
組件中的data為什麼是函數
因為組件使用來複用的，JS里對象是引用關係，這樣作用域沒有隔離
而new Vue的實例是不會被覆用的，因此不存在引用對象的問題。
Keep-alive內置組件
Props：
1.include 字元串或正則表達式，匹配的組件會被緩存
2.exclude 與上面相反
3.max。數字，最大可以緩存多少組件實例。
用法：
<keep-alive>包裹動態組件時，會緩存不活動的組件實例，而不是銷毀他們，和<transition>一樣，它是一個抽象組件，不會渲染出一個DOM元素，也不會出現在父組件鏈中。
當組件在<keep-alive>內被切換，它的activated和 deactivate 這兩個生命周期鉤子函數將會被對應執行。
主要用於保留組件狀態或避免重新渲染。
<!-- 基本 -->
<keep-alive> <component :is="view"></component> </keep-alive>
<!-- 多個條件判斷的子組件 -->
<keep-alive> <comp-a v-if="a > 1"></comp-a> <comp-b v-else></comp-b> </keep-alive>
<!-- 和 `<transition>` 一起使用 -->
<transition> <keep-alive> <component :is="view"></component> </keep-alive> </transition>
註意：<keep-alive>是用在其一個直屬的子組件被開關的情形。如果你在其中有v-for則不會工作。如果有上述的多個條件性的子元素，<keep-alive>要求同時只有一個子元素被渲染。
Vuex中mutations和actions的區別
actions可以執行非同步，actions調用mutations，而mutations來修改store。
Render函數
類型：(createElement: () => VNode) => VNode
詳細：字元串模板的代替方案，允許你發揮 JavaScript 最大的編程能力。該渲染函數接收一個 createElement 方法作為第一個參數用來創建 VNode。如果組件是一個函數組件，渲染函數還會接收一個額外的 context 參數，為沒有實例的函數組件提供上下文信息。
怎麼理解單向數據流
父組件時通過prop把數據傳遞到子組件的，但是這個prop只能由父組件修改，子組件修改會報錯。子組件想修改時，只能通過$emit派發一個自定義事件，父組件接到後，由父組件修改。
生命周期
主要有8個階段
①beforeCreate：在實例初始化之後，數據觀測 (data observer) 和 event/watcher 事件配置之前被調用。
②created：在實例創建完成後被立即調用。在這一步，實例已完成以下的配置：數據觀測 (data observer)，屬性和方法的運算，watch/event 事件回調。然而，掛載階段還沒開始，$el 屬性目前不可見。
③beforeMount：在掛載開始之前被調用：相關的 render 函數首次被調用。該鉤子在伺服器端渲染期間不被調用。
④mounted：el 被新創建的 vm.$el 替換，並掛載到實例上去之後調用該鉤子。如果 root 實例掛載了一個文檔內元素，當 mounted 被調用時 vm.$el 也在文檔內。
註意 mounted 不會承諾所有的子組件也都一起被掛載。如果你希望等到整個視圖都渲染完畢，可以用 vm.$nextTick 替換掉 mounted：mounted: function () { this.$nextTick(function () { // Code that will run only after the // entire view has been rendered }) } 該鉤子在伺服器端渲染期間不被調用。
⑤beforeUpdate：數據更新時調用，發生在虛擬 DOM 打補丁之前。這裡適合在更新之前訪問現有的 DOM，比如手動移除已添加的事件監聽器。
該鉤子在伺服器端渲染期間不被調用，因為只有初次渲染會在服務端進行。
⑥updated：由於數據更改導致的虛擬 DOM 重新渲染和打補丁，在這之後會調用該鉤子。
當這個鉤子被調用時，組件 DOM 已經更新，所以你現在可以執行依賴於 DOM 的操作。然而在大多數情況下，你應該避免在此期間更改狀態。如果要相應狀態改變，通常最好使用計算屬性或 watcher 取而代之。
註意 updated 不會承諾所有的子組件也都一起被重繪。如果你希望等到整個視圖都重繪完畢，可以用 vm.$nextTick 替換掉 updated：updated: function () { this.$nextTick(function () { // Code that will run only after the // entire view has been re-rendered }) }該鉤子在伺服器端渲染期間不被調用。
⑦beforeDestroy：實例銷毀之前調用。在這一步，實例仍然完全可用。該鉤子在伺服器端渲染期間不被調用。
⑧Destoryed：Vue 實例銷毀後調用。調用後，Vue 實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷毀。該鉤子在伺服器端渲染期間不被調用。
組件間的通信
1.父向子傳遞數據是通過props，子向父通過events（emits）
2.通過父鏈子鏈也可以(parent/$children)
3.ref也可以訪問組件實例，provide/inject API
4.兄弟通信通過Bus和Vuex
5.跨級通信通過Bus和Vuex 和provide/inject API
路由的跳轉方式
1.通過<router-link to="home">,router-linker標簽渲染為<a>標簽，在template中的跳轉都是用這種。
2.另一種是邊城式導航，也就是通過JS跳轉，比如router.push('/home')。
Vue.js 2.x 雙向綁定原理
核心的API是通過Object.defineProperty()來劫持各個屬性的setter/getter,在數據變動時發佈消息給訂閱者，觸發相應的監聽回調，這就是為什麼不支持IE8的原因。
MVVM與MVC有什麼區別
MVVM模式是由經典的軟體架構MVC衍生來的。當View（視圖層）變化時，會自動更新到ViewModel（視圖模型）。反之亦然。View和ViewModel之間通過雙向綁定（data-binding)建立聯繫，於MVC不同的是，他沒有Controller層，而是演變為ViewModel。
ViewModel通過雙向綁定數據把View層和Model層連接起來，而View和Model之間的同步工作是由Vue.js完成的，我們不需要手動操作DOM，只需要維護好數據狀態。
