Vue生命周期很清晰明了，可以看出整个Vue的声明周期流程是怎样的，但是并没有做出具体的标注，每一个步骤还是缺少详细说明

# Vue的声明周期
首先看一下官方给出的声明周期图示

很清晰明了，可以看出整个Vue的声明周期流程是怎样的，但是并没有做出具体的标注，每一个步骤还是缺少详细说明，下面以实例来探究一下。

首先先上源码，有兴趣的同学也可以自己来测试或是添加新的方法进去。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
</head>

<body>
    <div id="app">
        <h1 id="bh">{{msg}}</h1>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "good!"
            },
            methods: {
                hello:function(){
                    console.log("hello world")
                },
                updateData:function(){
                    this.msg="not good!!!"
                }
            },
            beforeCreate: function () {
                console.log('beforeCreated----start')
                console.log(this.msg)
                this.hello()
                console.log('beforeCreated----end')
            },
            created: function () {
                console.log('created----start')
                console.log(this.msg)
                this.hello()
                console.log('created----end')
            },
            beforeMount: function () {
                console.log('beforeMount----start')
                console.log(document.getElementById('bh').innerText)
                console.log('beforeMount----end')
            },
            mounted: function () {
                console.log('mounted----start')
                console.log("before update: " + document.getElementById('bh').innerText)
                this.updateData()
                console.log("after update: " + document.getElementById('bh').innerText)
                console.log("msg in data: " + this.msg)
                console.log('mounted----end')
            },
            beforeUpdate: function () {
                console.log('beforeUpdate----start')
                console.log(document.getElementById('bh').innerText)
                console.log("msg in data: " + this.msg)
                console.log('beforeUpdate----end')
            },
            updated: function () {
                console.log('updated----start')
                console.log(document.getElementById('bh').innerText)
                console.log("msg in data: " + this.msg)
                console.log('updated----end')
            },
            beforeDestroy: function () {
                console.log('beforeDestroy----start')
                console.log('beforeDestroy----end')
            },
            destroyed: function () {
                console.log('destroyed----start')
                console.log('destroyed----end')
            }

        })
    </script>
</body>

</html>