Vue3 生命周期函数
生命周期图谱（Composition API）
初始化响应式阶段、DOM挂载阶段、更新阶段、卸载阶段。
1. setup()
- 替代
beforeCreate和created -
作用：
setup()是 Composition API 的入口。在beforeCreate之前执行。在此阶段，组件实例尚未被创建，因此你无法访问this(data,computed,methods等都不存在)。但是，响应式数据和函数可以在这里声明和定义。 -
必须写在这里的代码：所有非 DOM 相关的响应式数据、计算属性、函数的定义和初始化都必须在这里或在其内部调用。这是唯一可以定义它们的地方。
-
常见场景：
-
定义所有的
ref,reactive响应式变量。 -
定义组件内部使用的方法。
-
定义计算属性 (
computed) 和侦听器 (watch)。
-
export default {setup() {// 必须在这里定义数据const count = ref(0)const user = reactive({ name: 'Alice' })// 必须在这里定义方法function increment() {count.value++}// 返回所有需要在模板中使用的数据和方法return {count,user,increment}}
}-----------------------// setup 语法糖写法<script setup>import { ref, reactive } from 'vue'// 直接定义数据和方法
const count = ref(0)
const user = reactive({ name: 'Alice' })// 可以定义方法
function increment() {count.value++
}
</script>2. onBeforeMount()
-
作用：在组件被挂载到 DOM 之前执行。此时，编译模板已经完成，虚拟 DOM 已经创建，但尚未转换为真实 DOM 并插入页面。极少使用。
-
必须写在这里的代码：几乎没有什么代码是“必须”写在这里的。它可以在挂载前最后一刻操作组件状态，但这些操作通常在
setup中也能完成。 -
常见场景：
-
需要在渲染前最后一步修改某些响应式数据。
-
非常罕见的、需要在挂载前执行的服务端渲染逻辑。
-
import { onBeforeMount } from 'vue'export default {setup() {onBeforeMount(() => {console.log('DOM 即将被挂载，但现在还看不到元素')// 例如，可以在这里设置一个初始状态，但这个操作在 setup 里做更常见})}
}
3. onMounted()
-
作用：在组件首次被挂载到 DOM 之后执行。此时，你可以安全地访问或操作 DOM 元素，或者执行依赖于 DOM 的初始化操作（如使用第三方库初始化图表）。
-
必须写在这里的代码：所有需要访问 DOM 元素的代码。在
setup或onBeforeMount中执行 DOM 操作会失败，因为元素还不存在。 -
常见场景：
-
数据请求（API calls）：从服务器获取数据以填充组件。
-
DOM 操作：直接操作元素或集成非Vue的第三方DOM 库(如图表、地图、富文本编辑器)
-
事件监听：使用
addEventListener监听原生 DOM 事件。 -
访问元素尺寸和位置。
-
<template><div ref="chartContainer"></div>
</template><script>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts' // 一个图表库export default {setup() {const chartContainer = ref(null) // 创建一个模板引用onMounted(() => {// 必须在这里初始化图表，因为需要访问 DOM 元素const myChart = echarts.init(chartContainer.value)myChart.setOption({ /* ... */ })})return {chartContainer}}
}
</script>----------------------------------------------------------Setup 语法糖写法<template><div ref="chartContainer"></div>
</template><script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts' // 一个图表库const chartContainer = ref(null) // 创建一个模板引用onMounted(() => {// 必须在这里初始化图表，因为需要访问 DOM 元素const myChart = echarts.init(chartContainer.value)myChart.setOption({ /* ... */ })
})
</script>