采用实例演示Vue生命周期

Vue的生命周期

主要划分的时期为
1、before Create
2、created
3、before Mount
4、mounted
5、before Update
6、updated
7、before Destroy
8、destroyed
下面对这些时期一一分析

演示使用的Vue实例

var vm=new Vue({
           el:'#app',
           data:{
               msg:"ok"
           },
           methods:{
               show(){
                   console.log("执行show方法");                
               }
           },

before Create时期

        var vm=new Vue({
           el:'#app',
           data:{
               msg:"ok"
           },
           methods:{
               show(){
                   console.log("执行show方法");                
               }
           },
           beforeCreate() {
               console.log(this.msg);
               this.show();
               
           },

此时的msg属性是undefined同时报错说show不是一个函数说明此时
Vue实例刚从内存中被创建出来，此时还没有初始化好data和methods属性

created

        var vm=new Vue({
           el:'#app',
           data:{
               msg:"ok"
           },
           methods:{
               show(){
                   console.log("执行show方法");                
               }
           },
           beforeCreate() {
            //    console.log(this.msg);
            //    this.show();
               
           },
           created() {
                console.log(this.msg);
                this.show();
                console.log(document.getElementById('h3').innerText)
           },

可以看到这个时候data和methods已经创建好了调用是没有问题的，正常显示。但是此时还没有开始编译模板，所以此时显示的是没有加载好的模板{{msg}}。

before Mount

        var vm=new Vue({
           el:'#app',
           data:{
               msg:"ok"
           },
           methods:{
               show(){
                   console.log("执行show方法");                
               }
           },
           beforeCreate() {
            //    console.log(this.msg);
            //    this.show();
               
           },
           created() {
                // console.log(this.msg);
                // this.show();
                // console.log(document.getElementById('h3').innerText);
           },
           beforeMount() {
               console.log(document.getElementById('h3').innerText);
               
           },

此时已经完成了模板的编译但是还没有挂载到页面中所以此时显示的任然是模板而不是最后的ok

mounted

        var vm=new Vue({
           el:'#app',
           data:{
               msg:"ok"
           },
           methods:{
               show(){
                   console.log("执行show方法");                
               }
           },
           beforeCreate() {
            //    console.log(this.msg);
            //    this.show();
               
           },
           created() {
                // console.log(this.msg);
                // this.show();
                // console.log(document.getElementById('h3').innerText);
           },
           beforeMount() {
            //    console.log(document.getElementById('h3').innerText);
               
           },
           mounted() {
                console.log(document.getElementById('h3').innerText);
           },
           
        });

此时，已经将编译好了的模板挂载到了页面的指定的容器中显示所以此时显示的就是ok而不是{{msg}}

before Update

        var vm=new Vue({
           el:'#app',
           data:{
               msg:"ok"
           },
           methods:{
               show(){
                   console.log("执行show方法");                
               }
           },
           beforeCreate() {
            //    console.log(this.msg);
            //    this.show();
               
           },
           created() {
                // console.log(this.msg);
                // this.show();
                // console.log(document.getElementById('h3').innerText);
           },
           beforeMount() {
            //    console.log(document.getElementById('h3').innerText);
               
           },
           mounted() {
                console.log(document.getElementById('h3').innerText);
           },
           beforeUpdate() {
               console.log("界面上的msg："+document.getElementById('h3').innerText);
               console.log("data中的数据msg:"+this.msg);
               
           },
           
        });

注意这个阶段和后面的update阶段都是属于页面运行中的生命周期，并且只有在页面数据发生改变时才会进入该阶段。可以看到此时页面的数据是ok而data中的数据为No，这是因为此时还没有开始重新加载DOM节点。

update

      var vm=new Vue({
           el:'#app',
           data:{
               msg:"ok"
           },
           methods:{
               show(){
                   console.log("执行show方法");                
               }
           },
           beforeCreate() {
            //    console.log(this.msg);
            //    this.show();
               
           },
           created() {
                // console.log(this.msg);
                // this.show();
                // console.log(document.getElementById('h3').innerText);
           },
           beforeMount() {
            //    console.log(document.getElementById('h3').innerText);
               
           },
           mounted() {
                console.log(document.getElementById('h3').innerText);
           },
           beforeUpdate() {
            //    console.log("界面上的msg："+document.getElementById('h3').innerText);
            //    console.log("data中的数据msg:"+this.msg);
               
           },
           updated () {
                console.log("界面上的msg："+document.getElementById('h3').innerText);
                console.log("data中的数据msg:"+this.msg);
           },
           
        });

此时页面上的数据和data中的数据是一致的，这是因为实例更新完毕后调用此函数，此时data中的状态值和界面上显示的数据都已经完成了更新，界面已经被重新渲染好了。

before Destroy

因为不知道如何进入这个阶段所以这个阶段就没有实例显示了，最后一个阶段也是。
实例销毁前调用，在这个阶段实例任然可以使用。

destroy

Vue实例销毁后使用，调用后，Vue实例指示的所有东西都会解绑，所有的事件监听都会被移除，所有的子实例也会被销毁。