vue2渲染的生命周期

### Vue2 渲染生命周期详解

Vue2 的渲染生命周期涵盖了从组件实例创建到最终销毁的过程中的各个重要阶段。这一过程中，Vue 提供了一系列的钩子函数以便开发者可以在特定的时间点执行自定义逻辑。

#### 组件初始化与挂载阶段

当一个新的 Vue 实例被创建时，即 `new Vue()` 被调用之时，便开启了该实例的生命周期。在此期间，Vue 首先会进入`beforeCreate`阶段，在此之前所有的属性都还未初始化[^2]。紧接着是`created`阶段，此时响应式数据已经被设置好但是还没有开始编译模板或挂载DOM节点。

随后进入到`beforeMount`阶段，这里已经完成了模板编译但尚未真正挂在真实DOM上；最后到达`mounted`阶段，意味着组件已被成功加载并插入到了页面中，可以访问真实的DOM结构了[^3]。

// 示例代码展示 mounted 阶段的操作
export default {
  data() {
    return { message: 'Hello, world!' }
  },
  mounted() {
    console.log('Component has been mounted.')
    // 可以在这里发起网络请求获取初始数据
  }
}

#### 更新周期

一旦组件的状态发生变化触发重新渲染流程，则会依次经过两个重要的更新期：

- **beforeUpdate**: 此时虚拟 DOM 已经重建完毕等待打补丁应用至实际 DOM 上；
- **updated**: 所有的变更都已经同步到视图层面上去了，包括但不限于样式变化、新增/删除元素等。

这使得开发人员能够在每次状态改变之后立即做出反应，例如调整某些依赖于最新 DOM 结构的行为或是处理动画效果等问题。

#### 销毁阶段

当一个组件不再需要而准备移除时，它将经历如下几个步骤直至完全消失不见：

- **beforeDestroy**: 即将摧毁当前实例前的最后一刻机会做些清理工作，像取消订阅消息队列、停止计时器之类的任务都应该放在这一步骤里完成。
- **destroyed**: 完成所有资源释放动作后的终结态，此后再无任何活动发生于此对象之上。

通过上述八个不同时间点所提供的回调方法——也被称为“生命周期钩子”，我们可以精确控制应用程序行为，并确保其按照预期方式运行。