企业官网建设流程全解析

可以中英切换的网站怎么做,广州优化网站推广,广州网站建设 名片制作 网站管理,银行网站建设前期合同在 Vue 开发中#xff0c;理解组件的生命周期是掌握 Vue 核心原理的关键。Vue 组件的生命周期如同一个对象的 “从生到死”#xff0c;从创建、挂载、更新到销毁#xff0c;每个阶段都有其特定的执行时机和应用场景。Vue2 将生命周期划分为 8 个核心阶段#xff08;也可细分…在 Vue 开发中理解组件的生命周期是掌握 Vue 核心原理的关键。Vue 组件的生命周期如同一个对象的 “从生到死”从创建、挂载、更新到销毁每个阶段都有其特定的执行时机和应用场景。Vue2 将生命周期划分为 8 个核心阶段也可细分为更多钩子函数本文将逐一拆解这 8 个阶段结合实际场景说明其使用方式帮助你更优雅地编写 Vue 代码。一、Vue 生命周期的整体脉络首先我们需要明确 Vue2 组件生命周期的整体流程创建阶段初始化→ 挂载阶段渲染 DOM→ 更新阶段响应式数据变化→ 销毁阶段清理资源。这四个大阶段又细分为 8 个核心钩子函数按执行顺序依次为beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。二、8 个核心阶段执行时机 应用场景1. beforeCreate创建前执行时机组件实例刚刚被初始化此时数据观测data、事件监听、方法定义都还未完成this指向组件实例但无法访问data、props、methods中的内容。应用场景这个阶段几乎很少使用因为能做的操作非常有限。仅可用于初始化一些与组件数据无关的全局配置比如记录组件创建日志。代码示例export default { beforeCreate() { console.log(beforeCreate, this.msg); // undefined console.log(beforeCreate, this.sayHello); // undefined // 可执行记录日志、初始化全局第三方库无需组件数据 }, data() { return { msg: Hello Vue }; }, methods: { sayHello() { console.log(this.msg); } } };2. created创建完成执行时机组件实例的数据观测、属性和方法的初始化已完成能访问data、props、methods但DOM 节点还未生成$el属性不存在。应用场景这是常用的钩子之一适合执行数据初始化、异步请求非 DOM 相关、事件绑定非 DOM 事件等操作。比如从后端获取初始数据无需等待 DOM 渲染。注意若在此处操作 DOM会报错因为 DOM 尚未挂载。代码示例export default { data() { return { list: [] }; }, created() { console.log(created, this.msg); // Hello Vue console.log(created, this.$el); // undefined // 异步请求获取数据 this.fetchData(); }, methods: { async fetchData() { const res await fetch(/api/list); this.list await res.json(); } } };3. beforeMount挂载前执行时机模板编译完成虚拟 DOM 已生成但尚未挂载到真实 DOM 节点上$el属性已存在指向虚拟 DOM但页面中还看不到渲染后的内容。应用场景可用于最后一次修改数据不会触发额外的更新或做一些挂载前的准备工作比如修改虚拟 DOM 的配置。使用场景较少一般可被created或mounted替代。代码示例export default { data() { return { msg: Hello Vue }; }, beforeMount() { console.log(beforeMount, this.$el); // 存在虚拟DOM console.log(页面中是否显示msg, false); // 最后修改数据不会触发更新 this.msg Hello Vue beforeMount; } };4. mounted挂载完成执行时机虚拟 DOM 成功挂载到真实 DOM 节点页面中能看到渲染后的内容$el指向真实 DOM 元素。此时组件的 DOM 结构已完全可用。应用场景这是最常用的钩子之一适合执行DOM 相关操作、初始化第三方 UI 库如 ECharts、Element UI、绑定 DOM 事件等。比如初始化图表、获取 DOM 元素的尺寸。注意若组件包含子组件mounted仅在当前组件挂载完成后执行子组件的mounted可能晚于当前组件。代码示例export default { mounted() { console.log(mounted, this.$el); // 真实DOM元素 // 初始化ECharts图表 this.initChart(); // 绑定DOM事件 this.$el.addEventListener(click, this.handleClick); }, methods: { initChart() { const chart echarts.init(this.$el.querySelector(#chart)); chart.setOption({ /* 配置项 */ }); }, handleClick() { console.log(DOM被点击了); } }, beforeDestroy() { // 销毁时移除事件监听避免内存泄漏 this.$el.removeEventListener(click, this.handleClick); } };5. beforeUpdate更新前执行时机当组件的响应式数据发生变化时触发此时数据已更新但虚拟 DOM 尚未重新渲染页面内容还是旧的。应用场景可用于在数据更新前做一些预处理比如记录旧数据、取消某些异步请求或阻止不必要的更新不推荐更推荐使用计算属性或 watch。使用场景较少。代码示例export default { data() { return { count: 0 }; }, beforeUpdate() { console.log(beforeUpdate旧数据, this.count); // 已更新后的数值不数据已改DOM未更 console.log(页面中count, document.querySelector(.count).innerText); // 旧数值 // 预处理操作 }, methods: { addCount() { this.count; } } };6. updated更新完成执行时机数据更新后虚拟 DOM 重新渲染并挂载到真实 DOM页面内容已更新为新数据。应用场景适合执行数据更新后的 DOM 操作比如重新计算 DOM 元素的尺寸、更新第三方库的配置因数据变化需要重新渲染的场景。注意避免在updated中修改响应式数据否则会陷入无限更新循环。代码示例export default { data() { return { list: [1, 2, 3] }; }, updated() { console.log(updated页面中list已更新); // 重新计算列表高度 const listHeight this.$el.querySelector(.list).offsetHeight; console.log(列表高度, listHeight); }, methods: { addItem() { this.list.push(Math.random()); } } };7. beforeDestroy销毁前执行时机组件实例即将被销毁此时组件的数据、方法、DOM 都还可用但已进入销毁流程。应用场景这是非常重要的钩子用于清理资源防止内存泄漏。比如取消异步请求axios cancelToken、移除 DOM 事件监听、销毁第三方库实例如 ECharts、定时器。代码示例export default { data() { return { timer: null }; }, mounted() { // 开启定时器 this.timer setInterval(() { console.log(定时器执行中); }, 1000); // 发起异步请求 this.source axios.CancelToken.source(); this.fetchData(); }, methods: { async fetchData() { await axios.get(/api/data, { cancelToken: this.source.token }); } }, beforeDestroy() { // 清除定时器 clearInterval(this.timer); // 取消异步请求 this.source.cancel(组件销毁取消请求); // 销毁ECharts实例 this.chart?.dispose(); } };8. destroyed销毁完成执行时机组件实例已被完全销毁所有数据绑定、事件监听、子组件都被移除this仍指向组件实例但已无实际意义。应用场景几乎很少使用可用于记录组件销毁日志或做最后的清理工作一般在beforeDestroy中已完成。代码示例export default { destroyed() { console.log(组件已销毁); // 最后的日志记录 } };三、Vue 生命周期的关键注意事项避免内存泄漏在beforeDestroy中务必清理定时器、事件监听、第三方库实例这是开发中最容易忽略的点。异步请求的时机created和mounted都可发起异步请求created中发起请求更早无需等待 DOM但如果请求依赖 DOM则需在mounted中执行。子组件生命周期父组件的mounted执行早于子组件的mounted而父组件的beforeDestroy执行晚于子组件的beforeDestroy。Vue3 的变化Vue3 中使用组合式 APIsetup替代了部分生命周期钩子如setup对应beforeCreate和created但仍保留了onMounted、onUpdated等钩子逻辑基本一致。四、总结Vue 的 8 个生命周期阶段覆盖了组件从创建到销毁的全过程每个阶段都有其明确的执行时机和应用场景。掌握这些钩子函数能让我们在合适的时机执行对应的逻辑写出更高效、更健壮的 Vue 代码。核心记住数据初始化用 createdDOM 操作用 mounted资源清理用 beforeDestroy这三个钩子是日常开发中使用频率最高的。