1、介紹Vue中的常用的指令
- v-bind 綁定屬性機制，可以簡寫為：
- 對象方法 v-bind:class="{'orange': isRipe, 'green': isNotRipe}"
- 數組方法v-bind:class="[class1, class2]"
- 行內 v-bind:style="{color: color, fontSize: fontSize+'px' }"
- v-on 綁定事件機制,可以簡寫為@
- v-for
- v-html 以html標簽形式顯示
- v-text 可以簡寫為{{}}
- v-if
- v-show
- v-model 雙向數據綁定
2、vue中常用的事件修飾符
- .prevent: 阻止默認事件；如：v-on:submit.prevent阻止默認事件;
- .stop: 阻止單擊事件冒泡；如：v-on:click.stop阻止事件冒泡;
- .self: 當事件發生在該元素本身而不是子元素的時候會觸發；
- .capture: 事件偵聽，事件發生的時候會調用
- .once 事件只觸發一次
3、談談你對MVVM開發模式的理解
- MVVM分為Model、View、ViewModel三者。
- Model 代表數據模型，數據和業務邏輯都在Model層中定義；
- View 代表UI視圖，負責數據的展示；
- ViewModel 負責監聽 Model 中數據的改變並且控制視圖的更新，處理用戶交互操作；
- Model 和 View 並無直接關聯，而是通過 ViewModel 來進行聯系的，Model 和 ViewModel 之間有着雙向數據綁定的聯系。因此當 Model 中的數據改變時會觸發 View 層的刷新，View 中由於用戶交互操作而改變的數據也會在 Model 中同步。
- 這種模式實現了 Model 和 View 的數據自動同步，因此開發者只需要專注對數據的維護操作即可，而不需要自己操作 DOM。
4、 v-if 和 v-show 有什么區別？
-
v-show
-
v-show是css切換，頻繁切換時用v-show，
-
v-show 僅僅控制元素的顯示方式，將 display 屬性在 block 和 none 來回切換；
-
當我們需要經常切換某個元素的顯示/隱藏時，使用v-show會更加節省性能上的開銷；
-
v-show對應的值無論是true還是false，對應HTML元素都會存在於瀏覽器的文檔中；
-
-
v-if
-
v-if=‘false’ v-if是條件渲染，當false的時候不會渲染，
-
v-if是完整的銷毀和重新創建，運行時較少改變時用v-if，而v-if會控制這個 DOM 節點的存在與否。
-
當只需要一次顯示或隱藏時，使用v-if更加合理。
-
v-if如果是false的話，對應HTML元素直接不在瀏覽器的文檔中了。
-
5、請詳細說你對vue生命周期的理解？
- 總共分為8個階段創建前/后，載入前/后，更新前/后，銷毀前/后。
- beforeCreate----創建前 組件實例更被創建，組件屬性計算之前，數據對象data都為undefined，未初始化。
- created----創建后 組件實例創建完成，屬性已經綁定，數據對象data已存在，但dom未生成，$el未存在
- beforeMount---掛載前 vue實例的$el和data都已初始化，掛載之前為虛擬的dom節點，data.message未替換
- mounted-----掛載后 vue實例掛載完成，data.message成功渲染。
- beforeUpdate----更新前 當data變化時，會觸發beforeUpdate方法
- updated----更新后 當data變化時，會觸發updated方法
- beforeDestory---銷毀前 組件銷毀之前調用
- destoryed---銷毀后 組件銷毀之后調用，對data的改變不會再觸發周期函數，vue實例已解除事件監聽和dom綁定，但dom結構依然存在
7、vue中<keep-alive>的作用；active-class是哪個組件的屬性？
- 把切換出去的組件保留在緩存中，可以保留組件的狀態或者避免重新渲染。
- active-class是vue-router模塊的router-link組件的屬性。
8、計算屬性及和 watch 、methods的區別
-
computed看上去是方法，但是實際上是計算屬性，它會根據你所依賴的數據動態顯示新的計算結果。計算結果會被緩存，computed的值在getter執行后是會緩存的，只有在它依賴的屬性值改變之后，下一次獲取computed的值時才會重新調用對應的getter來計算，
- computed可以依賴其他computed，甚至是其他組件的data；
- 依賴於數據，數據更新，處理結果自動更新；
- 計算屬性內部this指向vm實例；
- 在組件調用時，直接寫計算屬性名即可；
- 有get和set兩個選項，常用的是getter方法，獲取數據，也可以使用setter方法改變數據；
-
watch 更像是一個 data 的數據監聽回調，當依賴的 data 的數據變化，執行回調，在方法中會傳入 newVal 和 oldVal。Vue 實例將會在實例化時調用 $watch()，遍歷 watch 對象的每一個屬性。如果你需要在某個數據變化時做一些事情，使用watch。
-
相較於methods，不管依賴的數據變不變，methods都會重新計算，但是依賴數據不變的時候computed從緩存中獲取，不會重新計算，methods不會。methods是一個方法，它可以接受參數，而computed不能。
10、父子組件之間的傳值通信？
-
父組件向子組件傳值：
-
子組件在props中創建一個屬性，用來接收父組件傳過來的值；
-
在父組件中注冊子組件；
-
在子組件標簽中添加子組件props中創建的屬性；
-
把需要傳給子組件的值賦給該屬性
-
子組件向父組件傳值：
-
子組件中需要以某種方式（如點擊事件）的方法來觸發一個自定義的事件；
-
將需要傳的值作為$emit的第二個參數，該值將作為實參傳給響應事件的方法；
-
在父組件中注冊子組件並在子組件標簽上綁定自定義事件的監聽。
12、非父子組件之間的通信
常用的方法有 EventBus 和 Vuex
-
EventBus 實現非父子組件通信的原理是：
- 通過實例化一個Vue對象( 比如bus = new Vue() )作為母線，在組件中通過事件將參數傳遞出去( bus.$emit(event, [...args]) )，
- 然后在其他組件中再通過bus來監聽此事件並接受參數( bus.$on(event, callback) )。
-
Vuex 是什么：
-
Vuex是一個專為Vue.js應用程序開發的狀態管理模式。采用集中式存儲管理應用的所有組件的狀態
-
Vuex是一個狀態管理的插件，可以解決不同組件之間的數據共享和數據持久化。
-