摘要：供用戶在相應的階段對其進行操作。我們像下面這樣使用這個指令大多數情況下，我們只需要使用與鉤子函數。里提供了函數的簡寫形式鉤子函數有兩個常用的參數和。其他用法與全局自定義指令一致。

vue實例從創建到銷毀的過程，稱為生命周期，共有八個階段。

這八個階段里分別有一個叫做鉤子函數的實例選項。供用戶在相應的階段對其進行操作。

beforeCreate(){  //組件實例剛剛創建，還未進行數據觀測和事件配置
                
},
created(){  //實例已經創建完成，并且已經進行數據觀測和事件配置
                
},
beforeMount(){//模板編譯之前，還沒掛載
                
},
mounted(){ //模板編譯之后，已經掛載，此時才會渲染頁面，才能看到頁面上數據的展示
                    
},
beforeUpdate(){//組件更新之前
                
},
updated(){//組件更新之后
                
},
beforeDestroy(){//組件銷毀之前
                
},
destroyed(){  //組件銷毀之后
                    
}

這幾個鉤子中，最常用的是created()與mounted()。

計算屬性也是用來存儲數據，但具有以下幾個特點：

數據可以進行邏輯處理操作

對計算屬性中的數據進行監視

    {{addZero}}

    
new Vue({
    el: "#app",
    data: {
        num: 8
    },
    computed: {
        //這是計算屬性的get方法，用于取值
        addZero() {
            return this.num > 10 ? this.num : "0" + this.num;
        }
    }
})

這里的addZero和num一樣，都是屬性。不過addZero是依賴于num、進行計算后的值。一旦num的值發生變化，addZero的值也會隨之變化。

 

    {{num}}----{{addZero}}
    

    點擊改變num
 
    
 new Vue({
    el: "#app",
    data: {
        num: 8
    },
    methods: {
        change: () => {
            this.num++;
        }
    },
    computed: {
        addZero:() => {
            return this.num > 10 ? this.num : "0" + this.num;
        }
    }
 })

一旦我們點擊按鈕改變num的值，那么因為計算屬性實時監測依賴項，addZero也會跟著發生變化。

將計算屬性的get函數定義為一個方法也可以實現和計算屬性類似的功能。那么二者之間有什么區別？

區別一：計算屬性是基于它的依賴進行實時更新的，方法則是調用才更新

區別二：計算屬性是有緩存的，只要相關依賴沒有改變，多次訪問計算屬性得到的值是之前緩存的計算結果，不會多次執行。操作一個沒有依賴項的值也是如此。

官方文檔給出了下面這個例子：

computed: {
  now: function () {
    return Date.now()
  }
}

計算屬性存在緩存，這里的now值不會發生變化。

計算屬性由兩部分組成：get和set，分別用來獲取計算屬性和設置計算屬性。默認只有get，如果需要set，要自己添加。

        

        {{num}}----{{addZero}}
        

        點擊改變num
    
    
   new Vue({
        el: "#app",
        data: {
            num: 8
        },
        methods: {
            change(newNumber) {
                this.addZero = newNumber;
            }
        },
        computed: {
            addZero: {
                get() {
                    return this.num > 10 ? this.num : "0" + this.num;
                },
                set(newNum) {
                    this.num = newNum
                }
            }
        }
    })

我們再change方法中改變addZero屬性的值的時候會自動調用它的set方法。

vue中給實例和屬性提供了若干屬性和方法。

獲取屬性的語法：實例名.屬性名
以下是常用的屬性：

vm.$el: 獲取vue實例關聯的元素DOM，進而可以對其進行操作

vm.$data: 獲取數據對象data

vm.$options：獲取選項，自定義的選項也可以在這里獲取。

vm.$refs：獲取所有添加ref屬性的元素dom對象，進而可以對其進行操作

手動掛載vue實例

var vm=new Vue({
    data:{
        msg:"Hello vue.js"
    }
 }).$mount("#app");

銷毀實例

vm.$destroy();  //銷毀實例所占的內存空間

在DOM更新完成后再執行回調函數，一般在修改數據之后使用該方法，以便獲取更新后的DOM

var vm=new Vue({
    data:{
        msg:"Hello vue.js"
    }
 }).$mount("#app");
 
 //修改數據
 vm.msg="foo";
 
 console.log(vm.$refs.title.textContent);  //Hello vue.js
 vm.$nextTick(function(){
    console.log(vm.$refs.title.textContent); //foo
 });

DOM還沒更新完，Vue實現響應式并不是數據發生改變之后DOM立即變化，需要按一定的策略進行DOM更新，需要時間！使用$nextTick方法等DOM更新完再獲取數據。

通過vue實例的$set方法為對象添加屬性，可以實時監視。

    {{user.name}}
 {{user.age}}
    

    添加屬性

    
