幕雪

vue钩子函数：深入理解其作用、时机、用法与实践

是什么？Vue钩子函数的全貌

Vue钩子函数（Lifecycle Hooks），是Vue组件实例在其生命周期不同阶段被自动调用的特定函数。它们是预定义的JavaScript函数，允许开发者在组件创建、挂载、更新、销载等关键时刻执行自定义逻辑。理解并合理利用这些钩子函数，是构建健壮、高效Vue应用的基础。

Vue钩子函数的类型与作用

Vue组件的生命周期可以分为几个主要阶段，每个阶段都对应着一组或一个钩子函数。根据您使用的API风格，它们有不同的声明方式。

选项式API中的钩子

  1. 创建阶段 (Creation)：

    • beforeCreate()：在实例初始化之后，数据观测 (data observation) 和事件/侦听器的配置之前被调用。此时组件的data和methods都尚未初始化，无法访问。
    • created()：在实例创建完成后被立即调用。此时data和methods已初始化，可以访问数据并调用方法，但DOM尚未生成。适合进行数据初始化、异步请求（如API调用）。
  2. 挂载阶段 (Mounting)：

    • beforeMount()：在挂载开始之前被调用，render函数首次被执行。此时模板已编译成render函数，但尚未将DOM渲染到页面上。
    • mounted()：实例被挂载后调用，意味着组件的模板已被渲染到DOM中。此时可以进行DOM操作、集成第三方库（如ECharts）、获取DOM元素的尺寸等。这是执行直接DOM操作或集成需要DOM存在的库的最佳时机。
  3. 更新阶段 (Updating)：

    • beforeUpdate()：数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前。可以在这个钩子中访问更新前的DOM。
    • updated()：在组件的虚拟DOM重新渲染和打补丁之后调用。此时可以访问更新后的DOM。应避免在此钩子中修改状态（data），否则可能导致无限循环更新。
  4. 卸载阶段 (Unmounting)：

    • beforeUnmount()（Vue 3）/ beforeDestroy()（Vue 2）：在组件实例被卸载之前调用。此时组件实例仍然完全可用。适合执行清理操作，如取消订阅、清除计时器、解绑事件监听器等。
    • unmounted()（Vue 3）/ destroyed()（Vue 2）：在组件实例被卸载之后调用，所有指令都被解绑，所有事件监听器都被移除，所有子组件实例都被销毁。此时组件实例已完全不可用。
  5. 错误处理 (Error Handling)：

    • errorCaptured(err, vm, info)：当捕获一个来自子孙组件的错误时被调用。它可以接收错误对象、触发错误的组件实例以及错误来源信息。这使得父组件可以在子组件发生错误时集中处理，例如上报日志。
  6. 特殊场景 (Special Scenarios)：

    • activated()：当组件被<KeepAlive>缓存后再次激活时调用。
    • deactivated()：当组件被<KeepAlive>缓存后停用时调用。
    • renderTracked() (Vue 3, dev only)：当响应式依赖被追踪时调用。
    • renderTriggered() (Vue 3, dev only)：当响应式依赖导致组件重新渲染时调用。

组合式API中的钩子

在组合式API中，生命周期钩子函数通过在setup()函数内部调用以on开头的函数来注册。它们通常与选项式API中的钩子名称相对应，但去掉了before前缀并改为驼峰命名法。

  • onBeforeMount() 对应 beforeMount()
  • onMounted() 对应 mounted()
  • onBeforeUpdate() 对应 beforeUpdate()
  • onUpdated() 对应 updated()
  • onBeforeUnmount() 对应 beforeUnmount()
  • onUnmounted() 对应 unmounted()
  • onErrorCaptured() 对应 errorCaptured()
  • onActivated() 对应 activated()
  • onDeactivated() 对应 deactivated()
  • onRenderTracked() 对应 renderTracked()
  • onRenderTriggered() 对应 renderTriggered()

组合式API的钩子函数可以在setup()中被多次调用，每个调用都会注册一个独立的钩子实例，且它们会按照注册的顺序依次执行。这为逻辑复用和关注点分离提供了更大的灵活性。

为什么？理解钩子函数的必要性

Vue钩子函数的存在，是为了给开发者在组件生命周期的关键时刻提供“切入点”或“回调函数”。没有它们，我们将在何时何地执行某些依赖于组件状态或DOM存在性的操作将变得困难甚至不可能。

