vue的生命周期

        对vue生命周期的理解:

                从创建到销毁的整个过程就是Vue实例的生命周期

        

        钩子函数:特定的时间,我们可以通过特定的时间去操作

                分成四个阶段:初始化阶段,挂载阶段,更新阶段,销毁阶段

         初始化阶段:      

 可以将上图分为几个步骤:

        1.new Vue()   Vue的实例化(包括组件生成)

        2.Init Event & Lifecycle  初始化事件和生命周期函数

        3.beforeCreat(){}  生命周期函数的钩子函数 ,可操作

        4.Init injection&reactivity Vue内部添加data和methods

        5.created(){}   生命周期函数的钩子函数 ,可操作

        6.编译模板阶段 --开始分析

        7.Has el option? 是否有el选项,检查要挂到哪个位置

                7.1没有,调用$mount()方法

                7.2有,继续检查template选项

挂载阶段:

 

        1.template选项检查

                1.1有-编译template返回render渲染函数

                1.2无-编译el选项对应标签作为template(要渲染的模板)

        2.虚拟DOM挂载成真实DOM之前

        3.beforeMount 生命周期函数的钩子函数 ,可操作

        4.Create ... 把虚拟DOM和渲染的数据一并挂到真是DOM上

        5.真是DOM挂载完毕

        6.mounted 生命周期函数的钩子函数 ,可操作

更新阶段:

        

         

        1. 当data里数据改变, 更新DOM之前

        2. beforeUpdate – 生命周期函数的钩子函数 ,可操作

        3. Virtual DOM…… – 虚拟DOM重新渲染, 打补丁到真实DOM

        4. updated – 生命周期函数的钩子函数 ,可操作

        5. 当有data数据改变 – 重复这个循环

 销毁阶段:

        

        

        1. 当$destroy()被调用 – 比如组件DOM被移除(例v-if)

        2. beforeDestroy – 生命周期函数的钩子函数 ,可操作

        3. 拆卸数据监视器、子组件和事件侦听器

        4. 实例销毁后, 最后触发一个钩子函数

        5. destroyed –生命周期函数的钩子函数 ,可操作

        tips:vue提供了一个方法可以销毁自身

               this.$destroyed()先卸载内部组件,再卸载本身