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

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

一、vue 生命周期

先看一张图片,图片来源于官网:https://cn.vuejs.org/v2/guide/instance.html

常见主流框架(vue,react,react-native,angular)生命周期总结以上钩子详细:(只解释了几个主要的)

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 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

更多新增的钩子见官网:https://cn.vuejs.org/v2/api/#errorCaptured

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


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

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