探索vue的生命周期

<script>
    let vm = new Vue({
        el: "#app",
        data: {
            msg: "hello"
        },
        methods: {},
        //钩子函数和el，data，methods,filtes,computed属于同级别的成员
        beforeCreate: function () {
           // 都是undefined
            console.log("------------beforeCreate-----------");
            console.log("el:" + this.$el);
            console.log("data:" + this.$data);
            console.log("msg:" + this.msg);
        },
        created: function () {
            //el:undefined
            console.log("------------created-----------");
            console.log("el:" + this.$el);
            console.log("data:" + this.$data);
            console.log("msg:" + this.msg);

        },

        //挂载
        beforeMount: function () {
            //都有值
            // console.log("------------beforeMount-----------");
            // console.log("el:" + this.$el);
            // console.log("data:" + this.$data);
            // console.log("msg:" + this.msg);
        },
        mounted: function () {
            //都有值
            // console.log("------------mounted-----------");
            // console.log("el:" + this.$el);
            // console.log("data:" + this.$data);
            // console.log("msg:" + this.msg);
            this.$http.get("https://cnodejs.org/api/v1/topics",).then(
                res => {
                    let d = res.bodyText;
                    console.log(d.data);
                    console.log(this.msg = JSON.parse(d).data);
                }
            ).catch(
                function (res) {
                    console.log(res.status);
                }
            );
        },
        //修改:执行vm.msg="world"进行触发
        beforeUpdate: function () {
            //都有值
            console.log("------------beforeUpdate-----------");
            console.log("el:" + this.$el);
            console.log("data:" + this.$data);
            console.log("msg:" + this.msg);

        },
        updated: function () {
            //都有值
            console.log("------------updated-----------");
            console.log("el:" + this.$el);
            console.log("data:" + this.$data);
            console.log("msg:" + this.msg);
        },
        //销毁
        beforeDestroy: function () {
            //都有值
            console.log("------------beforeDestroy-----------");
            console.log("el:" + this.$el);
            console.log("data:" + this.$data);
            console.log("msg:" + this.msg);
        },
        destroyed: function () {
            //都有值
            console.log("------------destroyed-----------");
            console.log("el:" + this.$el);
            console.log("data:" + this.$data);
            console.log("msg:" + this.msg);
        }
    });
</script>