生命周期
约 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 树渲染完成后调用。