vue 生命周期

forgiveForever
312 阅读6分钟

Vue.js 中的生命周期钩子函数是一组在组件实例化、渲染、更新和销毁过程中触发的回调函数。这些生命周期函数提供了在不同阶段执行代码的能力，让你可以在组件生命周期的不同阶段进行操作和逻辑处理。

生命周期钩子函数及其详

  1. beforeCreate： 在实例初始化之后、数据观测 (data observer) 和 event/watcher 事件配置之前被调用。在这个阶段，组件实例被创建，但是数据和事件监听还没有被设置。常用于一些初始化的操作，例如获取初始数据、设置全局事件监听等。
  2. created： 在实例创建完成后被立即调用。在这个阶段，组件实例已经完成了数据观测，可以访问到 data 中的数据、computed 计算属性和 methods 方法，但尚未开始模板编译和挂载。常用于进行异步操作、发送网络请求等。
  3. beforeMount： 在模板编译完成并在页面上首次渲染之前被调用。在这个阶段，组件已经完成了数据初始化和计算属性的计算，但是尚未生成真实的 DOM 并插入页面。常用于访问组件渲染前的 DOM 元素或执行其他操作。
  4. mounted： 在组件挂载到页面并且首次渲染完成之后被调用。在这个阶段，组件已经生成真实的 DOM 并插入页面，可以进行 DOM 操作、访问组件渲染后的 DOM 元素、执行其他操作等。常用于进行第三方库的初始化、添加事件监听器等。
  5. beforeUpdate： 在组件数据更新之前、重新渲染之前被调用。在这个阶段，组件尚未重新渲染，但是数据已经更新。可以在此时访问到更新前的 DOM 状态，或执行一些准备更新的操作。
  6. updated： 在组件数据更新、重新渲染完成后被调用。在这个阶段，组件已经重新渲染，并且 DOM 已经更新完成。常用于处理更新后的 DOM，进行额外的操作、执行一些需要基于更新后状态的逻辑等。
  7. beforeUnmount (Vue 3.0+，替代了 beforeDestroy)： 在组件销毁之前被调用。在这个阶段，组件实例仍然完全可用，可以访问到所有的数据和方法。常用于执行一些清理操作、取消事件监听、销毁定时器等。
  8. unmounted (Vue 3.0+，替代了 destroyed)： 在组件销毁之后被调用。在这个阶段，组件实例及其所有的数据和方法已经被销毁，不再可用。常用于进行一些最终的清理操作、解绑全局事件等。

应用场景和具体例子

1.created阶段

在 created 阶段，可以进行网络请求获取初始数据，例如在 created 钩子函数中发送 AJAX 请求并将数据保存到组件的 data 属性中。

在 created 钩子函数中执行异步操作，如获取初始数据、初始化状态等。例如，使用 Axios 发起 HTTP 请求获取用户数据，并将结果保存到组件的 data 属性中。

created() {
  axios.get('/api/user')
    .then(response => {
      this.userData = response.data;
    })
    .catch(error => {
      console.error(error);
    });
}

2.mounted 阶段

在 mounted 阶段，可以执行 DOM 操作、初始化第三方库等，例如在 mounted 钩子函数中使用 axios 发起 HTTP 请求或初始化日期选择器插件。

在 mounted 钩子函数中执行 DOM 操作和初始化第三方库。例如，在组件挂载后，使用 jQuery 初始化滑块组件。

mounted() {
  $(this.$refs.slider).slider();
}

3.beforeUpdate 阶段

在 beforeUpdate 阶段，可以执行一些在组件更新前需要处理的逻辑，例如 如数据比对、记录日志、发送请求、保存滚动位置等。

注意：在 beforeUpdate 钩子函数中，你只能访问到更新前的数据状态，并且此时组件尚未重新渲染。因此，如果你想要访问更新后的 DOM 元素或执行其他操作，应该在 updated 钩子函数中进行。

beforeUpdate() { 
    console.log('Counter updated. Old value:', this.counter - 1); 
    console.log('New value:', this.counter); 
}

4.updated 阶段

在 updated 阶段，可以处理更新后的 DOM，例如使用第三方库操作更新后的元素、触发动画效果等。

updated 钩子函数的主要应用场景是在组件数据更新、重新渲染完成后处理更新后的 DOM 元素或执行其他操作。它提供了一个时机来访问更新后的组件状态，并进行相应的操作。

注意：在 updated 钩子函数中，你可以执行一些处理更新后的 DOM 的操作，例如获取更新后的 DOM 元素、与第三方库进行交互、触发动画效果等。然而，需要注意避免在 updated 钩子函数中修改数据，否则可能导致无限循环更新。

5.beforeUnmount 阶段

在 beforeUnmount 钩子函数中执行清理操作和释放资源。例如，在组件销毁前，取消订阅事件和销毁定时器。

beforeUnmount() {
  // 取消订阅事件
  EventBus.$off('eventName', this.eventHandler);

  // 销毁定时器
  clearInterval(this.timer);
}

6.destroyed 阶段

destroyed 钩子函数提供了一个在组件实例销毁后执行清理操作的时机。你可以在其中释放资源、解绑事件监听器等。合理使用 destroyed 钩子函数可以确保在组件销毁时执行必要的清理操作，以避免潜在的资源泄漏或错误行为。

注意：在 destroyed 钩子函数中，你可以执行一些最终的清理操作，如释放资源、解绑事件监听器、取消订阅等。但需要注意的是，由于组件已经被销毁，你无法再访问到组件的数据和方法。

注意点

  • 需要注意在不同生命周期函数中访问数据和方法的可用性。例如，在 beforeCreate 阶段无法访问到 data 数据，但可以访问到 props。

  • 在某些情况下，生命周期钩子函数可能不会按照你的期望顺序被调用，特别是在使用 v-if、动态组件等情况下，需要小心处理。

  • 避免在生命周期钩子函数中进行大量的同步计算和阻塞操作，以免影响组件的性能和响应能力。

优点

  • 生命周期钩子函数提供了在组件生命周期不同阶段执行代码的便利性，让你可以在合适的时机进行操作和逻辑处理。

  • 通过生命周期钩子函数，可以方便地进行组件初始化、数据请求、DOM 操作、清理操作等，使代码组织更清晰、可维护性更好。

缺点

  • 如果不正确地使用生命周期钩子函数，可能会导致代码逻辑混乱，难以维护。

  • 如果过度使用生命周期钩子函数，可能会造成代码分散和不易理解，增加调试和排查问题的难度。

总体来说，Vue.js 的生命周期钩子函数提供了灵活的钩子点，让你能够在组件的不同阶段执行代码。合理使用生命周期函数可以使代码更加清晰和可维护，但过度使用或不正确使用则可能带来一些问题。需要根据具体情况来决定是否使用和如何使用。

其他钩子函数

beforeRouteUpdate

在 beforeRouteUpdate 钩子函数中，根据新的路由参数执行相应的操作。例如，在路由参数变化时重新加载数据。

beforeRouteUpdate(to, from, next) {
  this.loadData(to.params.id)
    .then(() => {
      next();
    })
    .catch(error => {
      console.error(error);
      next(false); // 中止路由导航
    });
}
avatar
文章
阅读
粉丝