var vm = new Vue({
    data: {
        msg: "Hello vue.js",
        user: {
            name: "hedawei",
            gender: "man"
        }
    },
    methods: {
        addAge() {
            /* this.user.age = 22; */
            this.$set(this.user, "age", 22);
        }
    }
}).$mount("#app");

方法中使用原始的添加屬性方法的話不會在模板中顯示。使用$set方法會實時監控數據，然后添加。

監控vue實例的變化

 vm.$watch("msg", (newValue, oldValue) => {
    console.log("msg被修改啦，原值：" + oldValue + "，新值：" + newValue);
 });

如果需要監控深度數據變化（例如監控一個對象中的某個屬性），則需要在選項中添加{deep:true}

自定義指令分為自定義全局指令和自定義局部指令。

使用全局方法Vue.directive(指令ID,定義對象)。注：使用指令時必須在指名名稱前加前綴v-，即v-指令名稱。

簡單示例：

Vue.directive("hello",{
    bind(){ //常用！！
        alert("指令第一次綁定到元素上時調用，只調用一次，可執行初始化操作");
    },
    inserted(){
        alert("被綁定元素插入到DOM中時調用");
    },
    update(){
        alert("被綁定元素所在模板更新時調用");
    },
    componentUpdated(){
        alert("被綁定元素所在模板完成一次更新周期時調用");
    },
    unbind(){
        alert("指令與元素解綁時調用，只調用一次");
    }
 });

這里定義了一個名為hello的指令，指令定義函數提供了幾個鉤子函數，分別在不同的時期生效。我們像下面這樣使用這個指令:

hello vue.js

大多數情況下，我們只需要使用bind與update鉤子函數。vue里提供了函數的簡寫形式：

Vue.directive("hello", function () {
    alert("hello vue.js");
})  

鉤子函數有兩個常用的參數el和binding。el是綁定的DOM對象，binding是一個對象，包含若干屬性。

拿到DOM對象，我們就可以對DOM進行一些操作。

hello vue.js

Vue.directive("hello", function (el,binding) {
    el.style.color = "red";
    
    //屬性name是指令的名字（不帶v-）
    console.log(binding.name);     //hello
    //屬性value是傳遞給指令的值
    console.log(binding.value);   //alice
    //屬性expression是指令值的字符串形式（個人感覺就是類似變量名）
    console.log(binding.expression);  //msg
    //屬性arg是傳遞給指令的參數(和傳值寫在一起容易令初學者困惑，下面分開寫  
    //合在一起寫的寫法是
hello vue.js
)
    //
hello vue.js
    console.log(binding.arg);       //123
    //屬性modifiers是一個包含修飾符的對象。
    //與傳參傳值合在一起的寫法是 
hedawei
    //
hello vue.js
    console.log(binding.modifiers);    //{bar:true}
})  

 var vm = new Vue({
    el: "#app",
    data: {
        msg: "alice"
    }
 })

局部自定義指令寫在實例的directives選項中。

  var vm = new Vue({
    el: "#app",
    data: {
        msg: "alice"
    },
    methods: {
    },
    directives: {
        word: function(el, binding) {
            console.log(binding.name);
        }
    }
 })

其他用法與全局自定義指令一致。

Vue 在插入、更新或者移除 DOM 時，提供多種不同方式的應用過渡效果。本質上還是使用CSS3動畫：transition、animation屬性。

使用transition組件，將要執行動畫的元素包含在該組件內：

    
        運動的元素
   

我們需要為其定義一個name屬性，以便后面為其添加css樣式。

動畫有6個CSS類名，下面結合例子說明：

    
    

        點 擊
        
            

            
        
    
    
    

vue中給過渡的不同時期提供了不同的鉤子函數。

        

        

        
 new Vue({
        ...
    methods: {
        beforeEnter(el) {
            alert("動畫進入之前");
        },
        enter(el) {
            alert("動畫進入");
        },
        afterEnter(el) {
            alert("動畫進入之后");
        },
        beforeLeave(el) {
            alert("動畫離開之前");
        },
        leave(el) {
            alert("動畫離開");
        },
        afterLeave(el) {
            alert("動畫離開之后");
        }
    }
 });

在這不同的時期，我們可以取到過渡元素的DOM對象，從而對其進行操作。

上面的標簽只適用于單元素過渡。若要對多元素進行過渡，則需要使用標簽，并且綁定key屬性，設置不同的值。

    點 擊
    
        

        
        

        
    

我們可以使用vue的自定義過渡類名結合第三方動畫庫實現自定義動畫效果。這六個自定義類名和vue內置的類名類似:

enter-class

enter-active-class

enter-to-class

leave-class

leave-active-class

leave-to-class
示例：

 p {
    width: 300px;
    height: 300px;
    background-color: red;
    margin: 0 auto;
 }

 

    點 擊
    
        

        
    


 

未完待續。。。