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. 进一步的建议或行动步骤