【vue】11.Vue 3生命周期钩子在实践中的具体应用

Vue 3的生命周期钩子为开发者提供了在不同阶段操作组件的强大能力。本文将带您了解每个生命周期钩子的使用场景，并通过简单的案例来展示它们在实际开发中的应用。

1. 创建阶段（Creation Hooks）

beforeCreate

进行一些初始化操作，如设置全局属性。

beforeCreate 钩子函数是在实例初始化之后，数据观测（data observer）和事件/watcher 设置之前被调用的。在这个阶段，组件实例的选项如 data、computed 和 methods 尚未被设置，因此不能访问它们。

示例1. 初始化全局事件总线或全局变量

在 beforeCreate 钩子中，可以设置一些全局属性或事件总线，这些属性或事件总线可以在整个应用的生命周期内使用。

Vue.prototype.$bus = new Vue(); // 创建一个空的Vue实例作为事件总线export default {beforeCreate() {// 在组件创建之前，设置全局事件总线this.$bus.$on('global-event', this.handleGlobalEvent);},methods: {handleGlobalEvent(data) {// 处理全局事件}},beforeDestroy() {// 在组件销毁之前，移除事件监听this.$bus.$off('global-event', this.handleGlobalEvent);}
};

 示例2. 初始化全局插件配置

如果正在使用一个需要在应用启动之前进行配置的插件，可以在 beforeCreate 钩子中进行设置。

