likes
comments
collection
share

Vue 3 组件的生命周期：从创建到销毁，探秘组件内部的时空旅程

作者站长头像
站长
· 阅读数 31

组件的创建是 Vue 3 开发中的重要部分。在本节中，我们将深入探讨如何创建 Vue 3 组件，包括使用单文件组件（SFC）的结构、组件选项对象的属性以及如何注册和使用组件。

单文件组件（SFC）的结构

单文件组件（SFC）是一种将模板、脚本和样式封装在同一个文件中的组件结构。它具有以下结构：

<template>
  <!-- 模板部分 -->
</template>

<script>
  // 脚本部分
</script>

<style>
  /* 样式部分 */
</style>

在模板部分，你可以编写组件的 HTML 结构。在脚本部分，你可以编写组件的逻辑和数据处理代码。在样式部分，你可以编写组件的样式规则。

使用单文件组件结构可以使组件的结构清晰明了，并且方便管理和维护组件的模板、脚本和样式。

组件选项对象的属性

在 Vue 3 中，组件是使用组件选项对象来定义的。以下是常用的组件选项属性：

  • name：指定组件的名称，用于在组件之间进行引用和通信。
  • data：组件的初始数据对象。
  • props：定义组件的属性，用于接收父组件传递的数据。
  • computed：计算属性，用于根据组件的状态和数据生成衍生值。
  • methods：定义组件的方法，用于处理事件和逻辑操作。
  • watch：监听组件数据的变化并执行相应的操作。
  • components：定义组件的子组件。
  • mounted：组件挂载后的钩子函数，用于执行初始化操作。

这些是常用的组件选项属性，根据实际需求，你可以根据需要添加其他属性或使用更高级的选项。

注册和使用组件

要使用 Vue 3 组件，需要先将其注册，然后可以在其他组件或模板中使用。下面是注册和使用组件的步骤：

  1. 在组件文件中，使用 Vue.createApp 方法创建一个应用实例，并通过 component 方法注册组件：
import { createApp } from 'vue';
import MyComponent from './MyComponent.vue';

const app = createApp();
app.component('my-component', MyComponent);
  1. 在其他组件或模板中使用注册的组件，可以通过标签形式或作为组件选项的属性使用：
<template>
  <div>
    <my-component></my-component>
    <my-component :prop-name="value"></my-component>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: 'Hello World',
      };
    },
  };
</script>

在上述代码中，我们使用了 <my-component> 标签来使用注册的组件，并为 <my-component> 标签设置了一个名为 prop-name 的属性，并通过 :prop-name="value" 的语法将父组件的 value 数据传递给子组件。

以上是创建、注册和使用 Vue 3 组件的基本步骤和示例代码。通过这些步骤，你可以轻松地创建组件并在应用程序中使用它们。

需要注意的是，如果你使用的是 Vue CLI 或其他脚手架工具，它们可能提供了更方便的方式来创建和组织组件。这些工具可以自动处理组件的注册和导入，使你能够更加专注于组件的开发和使用。

使用 Vue 3 的生命周期钩子函数，你可以在特定的阶段执行自定义的操作，以满足组件的需求和业务逻辑。

下面是一些常见的生命周期钩子函数的用途和示例：

  • beforeCreate：在组件实例被创建之前调用。此时，组件实例还没有被创建，无法访问组件的属性和方法。你可以在这个钩子函数中进行一些初始化操作，如设置默认数据、引入插件等。
export default {
  beforeCreate() {
    console.log('beforeCreate hook');
    // 初始化一些数据
    this.count = 0;
  },
};
  • created：在组件实例被创建完成后调用。此时，组件实例已经创建完成，可以访问组件的属性、方法和生命周期钩子函数。你可以在这个钩子函数中进行一些数据请求、事件订阅等操作。
export default {
  created() {
    console.log('created hook');
    // 发送数据请求
    fetchData().then((data) => {
      this.items = data;
    });
  },
};
  • beforeMount：在组件挂载之前调用。此时，模板编译已完成，但尚未将组件挂载到 DOM 中。你可以在这个钩子函数中进行一些操作，如修改数据、访问 DOM 元素等。
export default {
  beforeMount() {
    console.log('beforeMount hook');
    // 修改数据
    this.message = 'Updated message';
  },
};
  • mounted：在组件挂载到 DOM 后调用。此时，组件已经被挂载到页面中，可以访问 DOM 元素，进行初始化操作和调用外部库。
export default {
  mounted() {
    console.log('mounted hook');
    // 初始化外部库
    initializeExternalLibrary();
  },
};
  • beforeUpdate：在组件更新之前调用。当组件的数据发生变化，导致重新渲染时会触发此钩子函数。你可以在这个钩子函数中进行一些准备工作或阻止组件的更新。
export default {
  beforeUpdate() {
    console.log('beforeUpdate hook');
    // 在更新前保存滚动位置
    this.savedScrollPosition = window.pageYOffset;
  },
};
  • updated：在组件更新完成后调用。此时，DOM 已经更新完毕，可以进行操作和访问更新后的 DOM 元素。
export default {
  updated() {
    console.log('updated hook');
    // 恢复滚动位置
    window.scrollTo(0, this.savedScrollPosition);
  },
};
  • beforeUnmount：在组件卸载之前调用。在组件实例被销毁之前，可以进行一些清理工作和取消事件监听。
export default {
  beforeUnmount() {
    console.log('beforeUnmount hook');
    // 清理定时器
    clearInterval(this.timer);
  },
  • unmounted：在组件卸载完成后调用。此时，组件实例已经被销毁，不再可以访问组件的属性和方法。
export default {
  unmounted() {
    console.log('unmounted hook');
    // 执行一些清理操作
    cleanUp();
  },
};

生命周期钩子函数的执行顺序是固定的，按照创建、挂载、更新和卸载的顺序依次触发。在实际使用中，你可以根据需要选择合适的钩子函数来执行特定的操作。注意，有些钩子函数只在组件的创建和销毁阶段执行，而有些钩子函数在组件更新时也会被调用。

最佳实践：

  • 尽量避免在 beforeCreate 和 created 钩子函数中进行耗时的异步操作，以免阻塞组件的渲染和响应能力。
  • 在 mounted 钩子函数中可以进行异步数据的获取、调用外部库的初始化等操作。
  • 在 beforeUnmount 钩子函数中清理定时器、取消事件监听，释放资源。
  • 尽量避免在 beforeUpdate 和 updated 钩子函数中修改组件的数据，以免造成无限循环更新。
  • 使用生命周期钩子函数时，遵循单一职责原则，将不同的逻辑拆分到不同的钩子函数中，提高代码的可读性和可维护性。

理解和合理使用 Vue 3 的生命周期钩子函数，能够帮助你更好地控制组件的生命周期和行为，优化组件的性能，并实现自定义的操作和逻辑。

转载自:https://juejin.cn/post/7231457067180539941
评论
请登录