diff --git a/docs/static/uni-app-lifecycle-vue2.png b/docs/static/uni-app-lifecycle-vue2.png
new file mode 100644
index 0000000000000000000000000000000000000000..5967dd58baf3fd26dbdb7ba60948b6616d9d80e9
Binary files /dev/null and b/docs/static/uni-app-lifecycle-vue2.png differ
diff --git a/docs/static/uni-app-lifecycle-vue3.png b/docs/static/uni-app-lifecycle-vue3.png
new file mode 100644
index 0000000000000000000000000000000000000000..42a473d064e69da3ef6849ee4abd626fd2ade5c3
Binary files /dev/null and b/docs/static/uni-app-lifecycle-vue3.png differ
diff --git a/docs/tutorial/page.md b/docs/tutorial/page.md
index 9234d20c4e589b0f426957d942e95ec883093f12..727a525b3eb847b448a3113c8483952fa2f893df 100644
--- a/docs/tutorial/page.md
+++ b/docs/tutorial/page.md
@@ -284,6 +284,14 @@ style的写法与web的css基本相同。
 |onShareTimeline|监听用户点击右上角转发到朋友圈|微信小程序|2.8.1+|
 |onAddToFavorites|监听用户点击右上角收藏|微信小程序、QQ小程序|2.8.1+|
 
+## Vue2 页面及组件生命周期流程图
+
+![](../static/uni-app-lifecycle-vue2.png)
+
+## Vue3 页面及组件生命周期流程图
+
+![](../static/uni-app-lifecycle-vue3.png)
+
 ### 页面加载时序介绍@timeline
 
 接下来我们介绍onLoad、onReady、onShow的先后关系，页面加载的详细流程。