vue生命周期钩子函数

官网生命周期图

vue的八种生命周期钩子函数
组件从创建到销毁的一系列过程叫做组件的声明周期。
vue在整个生命周期里面提供了一些函数，可以在内部实现一些业务逻辑，
并且这些函数会在一些特定的场合下去执行。（在生命周期的某一个时刻进行触发）

组件的生命周期大体可以分为三个阶段： 初始化、运行中、销毁
        初始化阶段：beforeCreate created beforeMount （render） mounted
        运行中阶段：beforeUpdate updated
        销毁阶段：  beforeDestroy destroyed

1. 初始化阶段
   1.一个组件或者实例的生命周期都是从new开始的

   2.实例化之后，内部会做一些初始化的事件与生命周期相关的配置

   3.beforeCreate这个钩子函数初始化的时候就会执行，但是数据是获取不到的，并且真实dom元素也是没有渲染出来的
   4.created钩子函数内部可以访问到数据了，但是页面当中真实dom节点 还是没有渲染出来，在这个钩子函数里面，可以进行相关初始化事件的绑定、发送ajax操作，当组件还没有挂载完毕之前，更改数据的话，是不会触发运行时钩子函数的执行！

   5.接下来的过程，就是组件或者实例去查找各自的模板结构，然后将其编译成虚拟dom

   6.beforeMount代表dom马上就要被渲染出来了，但是却还没有真正的渲染出来， 这个钩子函数与created钩子函数用法基本一致，可以进行相关初始化事件的绑定、发送ajax操作

   7.mounted钩子函数是挂载阶段的最后一个钩子函数，数据挂载完毕，真实dom元素也已经渲染完成了，这个钩子函数内部可以做一些实例化相关的操作 （拖拽）

2. 运行中阶段
   1.这个钩子函数初始化的不会执行，当组件挂载完毕的时候，并且当数据改变的时候，才会立马执行，这个钩子函数获取dom的内容是更新之前的内容

   2.这个钩子函数获取dom的内容是更新之后的内容，生成新的虚拟dom，新的虚拟dom与之前的虚拟dom进行比对，差异之后，就会进行真实dom渲染。在updated钩子函数里面就可以获取到因diff算法比较差异得出来的真实dom渲染了。

3. 销毁阶段
   1.当组件销毁的时候，就会触发，这个钩子函数代表销毁之前，可以做一些善后操作，可以清除一些初始化事件、定时器相关的东西。

   2.组件销毁的时候执行，watch/数据劫持等功能已经完全丧失