Vue的生命周期

当了解到生命周期就接触到了vue的重点，生命周期简单的说就是一生，vue的一生，vue的每个组件的一生 每个vue 实在在被创建的时候都要经过一系列的初始化过程

    例如：设置数据监听，编译模板，将实例挂载到dom之中并且在数据发生变化时更新
    生命周期函数/生命周期钩子函数
    在这个过程中运行一些叫做生命周期钩子的函数，这给用户在不同阶段添加自己代码的机会

vue的生命周期有十一个，一般常用的8个，先介绍一下着八个常用的生命周期，生命周期又叫生命周期函数，就和人类在什么时候干什么事一样，同样的人类在什么时候能得到什么那么在vue的生命周期中也是一样的，我们学习生命周期的时候了解到什么时候可以获取到什么，可以做什么，就大概学会生命周期了，废话不说先介绍一下八个生命周期（8个都是成对出现的）

• 组件加载（一般是初始化相关的内容）

  beforeCreate :在这个里面获取不到data中的数据，一般这个钩子不用（个人不常用）

  create ：这个时候就可以获取到data数据了，但是获取不到页面 一般在这个里面进行一些数据的网络请求

  //创建阶段
        // new Vue()
        //1.读取生命周期的相关函数但是没调用
        //2.调用beforCreate这个函数这是创建前的函数，在这个函数之中关于vue实例的属性methods都不能使用
        // 3.对添加数据观测，methods方法等一系列的配置进行识别
        //4.调用created函数 ，只能操作实例和实例相关的配置，不能操作dom
        //创建前
        beforeCreate(){
            console.log("beforeCreate..")
        },
        //创建之后
        created(){},

• 挂载（在页面进行挂载的时候）

beforeMount ：在页面加载完毕挂载之前就是el属性生效之前的一个函数一般来说这个函数只会触发一次，这个里面就可以获取到数据但是获取不到DOM，

mounted：挂载之后这个时候就可以获取到DOM了这个里面一般写一些dom操作（不过vue中的dom操作一般写的少都使用组件完成）

//挂载阶段

        // 5.判断是否有el挂载项的配置，如果没有那么就等待$mount(el)的执行
        //（如果这个$mount(el)也不执行的话那么这个vue就没有挂载就停在这里不再继续执行了）
        // 6.判断是否有temolate配置项目（就是HTML页面模板）如果有的话那么就直接编译temolate里面的模板
            //如果没有的话那么就把el的outerHtml当成template模板编译（就是页面上的自己写的html）
        //  ！！！这一步只是编译好模板编译好的还在js之中没有放到页面上
        //7.调用beforeMount（），这时候还用不了编译好的dom
        //8.使用在第六步编译好的dom替换页面中el对应的dom
        //9.调用mounted（），这个方法执行后就可以操作dom，dom是vue实例编译好的
                /* 一般在created中请求服务器数据 */
                /*一般在mounted的时候操作dom */
        //挂载前
        beforeMount(){},
        //挂载后
        mounted(){},

• 更新的时候（元素组件发生变化，数据发生变化）

beforeupdate:这个是数据发生变化之前的一个函数，一般用不上这个函数（个人感觉）这是可以多次触发的函数

updated：这个是函数数据发生变化之后的钩子函数在这个函数中一般对一些跟新内容进行操作

//更行阶段
        // 10.数据已近发生了变化如果写了监听那么监听就会被调用起来，并且dom用了这个数据继续执行下面的
        // 否者就是数据发生了变化
        // 11.执行beforeUpdate()dom的更新前(数据更新了但是dom并没有更新)
        // 12.重新渲染dom,更新dom
        //13. 执行updated()   =>更新后 ,dom也更新了

        //更新前
        beforeUpdate(){},
        //更新后
        updated(){},

• 销毁

beforeDestroy ：这个是组件销毁之前 一般在这个钩子中做一些数据请求的销毁在一些网络请求没完成的时候切换组件然后进行请求的取消（这个要注意如果使用了动态组件就是组件哦进行了缓存的时候不会再触发这个钩子的因为缓存的组件就没有销毁）

destroyed：这个是销毁之后的组件（个人感觉这个一般没啥用）

//销毁阶段
        // 14.执行app.$destroy()
        // 15. 调用beforeDestroy()  =>销毁前
            // (就是移出watch监听,移出自身的子组件凡是vue之前带来的副作用都在这里进行移除)

        //16.调用destroyed()  =>销毁后的函数
            //销毁前
        beforeDestroy(){},
        //销毁后
        destroyed(){},
    });

附上一张中文图片吧

！！!

在使用生命周期碰到子组件的时候要注意执行的顺序
先执行父组件的 前三个钩子，然后执行子组件的钩子前四个，然后在执行父组件的钩子（这么说有点绕，还是上图吧）