摘要：采用了新舊的對(duì)比，獲取差異的，最后一次性的更新到真實(shí)上。對(duì)基本屬性進(jìn)行監(jiān)聽對(duì)對(duì)象進(jìn)行監(jiān)聽對(duì)對(duì)象某一個(gè)屬性監(jiān)聽監(jiān)聽自定義指令全局指令，第一個(gè)參數(shù)是指令名，第二個(gè)參數(shù)是一個(gè)對(duì)象，對(duì)象內(nèi)部有個(gè)的函數(shù)，函數(shù)里有這個(gè)參數(shù)，表示綁定了這個(gè)指令的元素。

11.vue 虛擬DOM的理解

Web界面由DOM樹(樹的意思是數(shù)據(jù)結(jié)構(gòu))來構(gòu)建，當(dāng)其中一部分發(fā)生變化時(shí)，其實(shí)就是對(duì)應(yīng)某個(gè)DOM節(jié)點(diǎn)發(fā)生了變化，????????
虛擬DOM就是為了解決瀏覽器性能問題而被設(shè)計(jì)出來的。如前，若一次操作中有10次更新DOM的動(dòng)作，虛擬DOM不會(huì)立即操作DOM，而是將這10次更新的diff內(nèi)容保存到本地一個(gè)JS對(duì)象中，最終將這個(gè)JS對(duì)象一次性attch到DOM樹上，再進(jìn)行后續(xù)操作，避免大量無謂的計(jì)算量。所以，用JS對(duì)象模擬DOM節(jié)點(diǎn)的好處是，頁面的更新可以先全部反映在JS對(duì)象(虛擬DOM)上，操作內(nèi)存中的JS對(duì)象的速度顯然要更快，等更新完成后，再將最終的JS對(duì)象映射成真實(shí)的DOM，交由瀏覽器去繪制。

采用了新舊DOM的對(duì)比，獲取差異的DOM，最后一次性的更新到真實(shí)DOM上。

12.動(dòng)態(tài)組件

有時(shí)候在不同組件之間進(jìn)行動(dòng)態(tài)切換是非常有用的，比如在一個(gè)多標(biāo)簽的界面里，可以將多個(gè)子組件都掛載在同一個(gè)位置，通過變量來切換組件，實(shí)現(xiàn)tab菜單這樣的效果。
可以通過Vue的元素加一個(gè)特殊的is特性來實(shí)現(xiàn)
在示例中，currentTabComponent 可以包括
    已注冊(cè)組件的名字，或
    一個(gè)組件的選項(xiàng)對(duì)象

13.vue的kepp-alive

是vue的一個(gè)內(nèi)置組件，可以使被包含的組件保留狀態(tài)，避免重新渲染。
包含動(dòng)態(tài)組件是，會(huì)緩存不活動(dòng)的組件實(shí)例，而不是銷毀他們，
keep-alive是一個(gè)抽象組件，它自身不會(huì)渲染一個(gè)DOM元素，也不會(huì)出現(xiàn)在父組件鏈中，
當(dāng)組件在  內(nèi)被切換，它的 activated 和 deactivated 這兩個(gè)生命周期鉤子函數(shù)將會(huì)被對(duì)應(yīng)執(zhí)行。
include：字符串或正則表達(dá)式，只有名稱匹配的組件會(huì)被緩存
exclude：字符串或正則表達(dá)式，名稱匹配的不會(huì)被緩存
max：數(shù)字，最多可緩存多少實(shí)例

1)搭配動(dòng)態(tài)組件使用
    將會(huì)緩存is成立時(shí)匹配到的zu"jian    
    
        
    
2)include
    將會(huì)緩存name名為a、b的組件
    
        
    
3)exclude
    將會(huì)緩存name名為**非**a、b的組件
    
        
    
4)使用$route.meta的keepAlive屬性
    將會(huì)緩存滿足if條件的組件
    
        
    
    

14.watch和計(jì)算屬性

計(jì)算屬性：
    *用于簡單場合，比如計(jì)算，合并字符串等；
    *計(jì)算屬性會(huì)依賴于他使用的data中的屬性，只要是依賴的屬性值有改變，則自動(dòng)重新調(diào)用一下計(jì)算屬性；   
    *如果他所依賴的這些屬性值沒有發(fā)生改變，那么計(jì)算屬性的值是從緩存中來的，而不是重新編譯，那么性能要高一些，所以vue中盡可能使用computed替代watch。

    1)計(jì)算屬性基于依賴進(jìn)行緩存。

watch屬性：
    *用于耗時(shí)的，可以異步的獲取遠(yuǎn)程服務(wù)上的數(shù)據(jù)這樣的操作。