它们解决了什么问题？

  • 精确控制逻辑执行时机：例如，确保DOM元素存在后再进行操作（mounted/onMounted），或在组件即将销毁前清理资源以避免内存泄漏（beforeUnmount/onBeforeUnmount）。
  • 管理外部资源：网络请求、定时器、第三方库初始化、事件监听等，这些都需要在组件的不同生命周期阶段进行正确的管理。例如，通常在created或mounted中发起数据请求，在beforeUnmount中取消请求或清除定时器。
  • 分离关注点：将特定阶段的逻辑封装在对应的钩子函数中，使得组件代码更加清晰、易于维护。
  • 提供错误边界：errorCaptured钩子允许我们捕获子组件树中的错误，防止整个应用崩溃，并提供优雅的错误展示或上报机制。
  • 优化性能与体验：利用keep-alive结合activated和deactivated，可以缓存组件状态，避免频繁的创建和销毁，从而提升用户体验和应用性能。

在什么场景下必须使用它们？

以下是一些常见且必须或强烈建议使用钩子函数的场景：

  • 首次数据获取：组件加载时需要从服务器获取数据。通常在created（不依赖DOM）或mounted（依赖DOM，如计算元素尺寸后发请求）中发起。
  • DOM操作：当您需要直接操作组件渲染后的DOM元素时，如设置焦点、初始化图表库、获取元素高度等，必须在mounted或onMounted中进行，因为在此之前DOM可能还未渲染。
  • 资源清理：设置了定时器、监听了全局事件、订阅了RxJS流等，这些资源在组件销毁时必须被清除，否则可能导致内存泄漏或不必要的行为。这通常在beforeUnmount或onBeforeUnmount中完成。
  • 路由导航守卫关联：虽然不是直接的钩子函数，但在某些情况下，组件的生命周期与路由的导航守卫（如beforeRouteEnter）紧密关联，后者可以影响组件的创建时机。
  • 服务端渲染 (SSR)：在SSR环境下，只有beforeCreate和created（以及Vue 3的setup()同步部分）会被执行，因为没有DOM环境。这意味着依赖DOM的逻辑（如mounted）将不会在服务端执行，需要在客户端“补水”时再执行。

哪里？钩子函数的定义与调用时机

Vue钩子函数在哪里定义和使用？

  • 选项式API：在组件配置对象中，作为与data、methods、computed等同级的属性直接定义。

    
<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  created() {
    console.log('Component created. Data:', this.message);
    // 适合发起异步请求
  },
  mounted() {
    console.log('Component mounted. DOM ready.');
    // 适合DOM操作
  },
  beforeUnmount() { // Vue 3
  // beforeDestroy() { // Vue 2
    console.log('Component is about to be unmounted. Cleaning up.');
    // 适合资源清理
  }
};
</script>
  • 组合式API：在setup()函数内部通过导入并调用相应的onXxx函数来注册。

    
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const message = ref('Hello Composition API!');

onMounted(() => {
  console.log('Component mounted:', message.value);
  // DOM操作或初始化
});

onUnmounted(() => {
  console.log('Component unmounted. Performing cleanup.');
  // 资源清理
});
</script>

它们在组件生命周期的哪个阶段被调用？

钩子函数的名称本身就指示了它们被调用的时机。简单来说：

  1. beforeCreate / created：组件实例刚被创建，数据和方法尚未完全可用（beforeCreate）或已可用但DOM未渲染（created）。
  2. beforeMount / mounted：模板编译完成并准备挂载（beforeMount），或已挂载到DOM上（mounted）。
  3. beforeUpdate / updated：响应式数据变化导致组件即将更新（beforeUpdate），或已完成更新并重新渲染DOM（updated）。
  4. beforeUnmount / unmounted：组件实例即将被销毁（beforeUnmount），或已完全销毁（unmounted）。

父子组件中钩子函数的调用顺序是怎样的？

