子舒的博客
·
vue 生命周期
💡
原文中文，约2200字，阅读约需6分钟。
📝
内容提要
Vue 的生命周期包括多个阶段，实例在创建时经历初始化过程。生命周期钩子函数允许在不同阶段执行代码，主要钩子有：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy 和 destroyed。这些钩子在特定时机被调用，帮助开发者管理组件状态和行为。
🎯
关键要点
- Vue 的生命周期包含多个阶段，实例在创建时经历初始化过程。
- 生命周期钩子函数允许在不同阶段执行代码，主要钩子有：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy 和 destroyed。
- beforeCreate 钩子在数据观测和事件配置之前被调用，无法访问 data 和 methods。
- created 钩子在实例创建完成后被调用，可以访问 data 和 methods，但无法获取挂载模板生成的 DOM。
- beforeMount 钩子在挂载开始之前被调用，相关的 render 函数首次被调用。
- mounted 钩子在 DOM 被挂载后调用，可以获取到渲染后的 DOM 元素。
- beforeUpdate 钩子在数据更新时调用，可以在此修改状态，但不会触发额外的重渲染。
- updated 钩子在虚拟 DOM 重新渲染后调用，组件 DOM 已更新，适合执行依赖于 DOM 的操作。
- beforeDestroy 钩子在实例销毁之前调用，实例仍然可用。
- destroyed 钩子在实例销毁后调用，所有事件监听器和子实例会被移除。
❓
延伸问答
Vue 生命周期的主要阶段有哪些？
Vue 生命周期主要包括 beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy 和 destroyed 八个阶段。
在 Vue 的 created 钩子中可以做什么？
在 created 钩子中可以访问 data 和 methods，但无法获取挂载模板生成的 DOM。
mounted 钩子在 Vue 生命周期中有什么作用？
mounted 钩子在 DOM 被挂载后调用，可以获取到渲染后的 DOM 元素。
beforeUpdate 钩子在什么情况下被调用？
beforeUpdate 钩子在数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
Vue 实例销毁时会调用哪些钩子？
在 Vue 实例销毁时，会调用 beforeDestroy 和 destroyed 钩子。
如何在 Vue 生命周期中执行自定义代码？
可以通过生命周期钩子函数在不同阶段执行自定义代码。
➡️
