Explain the lifecycle in code

<! DOCTYPE html><html>
<head>
    <title></title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body>

<div id="app">
    <p>{{ message }}</p>
</div>

<script type="text/javascript">

    var app = new Vue({
        el: '#app'.data: {
            message : "Xavier is Zk"
        },
        beforeCreate: function () {
            console.group('beforeCreate ===============');
            console.log("%c %s"."color:red" , "el : " + this.$el); 
            console.log("%c %s"."color:red"."data : " + this.$data); 
            console.log("%c %s"."color:red"."message: " + this.message);
            console.groupEnd();
        },
        created: function () {
            console.group('created ===============');
            console.log("%c %s"."color:red"."el : " + this.$el);
            console.log("%c %s"."color:red"."data : " + this.$data);
            console.log("%c %s"."color:red"."message: " + this.message);
            console.groupEnd();
        },
        beforeMount: function () {
            console.group('beforeMount ===============');
            console.log("%c %s"."color:red"."el : " + (this.$el));
            console.log(this.$el);
            console.log("%c %s"."color:red"."data : " + this.$data);
            console.log("%c %s"."color:red"."message: " + this.message);
            console.groupEnd();
        },
        mounted: function () {
            console.group('mounted ===============');
            console.log("%c %s"."color:red"."el : " + this.$el);
            console.log(this.$el);
            console.log("%c %s"."color:red"."data : " + this.$data);
            console.log("%c %s"."color:red"."message: " + this.message);
            console.groupEnd();
        },
        beforeUpdate: function () {
            console.group('beforeUpdate ===============');
            console.log("%c %s"."color:red"."el : " + this.$el);
            console.log(this.$el);
            console.log("%c %s"."color:red"."data : " + this.$data);
            console.log("%c %s"."color:red"."message: " + this.message);
            console.groupEnd();
        },
        updated: function () {
            console.group('updated ===============');
            console.log("%c %s"."color:red"."el : " + this.$el);
            console.log(this.$el);
            console.log("%c %s"."color:red"."data : " + this.$data);
            console.log("%c %s"."color:red"."message: " + this.message);
            console.groupEnd();
        },
        beforeDestroy: function () {
            console.group('beforeDestroy ===============');
            console.log("%c %s"."color:red"."el : " + this.$el);
            console.log(this.$el);
            console.log("%c %s"."color:red"."data : " + this.$data);
            console.log("%c %s"."color:red"."message: " + this.message);
            console.groupEnd();
        },
        destroyed: function () {
            console.group('destroyed ==============');
            console.log("%c %s"."color:red"."el : " + this.$el);
            console.log(this.$el);
            console.log("%c %s"."color:red"."data : " + this.$data);
            console.log("%c %s"."color:red"."message: " + this.message)
            console.groupEnd(); }})</script>
</body>
</html>
Copy the code

The code runs as follows:

Running app.message = ‘Hello,World’ in Console triggers beforeUpdate and updated

Running app.$destroy() again in the Console triggers beforeDestroy and destroyed

Let’s go back to the official life cycle chart. It’s pretty clear, but I didn’t understand it at the beginning