Javascript - Vue - vue對象的生命週期

vue對象的生命週期

從vue的建立到銷燬會通過一系列的事件，這是vue對象的生命週期。

建立期間的生命週期函數

<div id="box">
    <h3 id="h3">{{msg}}</h3>   
</div>

var vm = new Vue({
    el: "#box",
    data: {
        msg: "hello"
    },
    methods: {
        show: function () {
            alert("執行了show函數");
        }       
    },  
    //vue被完整建立以前觸發，內部尚未任何屬性
    beforeCreate() {
        this.show();//沒法調用show方法
    },
    //vue已完整建立出來（其屬性已初始化）以後觸發
    created: function () {
        this.show(); //能調用show方法
    },
    //vue已完整建立出來（其屬性已初始化）但數據還沒有插入到dom元素時觸發
    beforeMount: function () {
        alert(document.getElementById("h3").innerText);//輸出{{msg}}的字符表示
    },
    //vue已完整建立出來（其屬性已初始化），數據已插入dom元素時觸發
    mounted: function () {
        alert(document.getElementById("h3").innerText); //正確輸出msg的值
    }
});

運行期間的生命週期函數

<div id="box">
    <h3 id="h3">{{msg}}</h3>
    <input type="button" value="OK" @click="changeData"/> //點擊按鈕，更改msg的值
</div>

var vm = new Vue({
    el: "#box",
    data: {
        msg:"hello"
    },
    methods: {     
        changeData: function () {
            this.msg = "world";
        }
    },    
    //在vue內部的data數據已經更新且頁面上的數據還沒有更新以前觸發
    beforeUpdate: function () {          
        alert(document.getElementById("h3").innerText); //輸出hello
        alert(this.msg); //輸出world
    },
    //數據在vue內部和頁面上都更新完成以後觸發
    updated: function () {
        alert(document.getElementById("h3").innerText); //輸出world
        alert(this.msg); //輸出world
    }
});

銷燬期間的生命週期函數

var vm = new Vue({
    el: "#box",  
    beforeDestroy: function () {
        //組件銷燬前，此時vue的各個屬性均可用
    },
    destroyed: function () {
        //組件銷燬後，此時vue的各個屬性不可用
    }
});

 

Javascript - 學習總目錄