Vue2.0关于生命周期和钩子函数

时间:2022-01-20 19:08:55

Vue生命周期简介:

Vue2.0关于生命周期和钩子函数
 

 

Vue1.0+和Vue2.0在生命周期钩子上的区别还是很大的,如下:

 

Vue2.0关于生命周期和钩子函数
 

代码验证:

<!DOCTYPE html>

<html>

     <head>

        <meta charset="utf-8">

        <title></title>

        <script type="text/javascript"  src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>

    </head>

  <body>

        <div id="app">

           <p>{{ message }}</p>

        </div>

       <script type="text/javascript">

         var app = new Vue({

            el:'#app',

            data:{

               message:"Toney is a girl"

            },

            beforeCreate:function(){

                 console.group('beforeCreat  创建前的状态======》');  //控制台输出的语句产生不同的层级嵌套关系

                console.log("%c%s","color:red","el : "+this.$el);  //undefined,  %c字符%s字符串

                console.log("%c%s","color:red","data : "+this.$data");  //undefined

                console.log("%c%s","color:red","message: "+this.message);  //undefined

            },

           created:function(){

               console.group("created 创建完毕状态======》");

               console.log("%c%s","color:red","el : "+this.$el);  //undefined

               console.log("%c%s","color:red","data : "+this.$data");  //已被初始化

               console.log("%c%s","color:red","message: "+this.message);  //已被初始化

           },

           beforeMount:function(){

               console.group("beforeMount  挂载前状态======》");

               console.log("%c%s","color:red","el : "+this.$el);  //已被初始化

               console.log("%c%s","color:red","data : "+this.$data");  //已被初始化

               console.log("%c%s","color:red","message: "+this.message);  //已被初始化

           },

           mounted:function(){

              console.group("mounted 挂载结束状态======》");

              console.log("%c%s","color:red","el : "+this.$el);  //已被初始化

              console.log("%c%s","color:red","data : "+this.$data");  //已被初始化

              console.log("%c%s","color:red","message: "+this.message);  //已被初始化

           },

          beforeUpdate:function(){

              console.log("beforeUpdate 更新前状态======》");

              console.log("%c%s","color:red","el:"+this.$el);

              console.log("%c%s","color:red","data:"+this.$data);

              console.log("%c%s","color:red","message:"+this.$message);

          },

          updated:function(){

             console.log("updated  更新完成状态======》");

             console.log("%c%s","color:red","el:"+this.$el);

             console.log("%c%s","color:red","data:"+this.$data);

             console.log("%c%s","color:red","message:"+this.$message);

          },

          beforeDestory:function(){

             console.log("beforeDestory 销毁前状态======》");

             console.log("%c%s","color:red","el:"+this.$el);

             console.log("%c%s","color:red","data:"+this.$data);

             console.log("%c%s","color:red","message:"+this.$message);

          },

          destoryed:function(){

              console.log("destoryed 销毁完成状态======》");

              console.log("%c%s","color:red","el:"+this.$el);

              console.log("%c%s","color:red","data:"+this.$data);

             console.log("%c%s","color:red","message:"+this.$message);

          }

        })

      </script>

  </body> 

Vue2.0关于生命周期和钩子函数
 

关于更新

在chrome console中输入命令:

 

app.message="I am a girl"

 

Vue2.0关于生命周期和钩子函数
 

关于销毁

在chrome console中输入命令:

app.$destroy();

 

Vue2.0关于生命周期和钩子函数
 

生命周期总结:

beforecreate: 例子:可以在这加个loading事件;

created:在这结束loading,还做一些初始化,实现函数自执行;

mounted: 在这发起后端请求,拿回数据,配合路由钩子做一些事情;

beforeDestory: 你确认删除XX吗? destoryed :当前组件已被删除,清空相关内容。