不同框架中的生命周期函数大全

一、生命周期

1) Vue2.0 （11个）

1、beforeCreate 

2、created

3、beforeMount

4、mounted

5、beforeUpdate

6、updated

7、activated

8、deactivated

9、beforeDestroy

10、destroyed

11、errorCaptured（2.5.0+ 新增）

2) Vue3.0  （选项式API [14个] 、组合式API [13个]）

选项式API

1、beforeCreate

2、created

3、beforeMount

4、mounted

5、beforeUpdate

6、updated

7、beforeUnmount

8、unmounted

9、errorCaptured

10、renderTracked 

11、renderTriggered 

12、activated

13、deactivated

14、serverPrefetch 

组合式API

1、setup

2、onBeforeMount 

3、onMounted 

4、onBeforeUpdate 

5、onUpdated

6、onBeforeUnmount 

7、onUnmounted

8、onErrorCaptured

9、onRenderTracked

10、onRenderTriggered

11、onActivated()

12、onDeactivated()

13、onServerPrefetch() 

3) React  （9个）

1、constructor（构造函数）

2、render函数

3、componentWillMount

4、componentDidMount

5、shouldComponentUpdate

6、componentWillUpdate

7、componentDidUpdate

8、componentWillUnmount

9、componentWillReceiveProps

一、生命周期
1) Vue2.0 （11个）

1、beforeCreate 
组件实例刚被创建，组件属性计算之前。

在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用

2、created
组件实例刚被创建，属性已绑定，但DOM还未生成。

在实例创建完成后被立即调用。
在这一步，实例已完成以下的配置：
数据观测 (data observer)属性和方法的运算，watch/event 事件回调。
然而，挂载阶段还没开始，$el 属性目前不可见。
建议数据请求放在这一阶段进行，到了之后的阶段再请求就一定会触发界面的二次渲染

3、beforeMount
模板编译/挂载之前。

在挂载开始之前被调用：相关的 render 函数首次被调用

4、mounted
模板编译/挂载之后。

el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子，如果 root 实例挂
载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内

5、beforeUpdate
组件更新之前。

数据更新时调用，发生在虚拟 DOM 打补丁之前。
这里适合在更新之前访问现有的 DOM，
比如手动移除已添加的事件监听器，该钩子在服务器端渲染期间不被调用，
因为只有初次 渲染会在服务端进行

6、updated
组件更新之后

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子

7、activated
组件激活时调用。

keep-alive 组件激活时调用。该钩子在服务器端渲染期间不被调用

8、deactivated
组件停用时调用。

keep-alive 组件停用时调用。该钩子在服务器端渲染期间不被调用

9、beforeDestroy
组件销毁前调用。

实例销毁之前调用。
在这一步，实例仍然完全可用。该钩子在服务器端渲染期间不被调用

10、destroyed
组件销毁后调用。

Vue 实例销毁后调用。
调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监 听器会被移除，所有的子实例也会被销毁。
该钩子在服务器端渲染期间不被调用

11、errorCaptured（2.5.0+ 新增）
当捕获一个来自子孙组件的错误时被调用。

此钩子会收到三个参数：
错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串，
此钩子可以返回 false 以阻止该 错误继续向上传播

TIPS：

1、页面首次加载过程，会一次触发哪些钩子？

beforeCreate，created，beforeMount，mounted

2、beforeUpdate 、updated中，不能网络请求新数据

不能网络请求新数据，去更新数据源，因为会导致死循环

3、this.$el是什么？它在哪些钩子中才能访问？

它代表了当前组件的真实DOM，要在mounted之后才有this.$el是指的关联的那个div

4、你用brforeCreate做过什么业务？

这个钩子中可以做网络请求，但是vm没有构建完毕，此时数据方法等等的劫持还没有完成，不能操作this，因此可以做预加载

2) Vue3.0  （选项式API [14个] 、组合式API [13个]）

选项式API
1、beforeCreate
在组件实例初始化完成之后立即调用。

2、created
在组件实例处理完所有与状态相关的选项后调用。

3、beforeMount
在组件被挂载之前调用。

4、mounted
在组件被挂载之后调用。

5、beforeUpdate
在组件即将因为一个响应式状态变更而更新其 DOM 树之前调用。

6、updated
在组件因为一个响应式状态变更而更新其 DOM 树之后调用。

7、beforeUnmount
在一个组件实例被卸载之前调用。

8、unmounted
在一个组件实例被卸载之后调用。

9、errorCaptured
在捕获了后代组件传递的错误时调用。

10、renderTracked 
在一个响应式依赖被组件的渲染作用追踪后调用。

这个钩子仅在开发模式下可用，且在服务器端渲染期间不会被调用。

11、renderTriggered 
在一个响应式依赖被组件触发了重新渲染之后调用。

12、activated
若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。

这个钩子在服务端渲染时不会被调用。

13、deactivated
若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。

这个钩子在服务端渲染时不会被调用。

14、serverPrefetch 
当组件实例在服务器上被渲染之前要完成的异步函数。

组合式API

1、setup
执行的时机：在beforeCreate之前执行,因为在这个函数中不能通过this来获取实例的；

2、onBeforeMount 
注册一个钩子，在组件被挂载之前被调用。

3、onMounted 
注册一个回调函数，在组件挂载完成后执行。

4、onBeforeUpdate 
注册一个钩子，在组件即将因为响应式状态变更而更新其 DOM 树之前调用。

5、onUpdated
注册一个回调函数，在组件因为响应式状态变更而更新其 DOM 树之后调用。

6、onBeforeUnmount 
注册一个钩子，在组件实例被卸载之前调用。

7、onUnmounted
注册一个回调函数，在组件实例被卸载之后调用。

8、onErrorCaptured
注册一个钩子，在捕获了后代组件传递的错误时调用。

9、onRenderTracked
注册一个调试钩子，当组件渲染过程中追踪到响应式依赖时调用。

这个钩子仅在开发模式下可用，且在服务器端渲染期间不会被调用。

10、onRenderTriggered
注册一个调试钩子，当响应式依赖的变更触发了组件渲染时调用。

这个钩子仅在开发模式下可用，且在服务器端渲染期间不会被调用。

11、onActivated()
注册一个回调函数，若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。

这个钩子在服务器端渲染期间不会被调用。

12、onDeactivated()
注册一个回调函数，若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。

这个钩子在服务器端渲染期间不会被调用。

13、onServerPrefetch() 
注册一个异步函数，在组件实例在服务器上被渲染之前调用。

3) React  （9个）

1、constructor（构造函数）
一般在constructor 初始化状态，也可以获取到外界传递进来的属性

2、render函数
1.会返回一个react元素，而且只能有一个根元素；这个返回的元素最终会渲染到root元素中
2. 调用一次setState就会执行一次render;默认也会执行一次

3、componentWillMount
组件将要挂载时触发的函数

在渲染前调用,在客户端也在服务端

4、componentDidMount
组件挂载完成时触发的函数

在**第一次渲染后**调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。

5、shouldComponentUpdate
是否要更新数据时触发的函数：

自己判断是否需要刷新

返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。 可以在你确认不需要更新组件时使用。

6、componentWillUpdate
将要更新数据时触发的函数：

准备更新

在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。

7、componentDidUpdate
数据更新完成时触发的函数：

已经更新，数据已经改完了

在组件完成更新后立即调用。在初始化时不会被调用。

8、componentWillUnmount
组件将要销毁时触发的函数：

即将销毁

在组件从 DOM 中移除的时候立刻被调用。

9、componentWillReceiveProps
父组件中改变了props传值时触发的函数：

在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。