vue 3 中 beforecreate 和 created 被 setup() 完全取代，它在组件实例创建前执行，用于声明响应式数据、定义方法、注册侦听器及执行初始化逻辑，但不可访问 this 或 dom。
Vue 3 中没有 beforeCreate 和 created 这两个生命周期钩子，它们的功能完全由 setup() 函数承担。这不是“模拟替代”，而是官方设计上的统一整合：组件初始化逻辑全部收口到 setup() 中执行。
setup 就是 beforeCreate + created 的合并体
setup() 在组件实例创建前（比 Vue 2 的 beforeCreate 还早）就已执行，此时组件实例尚未建立，this 不可用，但你可以：
- 声明响应式数据（
ref、reactive、computed） - 定义方法（普通函数或箭头函数）
- 注册侦听器（
watch、watchEffect） - 调用其他组合式函数（如
useRouter、useStore） - 直接执行初始化逻辑（比如同步获取配置、设置默认状态）
常见写法对比（选项式 → 组合式）
Vue 2 选项式中常在 created 里发起请求或初始化数据：
export default {
data() {
return { list: [] }
},
created() {
this.fetchList()
},
methods: {
fetchList() { /* API 调用 */ }
}
}
Vue 3 <script setup></script> 中直接在顶层执行等效逻辑：
<script setup>
import { ref } from 'vue'
import { fetchList } from './api'
<p>const list = ref([])<p>// 相当于 created 阶段立即执行
fetchList().then(data => {
list.value = data
})
</script>
注意几个关键细节
-
setup()内不能访问this，所有变量和函数需显式声明并返回（或通过defineExpose暴露） - 若需访问 DOM 或组件实例（如
$el），必须等到onMounted钩子中——setup阶段 DOM 尚未生成 - 异步操作可直接在
setup中await，但要注意错误处理（建议配合try/catch或.catch） - Vue 3 仍保留
beforeCreate和created选项用于兼容旧代码，但不推荐新项目使用
什么时候该用 onMounted 而不是 setup？
如果逻辑依赖 DOM 渲染完成（比如初始化第三方 UI 库、读取元素尺寸、聚焦输入框），就别放在 setup 里：
- ✅
setup：定义数据、计算属性、方法、发起初始 API 请求 - ✅
onMounted：操作 DOM、启动定时器、绑定事件监听器（需访问$el） - ❌
setup中尝试document.getElementById或ref.value?.focus()会失败（DOM 不存在）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
