使用 Vue 类组件时普通 extends 和使用 mixins 的区别答案

【问题标题】：Difference between normal extends and using mixins when using Vue Class Components使用 Vue 类组件时普通 extends 和使用 mixins 的区别
【发布时间】：2023-01-22 18:36:41
【问题描述】：

小心：我们正在使用 Vue 2，并且不打算切换到 Composition API（目前）。这个问题是关于vue-class-components的。

问题: The documentation of vue-class-components 声明我们可以使用“普通”extends 来继承单个父组件，或者使用 mixins 辅助函数来继承多个 mixins。在我的理解中，父组件只不过是一个 mixin（反之亦然），因此我想知道以下具有单个父组件的代码是否会产生相同的子组件：

import Vue from 'vue'
import Component from 'vue-class-component'

@Component
export class Parent extends Vue {
  p = 'P'
}

@Component
export class ChildOne extends Parent {
  created () {
    console.log(this.p)
  }
}

@Component
export class ChildTwo extends mixins(Parent) {
  created () {
    console.log(this.p)
  }
}

【问题讨论】：

标签： vue-class-components typescript vue.js vuejs2 vue-component vue-class-components

【解决方案1】：

在这种情况下，子组件的行为方式相同，都将从 Super 类继承 p 属性。

使用mixins 而不是extends 的主要优点是您可以从多个类继承。否则，如果你只需要从一个父类继承，恕我直言，那么使用 mixins 是没有意义的

例子

// mixins.js
@Component
export class Rock extends Vue {
  rock = 'rock'
}

@Component
export class Roll extends Vue {
  roll = 'roll'
}

import { Rock, Roll } from './mixins'

@Component
export class RockAndRoll extends mixins(Rock, Roll) {
  mounted() {
    // now this is mounted, let's rock and roll
    saySomething()
  }
  
  saySomething() {
    console.log(`let's ${this.rock} and ${this.roll}!`)
  }
}

【讨论】：