vue中的继承和组合 ✏️ ✏️ ✏️

前言

在面向对象编程中对数据和资源的使用是尤为重要的，以及不同类和组件的关系。在vue中其提供了两个方案，使我们能轻松实现各组件之间的关系：继承和组合

继承在 Vue 中如何工作？

在 Vue 中，继承允许你创建组件层次结构，其中子组件从其父组件继承属性和行为。这有助于避免代码重复，使你的代码更加模块化和可复用。

为了在 Vue 中实现继承，我们可以使用 extends选项，它允许子组件继承其父组件的属性。这些属性可以包括数据、计算属性、方法和生命周期钩子。

当子组件扩展父组件时，它会继承父组件中定义的所有属性，并根据需要添加或覆盖自身的属性。父组件中定义的任何数据或方法在子组件中都会自动可用，并且可以使用关键字访问 this

例如，如果父组件有一个data名为的属性message，则子组件可以使用访问它。this.message

javascript 复制代码

// 定义父组件 ParentComponent.vue
    
< script >
export  default 
{
data : () => ({
name : "父组件" 
})
}
------------------------------

//定义子组件，扩展父组件ChildComponent.vue 
<template> 
<p>我是{ { name }的子组件: </p>
</template> 
<script>

Vue 中的组合是如何工作的？

Vue 中的组合是指将较小的可复用组件组合在一起，从而创建更复杂的组件。为了实现组合，我们可以使用Vue 可组合项，它们是一些小的、碎片化的逻辑和响应式属性，更复杂的组件可以使用它们来增强自身功能。它们允许我们将逻辑分解为可复用的片段，从而围绕逻辑创建抽象和封装。

可组合函数是返回具有响应式属性和方法的对象的函数。我们可以在 Vue 组件中使用它们，方法是导入它们、调用函数并访问它们返回的属性。

通常，可组合函数会以为前缀，use以区别于常规函数。虽然这并非可组合函数正常工作的必要条件，但这是 Vue 开发者们一致认可的惯例，旨在提升代码的可读性。

ini 复制代码

// 使用随机字符传
import { ref } from "vue";

export const useRandomString = () =&gt; {
 const randomNumber = ref("");

 const generator = () =&gt; {
  let string = "abcdefghijklmnopqrstuvwxyz0123456789";
  randomNumber.value = "";
  for (let i = 0; i &lt; 10; i++) {
   randomNumber.value += string[Math.floor(Math.random() * 10 + 1)];
  }
 };

 return { randomNumber, generator };
};

在上面的代码片段中，我们定义了一个名为的可组合函数useRandomString。该函数返回一个ref和randomNumber一个用于生成随机数的函数generator。generator该函数将随机数暴露给任何将自身与该可组合函数组合的组件。因此，我们可以提取其中的逻辑，并在任何其他需要生成随机字符串的组件上复用它

继承VS组合

现在我们了解了继承和组合在 Vue 中的工作方式，让我们比较一下这两个过程如何处理某些任务。

代码重用

继承允许通过从父组件继承属性和方法来重用代码。而组合则只是一种通过组合更小、可重用的组件和函数来实现代码重用的方法。

紧密耦合

继承会导致组件之间紧密耦合，因此修改或扩展它们会有些困难。组合则能促进组件之间的松耦合，使它们更加模块化，更易于维护。

可扩展性

继承会使组件扩展变得困难，因为父组件的更改会影响子组件的行为。另一方面，组合则可以通过组合更小、更集中的组件来更轻松地扩展组件。

灵活性

组合比继承提供了更大的灵活性，因为组件可以通过不同的方式组合来实现不同的功能。另一方面，继承可能更加严格，因为它依赖于组件层次结构。

组件层次结构

继承依赖于层级组件结构，其中子组件从其父组件继承属性和方法。需要注意的是，组合允许组件在不依赖严格组件层级结构的情况下进行组合和分解。

继承：用例

创建可重用的基础组件：通过继承，您可以创建具有通用功能的基础组件，并对其进行扩展以创建更具体的组件。
覆盖父组件的行为：继承允许你通过重新定义方法或属性来覆盖父组件的行为
扩展第三方组件：继承使您能够扩展第三方组件以添加或修改功能
构建复杂组件：您可以使用继承来创建复杂组件，方法是将它们分解为更小、更易于管理的部分。

组成：用例

创建复杂的 UI 组件：通过组合，您可以通过组合较小的可重用组件来构建复杂的 UI 组件。
共享组件功能：组合允许您在组件之间共享功能，而不会产生紧密耦合
组件的自定义逻辑：组合将较小的组件和功能与自定义逻辑结合在一起
实现横切关注点：您可以使用组合来实现横切关注点，例如日志记录、错误处理和分析，方法是将它们组合到您的组件中

总结

在本文中，我们探讨了 Vue 中的继承和组合，并分析了它们的用例、实现方式以及优缺点。这两种方案使我们能定义好各组件的关系。然而，继承依赖于组件层次结构，而组合则不然。因此，组合通常提供更大的灵活性。