　　 1)對(duì)基本屬性進(jìn)行監(jiān)聽 watch: { str: function (newValue, oldValue) {} }

　　 2)對(duì)對(duì)象進(jìn)行監(jiān)聽watch: {obj: {handle: (){}, deep: true}

　　 3)對(duì)對(duì)象某一個(gè)屬性監(jiān)聽 watch : { "obj.prop": {} }

　　 4)route監(jiān)聽watch: { "$route": function(){} }
15.自定義指令

全局指令：Vue.directive()
Vue.directive("foucs"，{
    inserted(el){
        
    }
}),
第一個(gè)參數(shù)foucs是指令名，第二個(gè)參數(shù)是一個(gè)對(duì)象，對(duì)象內(nèi)部有個(gè)inserted的函數(shù)，函數(shù)里有el這個(gè)參數(shù)，el表示綁定了這個(gè)指令的dom元素。
Vue.directive("gqs",{
bind() {
  // 當(dāng)指令綁定到 HTML 元素上時(shí)觸發(fā).**只調(diào)用一次**
  console.log("bind triggerd")
},
inserted() {
  // 當(dāng)綁定了指令的這個(gè)HTML元素插入到父元素上時(shí)觸發(fā)(在這里父元素是 `div#app`)**.但不保證,父元素已經(jīng)插入了 DOM 文檔.**
  console.log("inserted triggerd")
},
updated() {
  // 所在組件的`VNode`更新時(shí)調(diào)用.
  console.log("updated triggerd")
},
componentUpdated() {
  // 指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用。
  console.log("componentUpdated triggerd")
  
},
unbind() {
  // 只調(diào)用一次，指令與元素解綁時(shí)調(diào)用.
  console.log("unbind triggerd")
}

})
16.組件之間的通信

1)父組件-->子組件
    父向子傳遞數(shù)據(jù)通過props，通過設(shè)置標(biāo)簽的屬性傳遞數(shù)據(jù)，在子組件用props接受。
    **父組件代碼**
    
    
    **子組件代碼**
    
    
2)子組件-->父組件
    **在子組件中創(chuàng)建一個(gè)按鈕，給按鈕綁定一個(gè)點(diǎn)擊事件，在該事件的的函數(shù)中使用$emit來觸發(fā)一個(gè)自定義事件，并傳遞一個(gè)參數(shù)。
    
    methods:{
        sendMsg:function(){
            this.$emit("listenToChild","傳遞的數(shù)據(jù)");
        }
    }
    
    **在父組件引入子組件的標(biāo)簽內(nèi)監(jiān)聽該自定義事件，并添加一個(gè)處理該事件的方法。
    
    methods:{
        showMsg:function(msg){
            console.log(msg);//傳遞來的數(shù)據(jù)
        }
    }

3)非父子組件通信（中央事件總線eventBus）
全局注冊(cè)，在main.js
    let EventBus = new Vue();
    Vue.prototype.bus=bus;
局部使用
    新建EventBus.js
        import Vue from "vue"
        export const EventBus = new Vue()
    在需要的組件中引用
        import EventBus from "../EventBus.js";
        
注冊(cè)之后，在firstChild組件中，import引入js，接著在firstChild組件添加按鈕并綁定一個(gè)點(diǎn)擊事件

methods:{
    sendMsg:function(){
        EventBus.$emit("userEvent","轉(zhuǎn)遞的數(shù)據(jù)")
    }
}
在secondChild組件中，引入時(shí)間總線
mounted(){
    EventBus.$on("userEvent",function(msg){
        console.log(msg);//傳遞過來的數(shù)據(jù)
    });
}

17.過濾器

18.vue-loader的作用

太深入的還沒用到，只是簡單的了解過。
vue-loader：解析和轉(zhuǎn)換.vue文件，提取出其中的邏輯代碼，script、style、template，再分別把他們交給對(duì)應(yīng)的loader去處理。
css-loader：加載由vue-loader提取出來的style代碼。
vue-template-compiler：把vue-loader提取出來的HTML模板編譯成對(duì)應(yīng)的可執(zhí)行的script代碼。

vue-loader的作用就是提取。

19.vue組件中data為什么必須是函數(shù)？

在nue Vue()中data是可以作為一個(gè)對(duì)象進(jìn)行操作的，然而在component中，data只能用函數(shù)的方式存在，不能直接讓對(duì)象賦值給他。
當(dāng)data是一個(gè)函數(shù)時(shí)，每個(gè)實(shí)例可以維護(hù)一份被返回對(duì)象的獨(dú)立的拷貝，這樣各個(gè)實(shí)例中的data就不會(huì)相互影響，是獨(dú)立的。