组件创建期间的4个生命周期函数

97 阅读1分钟
beforeCreate(){
               //这是我们遇到的第一个生命周期函数,表示实例完全被创建出来之前,会执行他
            //    console.log(this.msg)
            // this.show();
            // 注意:在beforeCreate的生命周期函数执行的时候,data和methods的数据  都还没有被初始化
           },
           created(){
            //    console.log(this.msg);
            //    this.show();
               //在created里 data和methods的数据都已经被初始化好了
               //如果要调用methods 中的方法,或者操作 data中的数据 最早  只能在created中操作
           },
           beforeMount(){//这是遇到的第3个生命周期函数,表示 模板已经在内存中编辑完成了,但是尚未把模板渲染到页面中去
        //   console.log(document.querySelector("#app").innerHTML)
          // 在beforeMount 执行的时候,页面中的元素,还没有被真正的替换过来,只是之前写的一些模板字符串
           },
           mounted(){
               //这是遇到的第四个生命周期函数,表示,内存中的模板,已经真实的挂载到了页面中,用户已经可以看到渲染好的页面了
               console.log(document.querySelector("#app").innerHTML)
               //注意:mounted 是实例创建期间的最后一个生命周期函数,当执行完mounted 就表示实例已经被完全创建好了,此时,如果没有其他操作的话,这个实例,就静静的 躺在我们的内存之中 一动不动
            }