vue的学习之路（Vue 生命周期）

new Vue({   
el:"",
data:{},
computed:{},
methods:{}
//声明周期函数定义位置
beforeCreate(){
}
})

    beforeCreate(){
      console.log("beforeCreate"+this.msg);
    }

   created(){
      console.log("Created: "+this.msg);
    }

  beforeMount(){   //el指定作用范围还是原始的内容
      console.log("beforeMount: "+document.getElementById("app").innerText);
    }

  mounted(){  //el指定的作用范围，已经被虚拟化处理 并替换之后的结果
      console.log("mounted: "+document.getElementById("app").innerText);
    }

  beforeUpload(){
      console.log("beforeUpdate:"+this.name);
      console.log("beforeUpdate:"+document.getElementById("n").innerText);
    }

update(){
    console.log("update:"+this.msg);
    console.log("update:"+document.getElementById("app").innerText);
  }

  beforeDestory(){//7.生命周期第七个函数,该函数执行时,Vue中所有数据 methods componet 都没销毁
     console.log("vue实例开始销毁")
    },
    destoryed(){ //8.生命周期的第八个函数,该函数执行时,Vue实例彻底销毁
      console.log("vue实例已经销毁，双向绑定失效")
    }

# Vue生命周期总结
- 1.初始化阶段
        beforeCreate(){ //1.生命周期中第一个函数,该函数在执行时Vue实例仅仅完成了自身事件的绑定和生命周期函数的初始化工作,Vue实例中还没有 Data el methods相关属性
        console.log("beforeCreate: "+this.msg);
        },
        created(){ //2.生命周期中第二个函数,该函数在执行时Vue实例已经初始化了data属性和methods中相关方法
        console.log("created: "+this.msg);
        },
        beforeMount(){//3.生命周期中第三个函数,该函数在执行时Vue将El中指定作用范围作为模板编译
        console.log("beforeMount: "+document.getElementById("sp").innerText);
        },
        mounted(){//4.生命周期中第四个函数,该函数在执行过程中,已经将数据渲染到界面中并且已经更新页面
        console.log("Mounted: "+document.getElementById("sp").innerText);
        }
- 2.运行阶段
        beforeUpdate(){//5.生命周期中第五个函数,该函数是data中数据发生变化时执行 这个事件执行时仅仅是Vue实例中data数据变化页面显示的依然是原始数据
        console.log("beforeUpdate:"+this.msg);
        console.log("beforeUpdate:"+document.getElementById("sp").innerText);
        },
        updated(){    //6.生命周期中第六个函数,该函数执行时data中数据发生变化,页面中数据也发生了变化  页面中数据已经和data中数据一致
        console.log("updated:"+this.msg);
        console.log("updated:"+document.getElementById("sp").innerText);
        },
- 3.销毁阶段
        beforeDestory(){//7.生命周期第七个函数,该函数执行时,Vue中所有数据 methods componet 都没销毁
        },
        destoryed(){ //8.生命周期的第八个函数,该函数执行时,Vue实例彻底销毁
        }