vue生命周期钩子函数

<div id="app">
    <h1>{{msg}}</h1>
</div>
<script src="./vue2.6.14.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            msg: "我要学vue"
        },
        /* 创建前 */
        beforeCreate() {
            /* 在这里 data中的属性值获取不到 */
            /* 但是能获取到vue的实例化对象 */
            /*  console.log('组件实例刚被创建',this,this.msg) */
        },
        /* 创建后 */
        created() {
            /* 组件实例刚创建完成，属性已经绑定，但是DOM还未生成，$le属性还不存在 */
            /* console.log(this.el,this.msg); */
            /* 你请求接口就是走这个钩子函数发出的 */
            /* 可以从ajax里面获取数据 */
            /* setTimeout(()=>{
                let data = "请求成功"
                this.msg = data;
            },500) */
        },
        /* 挂载前 */
        beforeMount() {
            /* 模板编译、挂载之前 */
            /* console.log(this.$el) */
            /* this.$el只是获取到了 但是没有挂载到模板上 */
            /* data里面的值是渲染不出来的 */
            /* console.log( document.getElementsByTagName('h1')[0] ); */
            /* console.log(document.getElementsByTagName('h1')[0].innerHTML) */
        },
        /* 挂载后 */
        mounted() {
            /* this.$el 获取到了 而且挂载到模板上 */
            /*  console.log(this.$el) */
            /* data里面的值是可以渲染出来的 */
            /*  console.log( document.getElementsByTagName('h1')[0] ); */
            /* console.log(document.getElementsByTagName('h1')[0].innerHTML) */
            /*  在dom的操作中适合在mounted里面去执行 */
        }
    });
    /* $el是vm实例化对象上使用 */
    /* console.log(vm.$el) */
</script>