理解父子组件的生命周期钩子调用顺序对于调试和逻辑设计至关重要。

  1. 挂载阶段：

    父组件beforeCreate -> 父组件created -> 父组件beforeMount -> 子组件beforeCreate -> 子组件created -> 子组件beforeMount -> 子组件mounted -> 父组件mounted

    简而言之：父组件在准备挂载时会先让其所有子组件完成挂载，然后再完成自身的挂载。这确保了当父组件的mounted被调用时，其子组件的DOM也已准备就绪。

  2. 更新阶段：

    父组件数据变化 -> 父组件beforeUpdate -> 子组件（如果props变化）beforeUpdate -> 子组件updated -> 父组件updated

    简而言之：父组件在更新前通知子组件更新，子组件完成更新后，父组件才完成更新。

  3. 卸载阶段：

    父组件beforeUnmount -> 子组件beforeUnmount -> 子组件unmounted -> 父组件unmounted

    简而言之：父组件在销毁前先销毁其所有子组件，然后才完成自身的销毁。这保证了资源清理的顺序性和完整性。

多少？钩子函数的常见应用范式

一个Vue组件通常会用到多少个钩子函数并没有固定答案，这完全取决于组件的复杂性和需求。一个简单的展示组件可能只需要mounted来获取数据，而一个复杂的交互式组件可能需要多个钩子来管理其生命周期中的各种状态和副作用。

在特定的生命周期阶段，通常会执行多少操作？

  • created / onCreated (或 setup() 的同步部分)：

    • 发起数据请求（不依赖DOM）。
    • 初始化内部状态数据。
    • 订阅事件（如消息总线、全局事件）。
    • 非DOM依赖的第三方库初始化。

    这个阶段通常专注于数据和逻辑的准备，不涉及DOM。

  • mounted / onMounted：

    • 执行依赖DOM的初始化操作：例如，初始化D3.js图表、Video.js播放器、获取元素尺寸并调整布局。
    • 添加DOM事件监听器（例如，在document上监听点击事件）。
    • 可能再次发起依赖DOM尺寸或位置的数据请求。
    • 与其他JS框架或原生JS代码集成。

    这是与渲染后的视图进行交互的主要入口。

  • beforeUnmount / onBeforeUnmount：

    • 清除定时器（setTimeout, setInterval）。
    • 取消进行中的网络请求（避免内存泄漏或在组件已销毁后更新状态）。
    • 移除DOM事件监听器（尤其是添加到document或window上的）。
    • 解除对全局状态管理（如Vuex Store）的订阅。
    • 销毁第三方库实例（如地图实例、富文本编辑器实例）。

    这个阶段是进行资源清理和避免内存泄漏的最后机会。

  • updated / onUpdated：

    • 在DOM更新后执行某些操作，例如重新计算滚动位置、重新初始化一些依赖DOM尺寸变化的第三方库。
    • 警惕：通常不建议在这个钩子中修改响应式数据，这很容易导致无限更新循环。 如果必须修改，确保有严格的条件判断或使用nextTick。
  • activated / onActivated：

    • 当被<KeepAlive>缓存的组件再次显示时，重新获取数据或恢复滚动位置。
    • 重新激活一些资源，如计时器。
  • deactivated / onDeactivated：

    • 当被<KeepAlive>缓存的组件隐藏时，暂停计时器、暂停视频播放、清理临时状态。

如何？钩子函数的具体使用技巧与最佳实践

如何在选项式API中使用钩子函数？（示例代码）


<template>
  <div class="my-component">
    <h3>Options API Component</h3>
    <p>Message: {{ message }}</p>
    <div ref="myDiv">This is a div.</div>
  </div>
</template>

