vue生命周期
【摘要】 vue生命周期
vue生命周期
Vue 2.x 的生命周期
生命周期
| 生命周期 | 描述 |
|---|---|
beforeCreate |
组件实例被创建之初 |
created |
组件实例已经完全创建 |
beforeMount |
组件挂载之前 |
mounted |
组件挂载到实例上去之后 |
beforeUpdate |
组件数据发生变化，更新之前 |
updated |
组件数据更新之后 |
beforeDestroy |
组件实例销毁之前 |
destroyed |
组件实例销毁之后 |
activated |
keep-alive 缓存的组件激活时 |
deactivated |
keep-alive 缓存的组件停用时 |
errorCaptured |
捕获一个来自子孙组件的错误时 |
export default {
data() {
return { count: 0 };
},
beforeCreate() {
console.log('beforeCreate');
},
created() {
console.log('created');
},
beforeMount() {
console.log('beforeMount');
},
mounted() {
console.log('mounted');
},
beforeUpdate() {
console.log('beforeUpdate');
},
updated() {
console.log('updated');
},
beforeDestroy() {
console.log('beforeDestroy');
},
destroyed() {
console.log('destroyed');
}
}
具体分析
| 阶段 | 描述 |
|---|---|
| beforeCreate | 初始化 Vue 实例，开始数据观测。 |
| created | 完成数据观测，属性与方法的运算，watch 和事件回调的配置。可调用 methods 中的方法，访问和修改 data 数据。此时 vm.$el 并未创建。 |
| created -> beforeMount | 判断是否存在 el 选项，若不存在则停止编译，直到调用 vm.$mount(el) 才会继续编译。优先级： render > template > outerHTML。此时获取的是挂载 DOM 的元素。 |
| beforeMount | 在此阶段可以获取到 vm.el，但 vm.el 并未挂载到 el 选项对应的 DOM 元素上。 |
| beforeMount -> mounted | 此阶段 vm.el 已完成挂载，vm.$el 生成的 DOM 替换了 el 选项所对应的 DOM。 |
| mounted | vm.el 已完成 DOM 的挂载与渲染，打印 vm.$el 可以看到挂载点已被新的 DOM 替换。 |
| beforeUpdate | 更新的数据必须是被渲染在模板上的（el、template、render 之一）。此时 view 层还未更新。若在 beforeUpdate 中修改数据，不会再次触发更新方法。 |
| updated | 完成 view 层的更新。若在 updated 中修改数据，会再次触发更新方法（beforeUpdate、updated）。 |
| beforeDestroy | 实例被销毁前调用，实例的属性与方法仍可访问。 |
| destroyed | 完全销毁一个实例，清理它与其它实例的连接，解绑它的全部指令及事件监听器。并不能清除 DOM，仅销毁实例。 |
使用场景分析
| 生命周期 | 描述 |
|---|---|
| beforeCreate | 执行时组件实例还未创建，通常用于插件开发中执行一些初始化任务 |
| created | 组件初始化完毕，各种数据可以使用，常用于异步数据获取 |
| beforeMount | 未执行渲染、更新，dom未创建 |
| mounted | 初始化结束，dom已创建，可用于获取访问数据和dom元素 |
| beforeUpdate | 更新前，可用于获取更新前各种状态 |
| updated | 更新后，所有状态已是最新 |
| beforeDestroy | 销毁前，可用于一些定时器或订阅的取消 |
| destroyed | 组件已销毁，作用同上 |
数据请求在created和mouted的区别
created是在组件实例一旦创建完成的时候立刻调用，这时候页面dom节点并未生成；mounted是在页面dom节点渲染完毕之后就立刻执行的。触发时机上created是比mounted要更早的，两者的相同点：都能拿到实例对象的属性和方法。 讨论这个问题本质就是触发的时机，放在mounted中的请求有可能导致页面闪动（因为此时页面dom结构已经生成），但如果在页面加载前完成请求，则不会出现此情况。建议对页面内容的改动放在created生命周期当中。
Vue3.x的生命周期
import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue';
export default {
setup() {
onBeforeMount(() => {
console.log('onBeforeMount');
});
onMounted(() => {
console.log('onMounted');
});
onBeforeUpdate(() => {
console.log('onBeforeUpdate');
});
onUpdated(() => {
console.log('onUpdated');
});
onBeforeUnmount(() => {
console.log('onBeforeUnmount');
});
onUnmounted(() => {
console.log('onUnmounted');
});
}
}
| 生命周期钩子 | 作用 | Vue 做了什么 | 常见用途 |
|---|---|---|---|
| beforeCreate | 在 Vue 实例创建之前调用 | 尚未初始化数据、事件、data、computed 等 |
不常用，通常在这里不能访问任何数据或事件 |
| created | Vue 实例创建并初始化后调用，数据已初始化 | 初始化响应式数据，设置事件监听器，computed 和 watch 设置 |
初始化数据、执行异步操作或设置 API 调用等任务 |
| beforeMount | 在 mounted 钩子之前调用，模板已编译但尚未挂载到 DOM |
Vue 即将挂载组件到 DOM，但尚未执行任何 DOM 更新 | 做挂载前的准备工作，如修改 DOM 或计算初始值 |
| mounted | 在组件挂载到 DOM 后调用 | 视图已渲染，mounted 钩子执行 |
适合操作 DOM，如获取元素、添加事件监听器、发起异步请求等 |
| beforeUpdate | 数据变化后，DOM 更新之前调用 | 数据变化，但视图尚未更新 | 执行在数据变化前的准备工作，如记录变化前的状态 |
| updated | 数据变化并导致 DOM 更新后调用 | 视图已更新，updated 钩子执行 |
操作更新后的 DOM，或与外部库进行交互，如更新图表等 |
| beforeUnmount | 组件销毁之前调用 | 组件即将销毁，但尚未从 DOM 中移除 | 清理任务，如取消订阅、移除事件监听器等 |
| unmounted | 组件销毁后调用，DOM 和子组件已被销毁 | 完全销毁组件，移除事件监听器，清理资源 | 销毁组件时的清理操作，如清除定时器、取消 HTTP 请求等 |
Vue3特有生命周期钩子（Composition API）
| 生命周期钩子 | 作用 | Vue 做了什么 | 常见用途 |
|---|---|---|---|
| setup() | Vue 3 新增的生命周期钩子，位于实例创建之前执行 | 初始化响应式数据 (ref 和 reactive)，返回 data、computed、methods 等供模板使用 |
设置组件的响应式数据、方法、生命周期钩子、组合式逻辑等 |
| onBeforeMount | 在组件挂载之前调用，类似于 beforeMount |
组件挂载前调用 | 在 setup 中使用，可以替代 beforeMount |
| onMounted | 在组件挂载后调用，类似于 mounted |
组件挂载完成后调用 | 在 setup 中使用，可以替代 mounted |
| onBeforeUpdate | 数据更新前调用，类似于 beforeUpdate |
数据变化前调用 | 在 setup 中使用，可以替代 beforeUpdate |
| onUpdated | 数据更新后调用，类似于 updated |
数据更新后调用 | 在 setup 中使用，可以替代 updated |
| onBeforeUnmount | 在组件销毁前调用，类似于 beforeDestroy |
组件即将销毁前调用 | 在 setup 中使用，可以替代 beforeDestroy |
| onUnmounted | 在组件销毁后调用，类似于 destroyed |
组件销毁后调用 | 在 setup 中使用，可以替代 destroyed |
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）