vue生命周期函数

vue生命周期函数（声明周期钩子） click
created、mounted、updated、destroyed、四个before
首先需要了解模板与挂载点：click
创建期间的生命周期函数：
beforecreated：实例刚在内存中被创建出来，还没有初始化好data和methods属性
created：data、methods已经创建，尚未开始编译模板
beforeMounted：完成模板编译，但还没有挂载到页面
mounted：将编译好的模板挂载到页面指定容器中显示
运行期间生命周期函数：
beforeUpdated：状态更新之前执行此函数，data中状态是最新的，界面上数据还是旧的，此时并未开始绘制DOM节点
updated：实例更新完毕后调用此函数，data与也界面均已完成更新，界面已被重新渲染
销毁期间生命周期函数：
beforeDestory：实例销毁前调用，此时实例仍完全可用
destoryed：Vue实例销毁后调用，调用后Vue实例指示的所有东西都会解绑，所偶的事件监听器都会被移除，所有子实例也会被销毁。

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.getElementById('h3').innerText);
    //在beforeMount执行的时候，页面中的元素，还没有被真正替换过来，只是之前的一些模板字符串
},
mounted(){
   //这是遇到的第4个生命周期函数，表示内存中的模板，已经真实的挂载到页面中，用户已经可以看到渲染好的页面了
   //  console.log(document.getElementById('h3').innerText);
    //注意：mounted 是实例创建期间最后一个生命周期函数，当执行完mounted就表示实例已经被完全创建好了，
    //此时如果没有其它操作的话，这个实例，就静静的躺在我们的内存中，一动不动
},


//接下来的是运行中的两个事件
beforeUpdate(){ //这时候，表示我们的界面还没有被更新【数据被更新了吗？ 数据肯定别更新了】

    // console.log('界面上元素的内容：'+ document.getElementById('h3').innerText);
    // console.log('data中的msg数据是：'+ this.msg);
    //得出结论：当执行beforeUpdate 的时候，页面中的显示的数据，还是旧的，此时data数据是最新的，页面尚未和最新的数据保持同步

},

updated(){

    console.log('界面上元素的内容：'+ document.getElementById('h3').innerText);
    console.log('data中的msg数据是：'+ this.msg);
    //updated 时间执行的时候，页面和data数据已经保持同步了，都是最新的

}

附上传说中越学越香的一张图