一，v-show和v-if的區別
v-if 是“真正的”條件渲染，因爲它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷燬和重建。
v-if 也是惰性的：如果在初始渲染時條件爲假，則什麼也不做——直到條件第一次變爲真時，纔會開始渲染條件塊。
相比之下， v-show就簡單得多——不管初始條件是什麼，元素總是會被渲染，並且只是簡單地基於 CSS 進行切換。
一般來說， v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件不太可能改變，則使用 v-if 較好。
二，MVC MVVM的區別
MVC:
用戶操作view, 用戶操作View去改變Controller，Controller改變Model, Model再直接根據業務代碼顯示在View上。
優點是 當時極大程度降低了頁面與邏輯的耦合性
缺點是 mvc的界面和邏輯關聯緊密，數據直接從數據庫讀取 |
MVVM：
相當於MVC的升級版，因爲雙向綁定，真正做到了View與數據邏輯分離，用JS去實現界面的值與Model的關聯。
缺點是 ViewModel會增多。
三， vue-router是什麼？它有哪些組件
它是一個vue.js下的路由組件。
vue-router可以通過單頁應用，即不刷新跳轉，切換地址，只是頁面上的組件的切換；
在vue-router中, 我們也可以看到它定義了兩個標籤 和。 就是定義頁面中點擊的部分， 就是點擊後，顯示內容的部分。所以 還有一個非常重要的屬性 to， 它定義 點擊之後，要到哪個路徑下 ， 如：Home
四，vue中如何實現組件之間通信
1.父組件到子組件通過props通信
2.子組件到父組件通過$emit， on通信
3.表單子組件到父組件通過v-model來通信(語法糖)
4.非父子組件通過中央事件總線(bus)來通信
5.狀態管理模式 Vuex
五，VueJS中學習使用Vuex詳解
1 安裝vuex
npm install vuex --save
2 然後 在src文件目錄下新建一個名爲store的文件夾，爲方便引入並在store文件夾裏新建一個index.js,裏面的內容如下:
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store();
export default store;
3 接下來，在 main.js裏面引入store，然後再全局注入一下，這樣一來就可以在任何一個組件裏面使用this.$store了：
state => 基本數據 和data類似
getters => 從基本數據派生的數據 和computed類似
mutations => 提交更改數據的方法，同步！
actions => 像一個裝飾器，包裹mutations，使之可以異步。
modules => 模塊化Vuex
https://segmentfault.com/a/1190000015782272
六，vue是什麼，它有哪些特性
vue是一套構建用戶界面的漸進式框架，與其他重量框架不同的是vue採用自底向上的增量開發設計，vue 的核心庫只關注視圖層，並且非常容易學習，非常容易與其它庫或已有項目整合，另一方面，vue完全用能力驅動採用單文件組件和vue生態系統支持的庫開發雜單頁應用
特性：
1，MVVM模式
2，組件化
3，指令系統
4，vue2.0開始支持虛擬dom
七，MVVM模式有什麼好處
-
低耦合
view可以獨立於Model變化和修改，一個viewModel可以綁定不同的view上，當view變化的時候model可以不變，當Model變化時view可以不變 -
可重用性
可以把一些視圖的邏輯放在viewModel裏面，讓很多view重用這段視圖代碼邏輯 -
獨立開發
開發人員可以專注與業務邏輯和數據的開發(viewModel)。設計人員可以專注於界面(view)的設計。 -
可測試性
可以針對 viewModel 來對界面(view)進行測試
對耦合的理解：
假如一個元素A去連接元素B，或者通過自己的方法可以感知B，或者當B不存 在的時候就不能正常工作，那麼就說元素A與元素B耦合。耦合帶來的問題是，當元素B發生變更或不存在時，都將影響元素A的正常工作，影響系統的可維護性和 易變更性。同時元素A只能工作於元素B存在的環境中，這也降低了元素A的可複用性。正因爲耦合的種種弊端，我們在軟件設計的時候努力追求“低耦合”。
八，什麼是虛擬dom，它的優缺點是什麼？
虛擬DOM概念隨着react的誕生而誕生，由facebook提出，其卓越的性能很快得到廣大開發者的認可；繼react之後vue2.0也在其核心引入了虛擬DOM的概念，
九，vue2.0 keep-alive組件的作用
1.基本用法
vue2.0提供了一個keep-alive組件
用來緩存組件,避免多次加載相應的組件,減少性能消耗
<keep-alive>
<component>
<!-- 組件將被緩存 -->
</component>
</keep-alive>
有時候 可能需要緩存整個站點的所有頁面,而頁面一般一進去都要觸發請求的
在使用keep-alive的情況下
<keep-alive><router-view></router-view></keep-alive>
將首次觸發請求寫在created鉤子函數中,就能實現緩存,
比如列表頁,去了詳情頁 回來,還是在原來的頁面
2.緩存部分頁面或者組件
(1)使用router. meta屬性
// 這是目前用的比較多的方式
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
詳細用法：https://www.cnblogs.com/huancheng/p/9516541.html
十，Promise用法詳解
http://www.cnblogs.com/ainyi/p/8665272.html
十一，vue的雙項數據綁定原理
VUE實現雙向數據綁定的原理就是利用了 Object.defineProperty() 這個方法重新定義了對象獲取屬性值(get)和設置屬性值(set)的操作來實現的。它接收三個參數，要操作的對象，要定義或修改的對象屬性名，屬性描述符。重點就是最後的屬性描述符。屬性描述符是一個對象，主要有兩種形式：數據描述符和存取描述符。這兩種對象只能選擇一種使用，不能混合兩種描述符的屬性同時使用。上面說的get和set就是屬於存取描述符對象的屬性。
**在面試中如何應對？**面試官：說一下VUE雙向綁定的原理？
答：VUE實現雙向數據綁定的原理就是利用了 Object.defineProperty() 這個方法重新定義了對象獲取屬性值(get)和設置屬性值(set)的操作來實現的。
用原生js實現
Object.defineProperty(obj, prop, desc)
obj 需要定義屬性的當前對象
prop 當前需要定義的屬性名
desc 屬性描述符
var obj = {};
Object.defineProperty(obj,'hello',{
set:function(val){
document.getElementById('bb').innerHTML = val;
document.getElementById('aa').value = val;
}
});
document.getElementById('aa').onkeyup = function(e){
obj.hello = e.target.value;
};
obj.hello = "";
十二，vue lazyload插件簡單使用
- 安裝插件：
npm install vue-lazyload --save-dev
- main.js引入插件：
import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad,{
error:'./static/error.png',
loading:'./static/loading.png'
})
- vue文件中將需要懶加載的圖片綁定 v-bind:src 修改爲 v-lazy
<img class="item-pic" v-lazy="newItem.picUrl"/>
https://www.cnblogs.com/xyyt/p/7650539.html
十三，vue的生命週期
1，什麼是vue⽣命週期和⽣命週期鉤⼦函數？
vue 的⽣命週期是： vue 實例從創建到銷燬，也就是從開始創建、初始化數據、編譯模板、掛載Dom!渲染、更新!渲染、卸載等⼀系列過程。在這個過程中也會運⾏⼀些叫做⽣命週期鉤⼦的函數，這給了⽤戶在不同階段添加⾃⼰的代碼的機會
2，vue⽣命週期鉤⼦函數有哪些？
vue中所有的鉤子函數：
beforeCreate（創建前）
created（創建後）
beforeMount（載入前）
mounted（載入後）
beforeUpdate（更新前）
updated（更新後）
beforeDestroy（銷燬前）
destroyed（銷燬後）
https://blog.csdn.net/yana_li/article/details/78780335
十四，vue常用屬性
vue常用屬性
（1）數據
data:Vue 實例的數據對象
component s ：Vue實例配置局部註冊組件
（2）類方法
computed:計算屬性
watch：偵聽屬性
filter s：過濾器
method s :Vue實例方法
render：渲染函數，創建虛擬DOM
（3）生命週期
created：在實例創建完成後被立即調用，完成初始化操作
mounted ：el掛載到Vue實例上了，開始業務邏輯操作
before Destroy：實例銷燬之前調用
2、Vue組件
props:用於接收來自父組件的數據
template：組件模板