Vue.js 中的 Extends 继承机制与组件复用实践

Vue.js 中的 extends 继承原理

Vue.js 中的 extends 主要用于在创建组件时继承另一个组件的选项。借助 Vue.extend
方法，开发者可以创建一个“子类”组件，它将继承父组件的属性、方法、生命周期钩子函数以及混合（mixins）等选项。在 Vue3 中，尽管Composition API 提供了全新的依赖注入和组合模式，但 extends 依然在某些场景下发挥作用，尤其是在使用 Options API 的时候。

示例演示 创建父组件 首先，定义一个基础组件 BaseComponent：

<!-- BaseComponent.vue -->
<template>
  <div class="base-component">
    <h3>Base Component</h3>
    <slot></slot>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      commonData: 'This comes from base component',
    };
  },
  methods: {
    baseMethod() {
      console.log('Executing base method');
    },
  },
};
</script>复制

继承并扩展父组件 接下来，使用 extends 创建一个继承自 BaseComponent 的子组件

<!-- DerivedComponent.vue -->
<script>
import BaseComponent from './BaseComponent.vue';
 
export default Vue.extend({
  extends: BaseComponent,
  data() {
    return {
      // 继承并扩展数据属性
      derivedData: 'This comes from derived component',
    };
  },
  methods: {
    // 继承并扩展方法
    derivedMethod() {
      this.baseMethod(); // 调用父组件的方法
      console.log('Executing derived method');
    },
  },
  mounted() {
    // 继承并扩展生命周期钩子
    console.log('Derived component mounted');
  },
});
</script>
 
<template>
  <!-- 可以重写或补充父组件的模板 -->
  <div class="derived-component">
    <h4>Derived Component</h4>
    <p>{{ commonData }}</p>
    <p>{{ derivedData }}</p>
    <button @click="derivedMethod">Click me</button>
  </div>
</template>复制

使用场景与注意事项 extends 继承常用于构建具有相似特性的组件家族，简化重复代码，增强代码组织性。然而，在 Vue3 中，Composition API 推崇的功能解耦原则让组件间的继承变得不再必需，更多的是通过组合（Composition）的方式实现逻辑复用。

使用 extends 时需要注意以下几点：

• 覆盖与扩展：子组件可以覆盖父组件的选项，如 data、methods、computed 等；未被覆盖的选项将被继承。

• 生命周期钩子：子组件可以拥有自己的生命周期钩子，并且会和父组件的钩子一起执行。

• 模板重写：子组件可以直接重写父组件的模板，或者在其基础上追加内容。

• Vue3 中的变化：在 Vue3 中，虽然 Vue.extend 依然可用，但随着 Composition API的引入，更倾向于使用组合式 API 进行逻辑复用。

总结来说，Vue.js 中的 extends 继承机制为我们提供了一种灵活的组件复用手段，但也要结合具体应用场景合理选择继承或组合的方式，以最大程度发挥组件化的优势，同时保持代码的清晰和高效。在实际开发中，根据项目的具体需求和团队的编码习惯，可以选择最适合的方式来组织和复用组件代码。