Vue生命周期概述_创建阶段_将DOM操作放在`mounted`钩子函数中
Vue生命周期概述
Vue框架中的生命周期是组件从创建到销毁的一系列步骤。理解这些步骤对于管理组件的行为和状态至关重要。
一、创建阶段
在这个阶段,Vue实例被创建,但还没有挂载到DOM上。
生命周期钩子函数 | 执行时机 | 适用操作 |
---|---|---|
beforeCreate | 实例创建前 | 初始化非响应式数据 |
created | 实例创建后 | 发起初始数据请求 |
二、挂载阶段
在这个阶段,Vue实例开始准备将模板编译和挂载到DOM上。
生命周期钩子函数 | 执行时机 | 适用操作 |
---|---|---|
beforeMount | 挂载前 | 最后修改操作 |
mounted | 挂载后 | DOM操作、初始化第三方库 |
三、更新阶段
当响应式数据发生变化时,Vue实例将重新渲染。
生命周期钩子函数 | 执行时机 | 适用操作 |
---|---|---|
beforeUpdate | 更新前 | 更新前执行逻辑 |
updated | 更新后 | DOM状态依赖操作 |
四、销毁阶段
在这个阶段,Vue实例将被销毁,相关的事件监听器和子实例也会被清理。
生命周期钩子函数 | 执行时机 | 适用操作 |
---|---|---|
beforeDestroy | 销毁前 | 清理或保存数据 |
destroyed | 销毁后 | 销毁后执行操作 |
五、实例说明
下面是一个简单的例子,展示了如何在控制台输出生命周期钩子函数的执行顺序。
- 在组件内部定义`beforeCreate`和`created`钩子函数。
- 使用`console.log`输出钩子函数的执行。
合理使用Vue的生命周期钩子函数可以让你更好地控制组件的生命周期,提高应用的性能和可维护性。
- 在`created`钩子函数中发起初始数据请求。
- 将DOM操作放在`mounted`钩子函数中。
- 在`beforeDestroy`钩子函数中清理资源。