Vue的生命周期

Vue生命周期的钩子函数:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <title>Title</title>
</head>
<body>
<div id="app">
    {{name}}
</div>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            name:"eric"
        },
        methods:{
            init:function(){
                console.log(123)
            }
        },
        beforeCreate(){
            console.group("BeforeCreate");
            console.log(this.$el);
            console.log(this.name);
            console.log(this.init);
        },
        created(){
            console.group("Created");
            console.log(this.$el);
            console.log(this.name);
            console.log(this.init);
        },
        beforeMount(){
            console.group("BeforeMount");
            console.log(this.$el);
            console.log(this.name);
            console.log(this.init);
        },
        mounted(){
            console.group("Mounted");
            console.log(this.$el);
            console.log(this.name);
            console.log(this.init);
        },
        beforeUpdate(){
            console.group("BeforeUpdate");
            console.log(this.$el);
            console.log(this.name);
            console.log(this.init);
        },
        updated(){
            console.group("Updated");
            console.log(this.$el);
            console.log(this.name);
            console.log(this.init);
        },
        beforeDestroy(){
            console.group("BeforeDestroy");
            console.log(this.$el);
            console.log(this.name);
            console.log(this.init);
        },
        destroyed(){
            console.group("Destroyed");
            console.log(this.$el);
            console.log(this.name);
            console.log(this.init);
        }
    })
</script>
</body>
</html>

Vue的生命周期的钩子 LifeCycle hooks

数据监听之前:beforeCreate();

监听数据变化:created();

虚拟dom加载完成前:beforeMount();

页面真实加载完成后:mounted();

数据改变前执行的函数:beforeUpdate();

数据改变后执行的函数:updated();

Vue实例销毁前:beforeDestroy();

Vue实例销毁后:destroyed()s