Vue的生命周期

Vue的生命周期

什么是生命周期？

一个组件从开始到最后消亡所经历的各种状态，就是一个组件的生命周期

1、beforeCreate(创建前)

说明：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
注意：此时DOM没有渲染，无法获取 data中的数据、methods中的方法。但是$route已存在，可以根据路由信息进行重定向等操作。

2、 created(创建后)

说明：这是一个常用的生命周期，可以访问data，使用watcher、events、methods，也就是说 数据观测(data observer) 和event/watcher 事件配置 已完成。该阶段允许执行http请求操作，但DOM没有渲染。

3、 beforeMount(挂载前)

说明：在挂载开始之前被调用,此时无法获取到el中的DOM元素，相关render函数首次被调用，此时是渲染DOM元素的前一个生命周期，下一个生命周期DOM开始渲染。

4、 mounted(挂载后)

此时，vue实例已经挂载到页面中，可以获取到el中的DOM元素，执行render函数生成虚拟dom，创建真实dom替换虚拟dom，并挂载到实例。可以操作dom，比如事件监听。

5、beforeUpdated(更新前)

vm.data更新之后，虚拟dom重新渲染之前被调用。在这个钩子函数中可以修改vm.data，这不会触发附加的重渲染过程。

6、updated(更新后)

组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作，虚拟dom重新渲染后调用，若再次修改$vm.data，会再次触发beforeUpdate、updated，进入死循环。

7、beforeDestroy(销毁前)

Vue实例被销毁前调用，也就是说在这个阶段还是可以调用实例的。使用场景比如：实例销毁之前，执行清理任务，比如：清除定时器等

8、destroyed(销毁后)

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

发送数据请求：

一般在，created，mounted 中都可以发送数据请求，但是，大部分时候，会在created发送请求。如果希望页面首次渲染的数据来自后端，可以把请求放在created中，因为此时data已经挂在到Vue实例了。

优点，第一点：能更快获取到服务端数据，减少页面加载时间；
第二点：放在 created 中有助于一致性，因为ssr 不支持 beforeMount 、mounted 钩子函数。