生命周期函数

生命周期函数

在 beforeCreate 钩子函数调用的时候，是获取不到 props 或者 data 中的数据的，因为这些数据的初始化都在 initState 中。

然后会执行 created 钩子函数，在这一步的时候已经可以访问到之前不能访问到的数据，但是这时候组件还没被挂载，所以是看不到的。

接下来会先执行 beforeMount 钩子函数，开始创建 VDOM，最后执行 mounted 钩子，并将 VDOM 渲染为真实 DOM 并且渲染数据。组件中如果有子组件的话，会递归挂载子组件，只有当所有子组件全部挂载完毕，才会执行根组件的挂载钩子。

接下来是数据更新时会调用的钩子函数 beforeUpdate 和 updated，这两个钩子函数没什么好说的，就是分别在数据更新前和更新后会调用。

另外还有 keep-alive 独有的生命周期，分别为 activated 和 deactivated 。用 keep-alive 包裹的组件在切换时不会进行销毁，而是缓存到内存中并执行 deactivated 钩子函数，命中缓存渲染后会执行 actived 钩子函数。

最后就是销毁组件的钩子函数 beforeDestroy 和 destroyed。前者适合移除事件、定时器等等，否则可能会引起内存泄露的问题。然后进行一系列的销毁操作，如果有子组件的话，也会递归销毁子组件，所有子组件都销毁完毕后才会执行根组件的 destroyed 钩子函数。

总结
1、 beforeCreate：在实例初始化之后，数据观测(data observer) 和 event/watcher事件配置之前被调用，注意是之前，此时data、watcher、methods统统滴没有。

这个时候的vue实例还什么都没有，但是$route对象是存在的，可以根据路由信息进行重定向之类的操作。

2、 created：在实例已经创建完成之后被调用。在这一步，实例已完成以下配置：数据观测(data observer) ，属性和方法的运算，

3、watch/event 事件回调。然而，挂载阶段还没开始，el属性目前不可见。此时this.el属性目前不可见。此时this.data 可以访问，watcher、events、methods也出现了，若根据后台接口动态改变data和methods的场景下，可以使用。

4、 beforeMount：在挂载开始之前被调用，相关的 render 函数
首次被调用。但是render正在执行中，此时DOM还是无法操作的。我打印了此时的vue实例对象，相比于created生命周期，此时只是多了一个$el的属性，然而其值为undefined。

使用场景：页面渲染时所需要的数据，应尽量在这之前完成赋值。 mounted：在挂载之后被调用。在这一步 创建vm.el并替换el，并挂载到实例上。（官方文档中的,“如果root实例挂载了一个文档内元素，当mounted被调用时vm.el并替换el，并挂载到实例上。（官方文档中的,“如果root实例挂载了一个文档内元素，当mounted被调用时vm.el也在文档内” 这句话存疑）此时元素已经渲染完成了，依赖于DOM的代码就放在这里吧~比如监听DOM事件。

5、beforeUpdate：vm.data更新之后，虚拟DOM重新渲染和打补丁之前被调用。你可以在这个钩子中进一步地修改vm.data更新之后，虚拟DOM重新渲染和打补丁之前被调用。你可以在这个钩子中进一步地修改vm.data，这不会触发附加的重渲染过程。 updated：虚拟DOM重新渲染 和打补丁之后被调用。

当这个钩子被调用时，组件DOM的data已经更新，所以你现在可以执行依赖于DOM的操作。但是不要在此时修改data，否则会继续触发beforeUpdate、updated这两个生命周期，进入死循环！

6、.beforeDestroy：实例被销毁之前调用。在这一步，实例仍然完全可用。 实例要被销毁了，赶在被销毁之前搞点事情吧哈哈~

7、destroyed：Vue实例销毁后调用。此时，Vue实例指示的所有东西已经解绑定，所有的事件监听器都已经被移除，所有的子实例也已经被销毁。

注：beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed这几个钩子函数，在服务器端渲染期间不被调用。