PART 01

生命周期
什么是生命周期？
S H E N ME SH I S H EN G MMI NG Z H O U QI

名词解释：生命周期有广义与狭义之分，狭义为生命科学术语，指包括人类在内的一切动物由出生到死亡经历
的生命全程。广义的生命周期泛指自然界与人类社会各种客观事物的阶段性变化及规律，如家庭生命周期、产
品生命周期等。本义即狭义的生命周期，专指人类的生命周期。
什么是生命周期？
S H E N ME SH I S H EN G MMI NG Z H O U QI
什么是生命周期？
S H E N ME SH I S H EN G MMI NG Z H O U QI

软件工程中描述的生命周期

软件 软件 软件
定义 开发 维护

总体设计
可行性研究 使用与维护
详细设计
需求分析 退役
实现

测试
什么是生命周期？
S H E N ME SH I S H EN G MMI NG Z H O U QI

WEB的生命周期

// JavaScript
document.onreadystatechange = function() {
if (document.readyState == "loading")
console.log('浏览器正在加载和处理此文档’)
if (document.readyState == "interactive")
console.log('文档已被解析，但浏览器还在加载其中的链接资源(图像和媒体文件等)’)
if (document.readyState == "complete")
console.log('文档已被解析，所有的资源也加载完毕’)
}

在Web中生命周期的状态更替主要体现在资源加载方面。
因为Web的设计初衷就是作为 Hyper Text（超文本）
通过 Document 标签来加载并展示各种互联网媒体资源
Vue3 的 生 命 周 期
V U E 3 D E S H E N G M M I N G Z H O U Q I

App.vue

父组件

子组件

Vue中每个组件都有独立的生命周期
呈树形结构的父子组件嵌套
Vue3 的 生 命 周 期
V U E 3 D E S H E N G M M I N G Z H O U Q I

生命周期钩子
Option API
export default {
mounted() {
console.log(`the component is now mounted.`)
}
}
Composition API
<script setup>
import { onMounted } from 'vue’

onMounted(() => {
console.log(`the component is now mounted.`)
})
</script>
生命周期
S H ENG MMI NG Z H OU QI
生命周期
S H ENG MMI NG Z H OU QI
生命周期
S H ENG MMI NG Z H OU QI