Vue的生命周期

Vue的生命周期

### vue的生命周期是什么？

• vue的生命周期是指vue的实例对象的创建之初到销毁的过程。vue所有的功能实现都是围绕着生命周期进行的，在生命周期的不同阶段调用对应的钩子函数实现组件数据管理和dom渲染两大重要功能。

vue的生命周期有11个过程，不过其中用的比较多的是8个左右

1. beforCreate：vue对象创建之前。对应的钩子函数为beforeCreate。此阶段为实例初始化之后，此时的数据观察和事件机制都未形成，不能获得DOM节点。vue的el和data数据都是undefined

    <div id="app">
           <p>{{name}}</p>
       </div>
       <script>
           const app = new Vue({
               el:"#app",
               data:{
                   name:"xumo"
               },
               //vue创建之前
               beforeCreate:function(){
                   console.group("vue创建之前");
                   console.log(this.$el,this.$data);
               }
           });
       </script>
   

2. created:vue创建之后。对应的钩子函数为created。在这个阶段vue实例未初始化，el为undefined，data数据已经完成初始化，一般请求数据就是在这一阶段进行。

    //vue创建之后
               created:function(){
                   console.group("vue创建之后");
                   console.log(this.$el,this.$data.name);
               }
   

3. beforeMount：vue挂载之前。完成了el和data的初始化。el还是{{msg}}应用的virtual Dom（虚拟dom）技术，先把坑给占住

   //vue挂载之前
               beforeMount:function(){
                   console.group("vue挂载之前");
                   console.log(this.$el,this.$data.name);
               }
   

4. mounted：vue挂载完成。把el{{msg}}里的数据渲染出来

   //vue挂载之后
                mounted:function(){
                   console.group("vue挂载之后");
                   console.log(this.$el,this.$data.name);
               }
   

5. beforeUpdate：视图更新前。在这一阶段，vue遵循数据驱动DOM的原则。beforeUpdate函数在数据更新后虽然没立即更新数据，但是DOM中的数据会改变，这是Vue双向数据绑定的作用。

   //vue视图更新之前
               beforeUpdate:function(){
                   console.group("vue视图更新之前");
                   console.log(this.$el,this.$data.name);
               }
   

6. updated：视图更新之后。对应的钩子函数是updated。在这一阶段DOM会和更改过的内容同步

   //vue视图更新之后
               updated:function(){
                   console.group("vue视图更新之后");
                   console.log(this.$el,this.$data.name);
               }
   

7. beforeDestroy：vue实例销毁前，在销毁前，会触发beforeDestroy钩子函数，还是可以完成之前的操作

   beforeDestroy:function(){
                   console.group("vue销毁之前");
                   console.log(this.$el,this.$data.name);
               }
   

8. destroyed：vue实例销毁之后。vue不在对此动作app.name进行响应了，但是原先生成的dom元素还存在，可以这么理解，执行了destroy操作，后续就不在受vue控制了

   //vue销毁后
               destroyed:function(){
                   console.group("vue销毁之后");
                   console.log(this.$el,this.$data.name);
               }