<script>
export default {
  name: 'OptionsLifecycleDemo',
  data() {
    return {
      message: 'Loading...',
      timer: null
    };
  },
  beforeCreate() {
    console.log('1. beforeCreate: Data and methods are not yet available.');
    // console.log(this.message); // undefined
  },
  created() {
    console.log('2. created: Data and methods are available. Fetching data.');
    // this.message = 'Data fetched!'; // Can modify data
    this.fetchData(); // Call a method
    this.timer = setInterval(() => {
      console.log('Timer running...');
    }, 1000);
  },
  beforeMount() {
    console.log('3. beforeMount: Template compiled, but DOM not rendered.');
    // console.log(this.$refs.myDiv); // undefined
  },
  mounted() {
    console.log('4. mounted: Component mounted to DOM. Performing DOM operations.');
    console.log('Div element:', this.$refs.myDiv);
    if (this.$refs.myDiv) {
      this.$refs.myDiv.style.backgroundColor = 'lightblue';
    }
  },
  beforeUpdate() {
    console.log('5. beforeUpdate: Data changed, about to re-render.');
    // Access old DOM state if needed
  },
  updated() {
    console.log('6. updated: Component re-rendered. DOM is updated.');
    // Access new DOM state
  },
  beforeUnmount() { // Vue 3: beforeUnmount, Vue 2: beforeDestroy
    console.log('7. beforeUnmount: Component is about to be unmounted. Cleaning up resources.');
    if (this.timer) {
      clearInterval(this.timer);
      console.log('Timer cleared.');
    }
  },
  unmounted() { // Vue 3: unmounted, Vue 2: destroyed
    console.log('8. unmounted: Component has been completely unmounted and destroyed.');
  },
  methods: {
    fetchData() {
      setTimeout(() => {
        this.message = 'Data loaded from server!';
        console.log('Data fetch simulated after 1s.');
      }, 1000);
    }
  }
};
</script>

<style scoped>
.my-component {
  border: 1px solid #ddd;
  padding: 15px;
  margin: 10px;
  border-radius: 5px;
}
</style>

如何在组合式API中使用钩子函数？（示例代码）


<template>
  <div class="my-component">
    <h3>Composition API Component</h3>
    <p>Count: {{ count }}</p>
    <div ref="myDivRef">This is a div from Composition API.</div>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, onUpdated } from 'vue';

const count = ref(0);
const myDivRef = ref(null); // Used to access the DOM element

let intervalId;

function increment() {
  count.value++;
}

onMounted(() => {
  console.log('Composition API: Component mounted.');
  if (myDivRef.value) {
    myDivRef.value.style.border = '2px solid green';
  }

  // Example: Set up a timer
  intervalId = setInterval(() => {
    console.log('Composition API Timer:', count.value);
  }, 2000);
});

onUpdated(() => {
  console.log('Composition API: Component updated. New count:', count.value);
});

onUnmounted(() => {
  console.log('Composition API: Component unmounted. Clearing timer.');
  if (intervalId) {
    clearInterval(intervalId);
  }
});
</script>

<style scoped>
.my-component {
  border: 1px solid #ddd;
  padding: 15px;
  margin: 10px;
  border-radius: 5px;
}
</style>

如何在钩子函数中进行DOM操作？

只有在组件被挂载到DOM之后，才能安全地进行DOM操作。因此，mounted()（选项式API）或onMounted()（组合式API）是执行DOM操作的正确时机。

在选项式API中，您可以使用this.$el（组件根元素）或this.$refs来访问特定的DOM元素。在组合式API中，您需要使用ref来创建一个模板引用，并在onMounted中访问其.value属性。 


// Options API
mounted() {
  console.log(this.$el); // The root DOM element of the component
  this.$refs.myInput.focus(); // Focus on an input element with ref="myInput"
},

// Composition API
import { ref, onMounted } from 'vue';
const myInputRef = ref(null);
onMounted(() => {
  myInputRef.value.focus();
});

如何在钩子函数中发起网络请求？

通常在created()（选项式API）或onMounted()（组合式API）中发起网络请求。

  • created / setup()同步部分：如果数据获取不依赖于DOM的存在，可以在这个阶段发起请求。这样做的好处是数据可以更早地开始加载。
  • mounted / onMounted：如果请求需要基于DOM计算（例如，根据元素宽度决定图片大小）或依赖于第三方DOM-ready库，则应在此阶段发起。 

// Options API
export default {
  data() {
    return { posts: [] };
  },
  async created() {
    try {
      const response = await fetch('https://jsonplaceholder.typicode.com/posts');
      this.posts = await response.json();
    } catch (error) {
      console.error('Failed to fetch posts:', error);
    }
  }
};

// Composition API
import { ref, onMounted } from 'vue';
const posts = ref([]);
onMounted(async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    posts.value = await response.json();
  } catch (error) {
    console.error('Failed to fetch posts:', error);
  }
});

如何在钩子函数中清理副作用？

任何在组件生命周期中创建的，且不随组件自动销毁的资源，都应该在组件销毁前手动清理。这主要发生在beforeUnmount()（Vue 3）/ beforeDestroy()（Vue 2）或onBeforeUnmount()。

  • 定时器：使用clearInterval()或clearTimeout()。
  • 事件监听器：使用removeEventListener()。
  • 第三方库实例：调用其提供的销毁方法。
  • WebSocket连接：调用close()方法。
  • 进行中的异步请求：取消请求，例如使用AbortController。 

