生命周期钩子函数

生命周期钩子函数一共经历四个过程：

1. 创建时期

*beforeCreated()*这个阶段表示实例完全被创建出来之前，会执行它，注意：在beforeCreated生命周期函数执行的时候，data和methods中的数据都还没有初始化，现在输不出data和methods中的数据。

created钩子函数：在created中，data和methods都已经初始化好了，如果要调用methods中的方法，或者操作data中的数据，最早在created中操作。当vue实例被创建的时候，会触发该方法，在此函数中无法调用$el，即无法获取被绑定的根元素。

2. 挂载时期

beforeMounted：表示模板已经在内存中编译完成了，但是尚未把模板渲染到页面中去，这里表示vue开始表一模板，把vue代码中的那些指令进行执行，最终在内存中生成一个编译好的最终的模板字符串，然后，把这个模板字符串，渲染为内存中的dom，此时，只是在内存中渲染好了模板，并没有把模板挂载到页面中去。

mounted钩子函数： 表示内存中的模板真实的挂载到了页面中，用户已经可以看到渲染好的页面了，注意：mounteed是实例创建期间最后一个生命周期函数，当执行完mounted就表示实例已经被完全创建好了，此时，如果没有其他的操作的话，这个实例，就静静的躺在内存中了，此时组将已经脱离了创建阶段，进入到了运行阶段。当实例被挂载到dom树上时会触发mounted方法，即数据已经渲染完毕，已经在页面上显示出来了，此函数之后都可以获取到$el。如果要通过某些插件操作页面中的dom节点，最早要在mounted中进行。

下面是组件运行阶段的生命周期函数只有两个，beforeUpdate和updated，这两个事件，会根据data中数据的改变，有选择性的触发0次或者多次。

3. 修改时期

beforeUpdate：表示页面还没有被更新，数据已经被更改了，页面显示的数据还是旧的，没有被改变，而data中的数据是更改后的数据，所以数据不一致。

updated：事件执行的时候，页面和data数据已经保持一致了，都是最新的。

4. 销毁时期

当执行beforeDestroyed钩子函数的时候，就已经从运行阶段，vue实例进入到销毁阶段，当执行beforeDestroy的时候，实例身上所有的data和所有的methods，以及过滤器、指令都处于可用的状态，此时，还没有真正执行销毁的过程。

destroyed：当执行到destroyed函数的时候，组件已经被完全销毁了，此时，组件中的所有数据，方法、指令过滤器都已经不可用了。

组件其实是个迷你版的vue实例，组件与vue实例一样，在生成的过程中，会自动调用生命周期钩子函数，常用的生命周期钩子函数也就是created和mounted这两个。