Vue生命周期整理。

直奔主题

1.vue 生命周期

什么是 Vue 生命周期？

Vue实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载DOM-渲染、更新-渲染、卸载等一系列过程，我们称这是Vue的生命周期

Vue 生命周期的作用是什么？

它的生命周期共有多个事件钩子，让我们在控制整个Vue实例的过程中容易形成更好的逻辑。

Vue 生命周期总共有几个阶段？第一次页面加载会触发哪几个钩子？

它可以总共分为8个阶段，创建前后，载入前后，更新前后，销毁前后。

第一次页面加载是会触发beforeCreate，created，beforeMount，mounted这几个钩子

DOM在哪个周期中渲染完成？

DOM渲染在mounted中就已经完成了。

每个生命周期适合哪些场景？生命周期钩子的一些使用方法。

 beforeCreate：可以在这里加上一个loading事件，在加载实例时触发。在此阶段vue实例的挂载元素el和数据对象data都是undefined，还没有初始化。

created：初始化完成时的事件写在这里，例如在此结束loading事件，异步请求也可以在这里调用。在此阶段vue实例的数据对象data有了，可以访问里面的数据和方法，未挂载到DOM，el还没有。

mounted：挂载元素，获取到DOM节点。在此阶段vue实例挂载到正式DOM上，可以通过DOM获取DOM节点。

update：如果对数据进行统一处理，在这里写上相关的函数。此阶段虚拟DOM重新渲染，组成新的DOM已经更新，避免在这个钩子函数中操作数据，防止死循环。

beforeDestroy：可以做一个确认停止事件的确认框。在实例销毁前调用，实例还可以用，this可以获取到实例，常用于销毁定时器，解绑事件。

nextTick:更新数据后立即操作DOM。

beforeMount：在此阶段vue实例的el和data都已经初始化完成，但是挂载之前为虚拟的DOM节点。

beforeUpdate：响应式数据更新时调用，适合在更新之前访问现有的DOM，比如手动移除已经添加的事件监听器。

destroyed：在实例销毁后调用，调用后所有事件监听器会被移除，所有的子实例都会被销毁。

个人总结，如有异议麻烦指正。谢谢