生命周期
约 362 字大约 1 分钟
2026-04-08
生命周期
思考
Vue2与Vue3生命周期有哪些区别？
| Vue2.x/选项式API | Vue3.x/组合式API |
|---|---|
| beforeCreate | setup() |
| created | setup() |
| beforeMount | onBeforeMount() |
| mounted | onMounted() |
| beforeUpdate | onBeforeUpdate() |
| updated | onUpdated() |
| beforeDestroy | onBeforeUnmount() |
| destroyed | onUnmounted() |
| activated | onActivated() |
| deactivated | onDeactivated() |
Vue2/3生命周期
页面初始加载生命周期执行顺序
思考
Vue 首次加载页面时会执行哪些生命周期
Vue2 选项式API
beforeCreate：在实例初始化完成之后、props解析之后、date 和 computed 属性初始化之前被调用。此时无法访问组件的响应式数据的方法。created：在组件实例处理完成与状态相关的选项后调用。此时可以访问响应式数据、计算属性和方法，但组件还未挂载，DOM 元素还不存在。beforeMount：在挂载开始之前被调用。此时组件实例已创建，但未创建任何 DOM 节点。mounted：在挂载结束之后被调用。此时组件已经挂载，DOM 节点已经生成。
Vue3 组合式API
setup()：替代了beforeCreate和created，在这之前执行（早于其它所有生命周期钩子）。期间创建组件实例、定义响应式状态和方法。onBeforeMount()：对应选项式API中的 beforeMount，在组件 DOM 树渲染前调用。onMounted()：对应选项式API中的 mounted，在组件 DOM 树渲染完成后调用。