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 - 学习总目录