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>

4.&n