三亚婚纱摄影 织梦网站源码,中江网站建设,陶然亭网站建设,wordpress添加网站图标详解 Vue 的各个生命周期 文章目录 详解 Vue 的各个生命周期Vue 组件的生命周期1.1 创建阶段示例#xff1a; 1.2 挂载阶段示例#xff1a; 1.3 更新阶段示例#xff1a; 1.4 销毁阶段示例#xff1a; 生命周期总结生命周期钩子对比表参考链接 Vue 组件的生命周期
在 Vue …详解 Vue 的各个生命周期 文章目录 详解 Vue 的各个生命周期Vue 组件的生命周期1.1 创建阶段示例 1.2 挂载阶段示例 1.3 更新阶段示例 1.4 销毁阶段示例 生命周期总结生命周期钩子对比表参考链接 Vue 组件的生命周期
在 Vue 中组件的生命周期可以被划分为创建、运行和销毁三个阶段。以下是每个阶段的重要生命周期钩子。
1.1 创建阶段
在这个阶段组件开始创建。包括了以下几个生命周期钩子
beforeCreate在实例初始化之后、数据观测 (data observation) 和事件/侦听器配置之前被调用。created在实例被创建后调用。此时实例已被完全设置包括数据观测和属性初始化。
示例
new Vue({data() {return {message: Hello, Vue!}},beforeCreate() {console.log(beforeCreate: 实例刚被创建数据未初始化);},created() {console.log(created: 实例已创建数据准备就绪:, this.message);}
});1.2 挂载阶段
在这个阶段组件被挂载到 DOM 上。包括以下生命周期钩子
beforeMount在挂载开始之前被调用相关的 render 函数首次被调用。mounted在挂载完成后被调用此时组件的 DOM 结构已被渲染并且可以访问。
示例
new Vue({el: #app,data() {return {message: Hello, Vue!}},beforeMount() {console.log(beforeMount: 组件即将挂载还未渲染到 DOM);},mounted() {console.log(mounted: 组件已挂载当前 DOM:, this.$el);}
});1.3 更新阶段
这个阶段是组件数据发生变化后组件的重新渲染。相关生命周期钩子有
beforeUpdate在数据发生变化DOM 更新之前被调用。updated在 DOM 更新完成后被调用。
示例
new Vue({el: #app,data() {return {count: 0}},methods: {increment() {this.count;}},beforeUpdate() {console.log(beforeUpdate: 数据即将更新当前 count:, this.count);},updated() {console.log(updated: DOM 更新完成新的 count:, this.count);}
});1.4 销毁阶段
这个阶段是组件被销毁的时刻相关生命周期钩子有
beforeDestroy在实例销毁之前调用此时仍可以访问实例。destroyed在实例被销毁后调用所有的事件监听器将被移除。
示例
new Vue({el: #app,data() {return {isVisible: true}},beforeDestroy() {console.log(beforeDestroy: 组件即将被销毁);},destroyed() {console.log(destroyed: 组件已被销毁);},template: divbutton clickisVisible false销毁组件/buttonp v-ifisVisibleHello, Vue!/p/div
});生命周期总结
Vue 的生命周期钩子允许开发者在组件的不同生命阶段插入自定义逻辑。通过合理使用这些钩子开发者可以
在组件被创建时进行初始化和设置。在挂载后进行 DOM 操作。在组件更新前后执行特定逻辑。在组件生命周期末尾清理资源和事件监听。
理解组件的生命周期对于编写高效、可靠的 Vue 应用至关重要。通过结合生命周期钩子我们能够确保各个阶段之间的逻辑衔接与数据的一致性。
生命周期钩子对比表
生命周期钩子触发时机说明beforeCreate实例初始化后数据未初始化事件和侦听器未配置created实例创建后数据已就绪可以访问属性和方法beforeMount挂载开始之前render 函数首次调用前DOM 还未生成mounted挂载完成后DOM 对象已生成可以进行 DOM 操作beforeUpdate数据更新前可以读取现有状态但下一轮 DOM 更新未开始updatedDOM 更新后可以执行依赖于更新 DOM 结果的操作beforeDestroy实例销毁前可以清理事件和其他外部资源destroyed实例销毁后所有事件监听器被移除完成收尾工作
参考链接
Vue.js 官方文档Vue.js 生命周期
