Vue生命周期

时间：2018-09-12 19:54:06 阅读：172 评论：0 收藏：0 [点我收藏+]

标签：function 就是 ted cycle type ... 渲染代码状态

一，vue生命周期

技术分享图片

生命周期的钩子 LifeCycle hooks

技术分享图片

执行顺序及结果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    {{name}}
</div>
<script src="vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data:{
            name: "ggg"
        },
        methods: {
            my_init: function () {
                console.log(666)
            }
        },
        beforeCreate(){
            console.group("beforeCreate....................");
            console.log("el:", this.$el);
            console.log("data:", this.$data);
            console.log("name:",this.name );
            console.log("function:", this.my_init);
        },
        created(){
            console.group("created....................");
            console.log("el:", this.$el);
            console.log("data:", this.$data);
            console.log("name:",this.name );
            console.log("function:", this.my_init);
        },
        beforeMount(){
            console.group("beforeMount....................");
            console.log("el:", this.$el);
            console.log("data:", this.$data);
            console.log("name:",this.name );
            console.log("function:", this.my_init);
        },
        mounted(){
            console.group("mounted....................");
            console.log("el:", this.$el);
            console.log("data:", this.$data);
            console.log("name:",this.name );
            console.log("function:", this.my_init);
        },
        beforeUpdate(){
            console.group("beforeUpdate....................");
            console.log("el:", this.$el);
            console.log("data:", this.$data);
            console.log("name:",this.name );
            console.log("function:", this.my_init);
        },
        updated(){
            console.group("updated....................");
            console.log("el:", this.$el);
            console.log("data:", this.$data);
            console.log("name:",this.name );
            console.log("function:", this.my_init);
        },
        beforeDestroy(){
            console.group("beforeDestroy....................");
            console.log("el:", this.$el);
            console.log("data:", this.$data);
            console.log("name:",this.name );
            console.log("function:", this.my_init);
        },
        destroyed(){
            console.group("destroyed....................");
            console.log("el:", this.$el);
            console.log("data:", this.$data);
            console.log("name:",this.name );
            console.log("function:", this.my_init);
        },
    })

</script>
</body>
</html>