// Options API
export default {
  data() {
    return { intervalId: null };
  },
  mounted() {
    this.intervalId = setInterval(() => {
      console.log('Interval running...');
    }, 1000);
    window.addEventListener('resize', this.handleResize);
  },
  beforeUnmount() {
    clearInterval(this.intervalId);
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize() {
      console.log('Window resized!');
    }
  }
};

// Composition API
import { ref, onMounted, onUnmounted } from 'vue';
const intervalId = ref(null);
const handleResize = () => {
  console.log('Window resized!');
};
onMounted(() => {
  intervalId.value = setInterval(() => {
    console.log('Interval running...');
  }, 1000);
  window.addEventListener('resize', handleResize);
});
onUnmounted(() => {
  clearInterval(intervalId.value);
  window.removeEventListener('resize', handleResize);
});

如何处理钩子函数中的异步操作？

钩子函数可以很好地处理异步操作。您可以使用async/await或Promise.then().catch()语法。重要的是要理解异步操作通常在钩子函数返回后才完成，不会阻塞组件的生命周期进程。

对于长时间运行的异步操作，特别是在created或mounted中发起的，务必在beforeUnmount中进行清理，以避免在组件被销毁后尝试更新一个不存在的组件状态。

如何在服务端渲染(SSR)中使用或考虑钩子函数？

在SSR环境中，Vue组件的生命周期钩子只有部分会被执行。

  • 只执行的钩子：beforeCreate和created（以及setup()中的同步逻辑）。
  • 不执行的钩子：所有与DOM相关的钩子（如beforeMount, mounted, beforeUpdate, updated, activated, deactivated, beforeUnmount, unmounted）都不会在服务端执行，因为服务端没有浏览器DOM环境。

这意味着，如果您在mounted中依赖DOM来获取数据或执行操作，这些操作只会在客户端“补水”(hydration)后执行。在SSR中，初始数据获取通常在created中进行，或者在asyncData（Nuxt.js）或setup()（通过<script setup>顶层await）等SSR框架提供的特定钩子或API中进行，以便在服务端渲染前获取数据。

在keep-alive组件中，钩子函数有何不同？

当组件被<KeepAlive>包裹时，它不会在不活动时被销毁，而是被缓存起来。因此，常规的beforeUnmount和unmounted钩子将不会被调用。取而代之的是：

  • activated() / onActivated()：组件首次挂载时会被调用，当它从缓存中再次被激活时也会被调用。适合在每次组件可见时重新加载数据或重置状态。
  • deactivated() / onDeactivated()：组件被停用（例如，从缓存中切换走）时调用。适合在此清理暂时性的资源，例如停止计时器或取消非必要的网络请求，以节省资源。

钩子函数与watch、computed等有何区别和联系？

  • 钩子函数 (Lifecycle Hooks)：关注组件自身的生命周期事件，提供在特定时刻执行逻辑的切入点。它们是组件“活着”的各个阶段的回调。
  • 计算属性 (computed)：基于其响应式依赖进行缓存，只有当依赖改变时才重新计算。它们关注的是数据的派生和缓存，是“声明式”地表示一个值。
  • 侦听器 (watch)：用于响应数据的变化并执行“副作用”。当一个或多个响应式数据源发生变化时，watch回调函数会被执行。它们关注的是“数据变化时的行为”。

联系：虽然用途不同，但它们可以协同工作。例如，您可能在mounted中初始化一个第三方库，然后在watch中监听某个数据变化，并根据变化更新该库的实例。或者，created中获取的数据可能被computed使用，并在模板中显示。钩子函数提供了“何时”执行，而computed和watch提供了“如何”响应数据。

综上所述，Vue钩子函数是Vue框架的核心组成部分，它们为开发者提供了强大的能力来管理组件的生命周期和副作用。无论是选项式API还是组合式API，理解并熟练运用这些钩子，是编写高效、可维护和健壮Vue应用的关键。通过在适当的时机执行相应的逻辑，我们可以确保组件的正确行为，避免资源泄漏，并提供流畅的用户体验。

vue钩子函数