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>