vue 生命周期函数

<div id="app">
    {{msg}}
    <input type="text" v-model="msg">
</div>

new Vue({
        el: '#app',
        data: {
            msg: 'msg'
        },
        methods: {
            hello: function () {
                console.log('hello');
            }
        },
        beforeCreate() {
        //实例完全被创建后执行该函数
        //此时data 和 methods 中的 数据都还没有没初始化
        //msg undefined
            console.log(this.msg, 'beforeCreate');  
        },
        created() {
        //此时data 和 methods 中的 数据已经初始化
        //msg ：msg
            console.log(this.msg, 'created');
        },
        beforeMount() {
        //模板以编译好，但是未渲染至页面
        //  {{msg}} 尚未被解析
            console.log(document.getElementById('app').innerHTML, 'beforeMount');
        },
        mounted() {
        // 模板已渲染至页面，
        //  {{msg}} 被解析完成
            console.log(document.getElementById('app').innerHTML, 'mounted');
        },
        beforeUpdate() {
           //数据改变成功，但是页面没有被重新渲染
            console.log(this.msg, document.getElementById('app').innerHTML, 'beforeUpdate');
        },
        updated() {
         //数据改变成功，但是页面被重新渲染
            console.log(this.msg, document.getElementById('app').innerHTML,'update');
        },
        beforeDestroy() {
        //methods data 指令 过滤器 仍可用
            console.log('beforeDestroy');
        },
        destroyed() {
            console.log('destroyed');
        }
    });