Vue渲染的三个主要阶段_说明_每个阶段都有对应的钩子函数方便开发者控制不同的操作

作者：网络发烧程序猿 | 发布时间：2025-06-30 |

Vue渲染的三个主要阶段

Vue的渲染主要分为三个阶段：挂载、更新和销毁。每个阶段都有对应的钩子函数，方便开发者控制不同的操作。

一、挂载阶段

1. 概述

挂载阶段是Vue实例从无到有，被挂载到DOM上的过程。这个过程包括创建实例、编译模板、渲染虚拟DOM到真实DOM，并插入到页面中。

2. 生命周期钩子

钩子函数 说明
beforeMount 挂载前，组件尚未被插入到DOM中
mounted 挂载后，组件已经被插入到DOM中

3. 实例说明

// 假设有一个简单的Vue组件

new Vue({
  el: '#app',
  mounted() {
    console.log('组件已挂载');
  }
});

二、更新阶段

1. 概述

更新阶段是Vue实例的数据或属性发生变化，从而导致视图重新渲染的过程。

2. 生命周期钩子

钩子函数 说明
beforeUpdate 数据或属性更新前，新的虚拟DOM尚未生成
updated 数据或属性更新后，新的虚拟DOM已生成，且实际的DOM已更新

3. 实例说明

// 假设我们对之前的实例做一些修改

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  updated() {
    console.log('组件已更新');
  }
});

三、销毁阶段

1. 概述

销毁阶段是Vue实例从页面中移除的过程。

2. 生命周期钩子

钩子函数 说明
beforeDestroy 实例销毁前，实例仍然完全可用
destroyed 实例销毁后，实例的所有绑定和事件监听器都已被清理，所有子组件也已被销毁

3. 实例说明

// 假设我们对之前的实例再做一些修改

new Vue({
  el: '#app',
  methods: {
    removeInstance() {
      this.$destroy();
    }
  },
  beforeDestroy() {
    console.log('实例即将销毁');
  },
  destroyed() {
    console.log('实例已销毁');
  }
});

四、总结与建议

1. 主要观点总结

2. 进一步的建议或行动步骤