export default {beforeCreate() {// 初始化一个第三方插件的配置this.$pluginConfig = {option1: 'value1',option2: 'value2'};// 调用一个初始化方法initializePlugin(this.$pluginConfig);}
};

示例3. 设置组件的初始状态

虽然 data 在 beforeCreate 钩子中不可用，但可以设置一些组件实例的属性，这些属性可以在后续的钩子中使用。

export default {beforeCreate() {// 设置组件的初始状态，例如一个标记位this.$options.initState = true;},created() {// 在 created 钩子中，可以访问到 this.initStateif (this.$options.initState) {// 执行一些基于初始状态的逻辑}}
};

示例4. 加载初始数据

虽然 beforeCreate 不是获取数据的最佳时机（因为 data 和 methods 尚未初始化），但可以在这里初始化一个数据加载器，然后在 created 或 mounted 钩子中使用它。

export default {beforeCreate() {// 初始化一个数据加载器this.$options.loadData = function() {// 实际的数据加载逻辑};},created() {// 在 created 钩子中调用数据加载器this.$options.loadData();}
};

示例5. 检查应用环境

在 beforeCreate 钩子中，可以检查当前应用的环境，并根据环境进行相应的配置。

export default {beforeCreate() {// 检查当前环境if (process.env.NODE_ENV === 'production') {// 生产环境的配置this.$options.productionConfig = true;} else {// 开发环境的配置this.$options.developmentConfig = true;}}
};

beforeCreate 钩子用于在组件实例化之前进行一些准备工作，但是要注意，由于此时组件的 data、computed 和 methods 还未初始化，因此任何依赖于这些选项的操作都应该放在 created 或之后的钩子中进行。

---

created

进行数据初始化，发送异步请求。

在Vue中，created 钩子函数是在实例创建完成后被立即调用的。在这个阶段，组件实例已经完成数据观测（data observer）、属性和方法的运算，watch/event 事件回调已设置，但是挂载阶段尚未开始，$el 属性目前不可见。以下是 created 钩子的一些具体使用场景和详细说明：

示例1. 初始化数据

在 created 钩子中，可以初始化 data 对象中的数据，特别是那些依赖于组件实例化的数据。

export default {data() {return {items: [],loading: false};},created() {// 初始化数据this.items = this.fetchInitialItems();},methods: {fetchInitialItems() {// 返回初始数据return [/* 初始数据项 */];}}
};

示例2. 发送异步请求

由于 created 钩子执行时机较早，并且可以访问到 data 和 methods，因此它该时段是发送异步请求获取数据的好时机。

export default {data() {return {userData: null};},created() {// 发送异步请求获取用户数据this.fetchUserData();},methods: {async fetchUserData() {this.loading = true;try {const response = await axios.get('/api/user');this.userData = response.data;} catch (error) {console.error('Error fetching user data:', error);} finally {this.loading = false;}}}
};

示例3. 计算属性和监听器的初始化

可以基于初始化的数据来设置计算属性或者监听器。

export default {data() {return {input: ''};},created() {// 可以在这里初始化计算属性或监听器this.initComputedAndWatchers();},computed: {// 基于初始化数据设置的计算属性computedProperty() {// ...}},watch: {// 基于初始化数据设置的监听器input(newValue, oldValue) {// ...}},methods: {initComputedAndWatchers() {// 初始化计算属性和监听器的逻辑}}
};

示例4. 插件或外部库的初始化

如果需要在组件创建后立即使用某个插件或外部库，可以在 created 钩子中进行初始化。

export default {created() {// 初始化外部库，例如moment.js的本地化设置moment.locale('zh-CN');}
};

示例5. 预处理组件的默认行为

在组件被渲染之前，可以需要对某些行为进行预处理，比如根据默认参数设置组件的状态。

export default {props: {defaultActive: Boolean},data() {return {isActive: false};},created() {// 根据默认属性设置组件状态this.isActive = this.defaultActive;}
};

在 created 钩子中执行的操作应该只涉及数据准备和异步请求，而不应该涉及到DOM操作，因为此时DOM还未挂载。任何需要在DOM元素上执行的操作应该放在 mounted 钩子中。

---

2. 挂载阶段（Mounting Hooks）

beforeMount

进行最后的DOM渲染前的预处理。

在Vue中，beforeMount 钩子函数是在组件挂载之前被调用的，此时已经完成了模板的编译，但是还没有将数据渲染到页面上。这个钩子函数可以用来执行一些DOM渲染前的预处理操作。以下是 beforeMount 钩子的一些具体使用场景和详细说明：

示例1. 访问和操作模板字符串

在 beforeMount 钩子中，可以访问到组件的模板字符串，但此时模板尚未被渲染成实际的DOM元素。因此该阶段可以对模板进行最后的检查或修改。

export default {beforeMount() {// 检查模板字符串是否符合某些条件console.log(this.$options.template);// 进行预处理操作，例如替换模板中的占位符}
};

示例2. 设置非响应式数据

有时需要在组件挂载前设置一些非响应式的数据，这些数据不需要触发视图更新。

export default {data() {return {// 响应式数据};},beforeMount() {// 设置非响应式数据this.nonReactiveData = someNonReactiveValue();}
};

示例3. 预处理样式或类名

在组件挂载前，可以根据数据状态预处理样式或类名，以确保在DOM渲染时能够正确应用。

export default {data() {return {isActive: true};},beforeMount() {// 根据状态设置初始类名this.dynamicClass = this.isActive ? 'active' : 'inactive';}
};

示例4. 初始化第三方库

如果第三方库需要在DOM元素渲染之前进行初始化，可以在 beforeMount 钩子中进行。

export default {beforeMount() {// 初始化第三方库，例如jQuery插件this.$nextTick(() => {// 确保在DOM更新后执行this.initializeThirdPartyLibrary();});},methods: {initializeThirdPartyLibrary() {// 初始化第三方库的代码}}
};

示例5.优化性能：避免不必要的渲染

如果组件中包含复杂的计算或数据预处理，可以在 beforeMount 钩子中执行这些操作，减少首次渲染时的计算量。

export default {data() {return {complexData: []};},beforeMount() {// 预处理复杂数据，减少首次渲染的计算量this.complexData = this.processComplexData();},methods: {processComplexData() {// 处理复杂数据的逻辑}}
};

注意事项

• 在 beforeMount 钩子中不要进行DOM操作，因为此时Vue还没有将虚拟DOM转换为实际的DOM元素。
• 如果需要确保操作的是渲染后的DOM，可以在 beforeMount 钩子中使用 this.$nextTick，它将在DOM更新完成后执行回调函数。

使用 beforeMount 钩子时，应该考虑它是在组件生命周期中的特定阶段执行的，确保使用场景适合在这个阶段进行。

---

mounted

执行需要访问到DOM的操作。

示例1. 访问DOM元素

可以通过 ref 属性在模板中给DOM元素注册引用信息，然后在 mounted 钩子中通过 this.$refs 访问到这些元素。

案例：聚焦输入框

<template><input ref="inputRef" />
</template><script>
export default {mounted() {// 当组件挂载后，自动聚焦到输入框this.$refs.inputRef.focus();}
};
</script>

---

示例2. 初始化第三方库

有些第三方库需要在DOM元素挂载之后才能初始化，例如，使用jQuery插件或者初始化一个日期选择器。

案例：初始化日期选择器

<template><input id="datepicker" />
</template><script>
export default {mounted() {// 假设我们有一个日期选择器的插件$('#datepicker').datepicker();}
};
</script>

---

示例3. 计算元素的尺寸或位置

有时可能需要在组件加载时获取某个元素的尺寸或位置信息。

<template><div ref="elementRef"></div>
</template><script>
export default {mounted() {// 获取元素的尺寸const rect = this.$refs.elementRef.getBoundingClientRect();console.log(rect.width, rect.height);}
};
</script>

---

示例4. 设置定时器

虽然 created 钩子也可以设置定时器，但在 mounted 钩子中设置定时器更合适，因为它确保DOM已经渲染。

<template><div>{{ message }}</div>
</template><script>
export default {data() {return {message: 'Hello Vue!'};},mounted() {// 设置一个定时器，5秒后更新消息setTimeout(() => {this.message = 'Updated Message';}, 5000);}
};
</script>

---

示例5. 执行动画或过渡

在元素挂载后，也可以执行一些动画或过渡效果。

<template><div ref="animateRef"></div>
</template><script>
export default {mounted() {// 使用CSS动画或JavaScript动画库执行动画this.$refs.animateRef.animate([{ transform: 'translateX(0px)' }, { transform: 'translateX(100px)' }], 500);}
};
</script>

3. 更新阶段（Update Hooks）

beforeUpdate

在数据更新前访问旧DOM。

beforeUpdate 钩子函数是在数据更新之前被调用的，此时Vue实例的数据已经更新，但是DOM还没有被重新渲染。这个钩子函数可以用来在数据更新之前执行一些操作，尤其是那些需要依赖于旧DOM状态的操作。以下是 beforeUpdate 钩子的一些具体使用场景和详细说明：

示例1. 获取和记录旧的DOM状态

当组件的数据发生变化，但在DOM更新之前，可以使用 beforeUpdate 钩子来获取和记录旧的DOM状态，以便后续比较或操作。

export default {data() {return {message: 'Hello'};},beforeUpdate() {// 获取当前DOM元素的文本内容const oldText = this.$el.textContent;console.log('Old text:', oldText);// 可以将旧文本保存起来，用于后续比较或其他操作}
};

示例2. 比较新旧数据，避免不必要的DOM更新

在数据更新前，可以比较新旧数据，如果数据没有实质性变化，可以避免进行DOM更新，从而提高性能。

export default {data() {return {items: [1, 2, 3]};},beforeUpdate() {// 比较新旧数据if (this.items.length === this.$el.children.length) {// 数据没有变化，避免更新DOMthis.preventUpdate = true;}},updated() {if (this.preventUpdate) {this.preventUpdate = false;// 取消或重置一些状态}}
};

示例3. 清理或解绑旧的事件监听器

如果组件的DOM元素绑定了事件监听器，且数据更新可能导致DOM元素被重新渲染，可以在 beforeUpdate 钩子中解绑这些事件监听器，以避免内存泄漏。

export default {mounted() {// 绑定事件监听器this.$el.addEventListener('click', this.handleEvent);},beforeUpdate() {// 在数据更新前解绑事件监听器this.$el.removeEventListener('click', this.handleEvent);},methods: {handleEvent() {// 事件处理逻辑}}
};

示例4. 手动触发依赖于当前DOM状态的操作

在某些情况下，可能需要在数据更新前手动触发依赖于当前DOM状态的操作，比如计算元素的尺寸、位置等。

export default {data() {return {content: 'Some text'};},beforeUpdate() {// 在数据更新前计算元素的尺寸const oldHeight = this.$el.clientHeight;console.log('Old height:', oldHeight);// 可能需要对旧尺寸进行一些处理}
};

注意事项

• 在 beforeUpdate 钩子中操作DOM时，应确保操作是基于当前即将被更新前的DOM状态。
• beforeUpdate 钩子中不应该直接修改数据，这可能会导致额外的更新循环。
• 如果需要确保操作的是更新后的DOM，应该使用 updated 钩子。

使用 beforeUpdate 钩子时，应该仔细考虑何时需要访问和操作旧的DOM状态，以及如何处理这些操作以确保组件的行为符合预期。

---

updated

执行依赖于更新后DOM的操作。

updated 钩子函数是在组件DOM更新之后被调用的。这意味着在 updated 钩子执行时，所有的数据变化都已经反映到DOM上。以下是 updated 钩子的一些具体使用场景和详细说明：

示例1. 访问更新后的DOM元素

当组件的数据更新后，可能需要获取更新后的DOM元素信息，比如尺寸、位置等。

export default {data() {return {width: 100};},methods: {updateWidth(newWidth) {this.width = newWidth;}},updated() {// 获取更新后的元素宽度const newWidth = this.$el.clientWidth;console.log('Updated width:', newWidth);// 可以根据新的尺寸进行一些操作，比如调整其他元素的布局}
};

示例2. 执行依赖于DOM状态的操作

某些操作需要在DOM更新之后才能正确执行，比如依赖新DOM状态的计算、初始化第三方库等。

案例：初始化第三方图表库

export default {data() {return {chartData: []};},methods: {fetchData() {// 获取数据this.chartData = [...];}},updated() {// 确保DOM更新后初始化图表if (this.chartData.length > 0) {this.initializeChart();}},methods: {initializeChart() {// 使用第三方图表库初始化图表new Chart(this.$refs.chart, {// 配置选项});}}
};

示例3. 重新绑定事件监听器

如果组件的DOM元素在更新后发生了变化，比如增加了新的子元素，可能需要重新绑定事件监听器。

export default {data() {return {items: []};},methods: {addItem() {this.items.push({ id: this.items.length + 1 });},handleItemClick(item) {// 处理点击事件}},updated() {// 为新增的子元素绑定点击事件this.$refs.items.forEach(item => {item.addEventListener('click', this.handleItemClick);});}
};

示例4. 动画和过渡效果

在数据更新后，对DOM元素应用动画或过渡效果，以平滑地展示变化。

export default {data() {return {show: false};},methods: {toggleShow() {this.show = !this.show;}},updated() {// 确保DOM更新后应用过渡效果if (this.show) {this.$refs.content.classList.add('fade-in');} else {this.$refs.content.classList.remove('fade-in');}}
};

注意事项

• 在 updated 钩子中访问DOM时，应确保操作是基于最新更新的DOM状态。
• 如果在 updated 钩子中修改了数据，可能会触发额外的更新周期，导致性能问题。
• 对于复杂的DOM操作或动画，考虑使用Vue的过渡和动画系统来提高性能和可维护性。

使用 updated 钩子时，应当谨慎地执行那些确实需要在DOM更新之后进行的操作，以避免不必要的性能开销和潜在的错误。

4. 卸载阶段（Unmounting Hooks）

beforeUnmount

使用场景：解绑事件监听器，清理资源。

beforeUnmount 钩子函数是在组件实例即将被销毁之前调用的。这个钩子提供了一种在组件被移除之前执行清理工作的机会，确保不会留下任何悬挂的事件监听器或未清理的资源。以下是 beforeUnmount 钩子的一些具体使用场景和详细说明：

示例1. 解绑全局事件监听器

如果组件在创建时添加了全局事件监听器（如窗口事件、键盘事件等），在组件销毁前需要解绑这些监听器，以避免内存泄漏。

export default {mounted() {window.addEventListener('resize', this.handleResize);},beforeUnmount() {window.removeEventListener('resize', this.handleResize);},methods: {handleResize() {// 处理窗口大小变化}}
};

示例2. 清理定时器和间隔器

组件中如果有使用 setTimeout 或 setInterval 设置的定时器，需要在组件销毁前清除这些定时器，避免它们在组件销毁后仍然执行。

export default {data() {return {timer: null};},mounted() {this.timer = setTimeout(() => {// 执行定时任务}, 1000);},beforeUnmount() {clearTimeout(this.timer);}
};

示例3. 取消网络请求

如果组件中有发起的网络请求（如使用 XMLHttpRequest 或 fetch），需要在组件销毁前取消这些请求，避免它们在组件销毁后仍然执行回调。

export default {data() {return {request: null};},mounted() {this.request = fetch('/api/data').then(response => {// 处理响应});},beforeUnmount() {if (this.request) {this.request.cancel(); // 如果fetch支持取消，则取消请求}}
};

示例4. 解绑第三方库实例

如果组件使用了第三方库（如地图库、图表库等），并创建了对应的实例，需要在组件销毁前正确地清理这些实例。

export default {mounted() {this.mapInstance = new MapLibrary.Map(this.$refs.mapContainer);},beforeUnmount() {this.mapInstance.destroy(); // 调用第三方库的销毁方法}
};

示例5. 清理Web Workers

如果组件使用了Web Workers，在组件销毁前应该正确地终止这些workers。

export default {data() {return {worker: null};},mounted() {this.worker = new Worker('worker.js');},beforeUnmount() {this.worker.terminate(); // 终止Web Worker}
};

示例6. 解绑自定义事件监听器

如果组件通过 $emit 或 $on 添加了自定义事件监听器，需要在组件销毁前解绑这些事件。

export default {mounted() {this.$on('custom-event', this.handleCustomEvent);},beforeUnmount() {this.$off('custom-event', this.handleCustomEvent);},methods: {handleCustomEvent() {// 处理自定义事件}}
};

注意事项

• 确保 beforeUnmount 钩子中的清理逻辑不会触发额外的更新周期。
• 如果组件被缓存（如使用 <keep-alive>），beforeUnmount 不会被调用，此时应该使用 deactivated 钩子来清理资源。
• 对于可能引起内存泄漏的资源，务必在 beforeUnmount 中进行清理

---

unmounted

执行清理操作，如清除定时器。

unmounted 钩子函数是在组件实例被销毁之后调用的。这个钩子函数确保了组件已经从DOM中移除，且相关的响应式连接已经被断开。以下是 unmounted 钩子的一些具体使用场景和详细说明：

示例1. 清除定时器

组件中如果有使用 setTimeout 或 setInterval 设置的定时器，在组件被销毁后，需要确保这些定时器不再执行，以避免内存泄漏和不必要的计算。

export default {data() {return {timeoutId: null};},methods: {scheduleTask() {this.timeoutId = setTimeout(() => {// 执行定时任务}, 1000);}},mounted() {this.scheduleTask();},unmounted() {if (this.timeoutId) {clearTimeout(this.timeoutId);}}
};

示例2. 停止动画帧

如果组件使用了 requestAnimationFrame 来执行动画，那么在组件卸载后应该停止这些动画帧，以避免在看不见的组件上执行不必要的计算。

export default {data() {return {frameId: null};},methods: {animate() {// 动画逻辑this.frameId = requestAnimationFrame(this.animate);}},mounted() {this.animate();},unmounted() {if (this.frameId) {cancelAnimationFrame(this.frameId);}}
};

示例3. 断开WebSockets连接

如果组件建立了WebSocket连接，在组件卸载后应该关闭这个连接，以避免资源浪费和潜在的数据接收问题。

export default {data() {return {socket: null};},mounted() {this.socket = new WebSocket('wss://example.com/socket');this.socket.onmessage = this.handleMessage;},unmounted() {if (this.socket) {this.socket.close();}},methods: {handleMessage(event) {// 处理接收到的消息}}
};

示例4. 清理第三方库实例

如果组件使用了第三方库（如视频播放器、图表库等），并且创建了实例，在组件卸载后应该清理这些实例，释放资源。

export default {data() {return {player: null};},mounted() {this.player = new VideoPlayer(this.$refs.videoPlayer);},unmounted() {if (this.player) {this.player.dispose(); // 调用第三方库的清理方法}}
};

示例5. 清理DOM事件监听器

如果组件直接在DOM元素上添加了事件监听器，而不是通过Vue的事件系统，那么在组件卸载后应该移除这些监听器。

export default {mounted() {this.$refs.button.addEventListener('click', this.handleClick);},unmounted() {this.$refs.button.removeEventListener('click', this.handleClick);},methods: {handleClick() {// 处理点击事件}}
};

注意事项

• 在 unmounted 钩子中执行的操作不应依赖于Vue实例的状态或响应式系统，因为此时实例已经不再可用。
• 如果组件使用了 <keep-alive> 标签，则 unmounted 钩子不会在组件隐藏时被调用，而是在组件被销毁时调用。
• 对于需要清理的资源，确保在 unmounted 钩子中进行了适当的处理，以避免潜在的资源泄漏问题

---

合理利用这些钩子，可以让我们的组件更加高效、可维护。在实际开发中，应根据具体场景选择合适的生命周期钩子来完成任务。