常见主流框架（vue,react,react-native,angular）生命周期总结

由于接触的框架多了总是会将多个框架的生命周期搞混淆，所以放在一起总结一下

一、vue 生命周期

先看一张图片，图片来源于官网：Vue 实例 — Vue.js

以上钩子详细：（只解释了几个主要的）

1.beforeCreate

在页面被加载的时候首先会创建一个Vue的实例，并且初始化该实例，在实例初始化之后，此时被调用的生命周期钩子叫做：beforeCreate,这个时候数据的观测和事件还没有被调用（特就是说此时还读取不到data里面的数据和实力内的方法）

2.created

当vue实例初始化后，实例创建完成后立即调用的是：created，此时数据观测和方法的运算，watch/event 事件回调都已经配置完成。（也就是说此时能读取data的数据和方法了）

• 在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中，因为此时的dom还没有挂载，对dom操作是没有用的，只有放在nextTick的回调里面才会被执行有效

场景：页面需求数据的ajax请求，初始化操作

3.beforeMount

实例创建完成后，即将被挂载，挂载之前立即调用beforeMount（该钩子在服务器端渲染期间不被调用。），运行执行render

4.mounted

这时候创建完成后所有el都挂载后执行

场景：挂载元素内dom节点的获取，对dom的操作等

5.beforeDestroy

实例销毁之前调用。在这一步，实例仍然完全可用。

6.destroyed

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

更多新增的钩子见官网：API — Vue.js

7.beforeUpdate：数据更新时调用，但不进行DOM重新渲染，在数据更新时DOM没渲染前可以在这个生命函数里进行状态处理

8.updated：这个状态下数据更新并且DOM重新渲染，当这个生命周期函数被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。当实例每次进行数据更新时updated都会执行

场景：任何数据的更新，如果要做统一的业务逻辑处理