Vue的生命周期

定义：VUE实例从创建到销毁的过程，即指创建，初始化数据，编译模板，挂载，Dom到渲染、更新到渲染、销毁等一系列过程

一、创建阶段

1，创建前(beforeCreate) ：(此时无法访问data中的数据，methods中的方法)       

        构造函数生成VUE实例（此时只有默认的一些生命周期函数和默认事件）

        进行数据观测，事件和生命周期钩子进行初始化

2，创建后(created) ：(可以访问data中的数据，methods中的方法，vm.$el并没有被创建)       

        完成数据观测，属性与方法的运算，event、watch事件回调的配置，可调用methods中的方法，访问和修改data数据触发响应式渲染dom，可通过computed和watch完成数据计算

        判断是否有el对象，若无对象则停止编译，直到调用vm.$mount(el)才会停止编译

        若有el对象，则判断是否有template模板，有模板的话将模板转化为render函数，通过render函数去渲染dom树，无模板则选择外层Html作为模板。

        优先级：render > template > outerHTML       

3，载入前(beforeMount) ：(此时页面元素并未真正替换)

        模板已经在内存中编译好了，但是尚未挂载到页面当中，页面还是旧页面

        在挂载前被调用render函数首次被调用生成虚拟dom，创建vue实例下的$el(虚拟)并将其替换真正的dom

4，载入后(mounted)  ：

        (实例创建期间的最后一个生命周期函数，执行完mounted表示实例已经完全创建结束，进入运行阶段)

        (如果要通过某些插件操作页面上的Dom，最早在mounted中运行)

        挂载完成，dom树已经完成渲染到页面，可进行dom操作

二、运行阶段

5，更新前(beforeUpdate) ：

        数据有更新被调用，此时view并未更新

        如果在beforeUpdate中再次修改数据，不会触发更新方法

        执行数据从data(Model层) -> view(视图层)的更新

6，更新后(updated) ：

        view层更新完成，虚拟dom重新渲染补丁，以最小dom开支来重新渲染dom

        如果在beforeUpdate中再次修改数据，会触发更新方法(beforeUpdate,updated)

三、销毁阶段

7，销毁前(beforeDestroy) ：

        实例在销毁前调用，此时实例属性与方法仍可访问

        实例身上所有的data和所有的methods以及过滤器、指令......都处于可用状态，还没有真正销毁

8，销毁后(destroyed) ：

        完全销毁一个实例，可清理它与其他实例的连接，解绑它的全部指令及事件监听器

        并不能清楚Dom，仅仅销毁实例。