详细聊聊Vue的混入和继承

详细聊聊Vue的混入和继承

什么是混入？

混入是一个编程技术，它可以将一个对象的所有属性复制到另一个对象上。在Vue中，混入可以用来在多个组件之间共享代码。具体来说，混入提供了一种将重复代码抽象成可重用性组件的方式，而不是从对一个组件的功能进行继承。

下面是一个示例：

// 混入对象
const myMixin = {
  data() {
    return {
      message: 'Hello, World!'
    };
  },
  mounted() {
    console.log('混入对象中的mounted钩子。');
  }
};

// 使用混入对象的组件
Vue.component('my-component', {
  mixins: [myMixin],
  mounted() {
    console.log('组件中的mounted钩子。');
  }
});

在上述示例中，我们定义了一个名为myMixin的混入对象，它有一个名为message的数据属性和一个名为mounted的钩子函数。接下来，我们在一个具体的组件中使用mixins属性将myMixin混入到该组件中。这样，组件就可以访问myMixin中定义的message属性和mounted钩子函数了。

需要注意的是，混入对象中的属性会被合并到组件中，如果组件中有与混入对象中同名属性，则会被组件中的属性覆盖。此外，如果混入对象和组件中的属性都是对象类型，则它们会合并成一个新的对象。

什么是继承？

继承是一种面向对象的编程技术，它允许我们从已有的对象（即父对象）中继承属性和行为，并在子对象中对这些属性和行为进行扩展或重写。在Vue中，组件可以通过继承另一个组件来复用代码。

下面是一个示例：

// 父组件
Vue.component('my-parent', {
  data() {
    return {
      message: 'Hello, Parent!'
    };
  },
  mounted() {
    console.log('父组件中的mounted钩子。');
  }
});

// 子组件
Vue.component('my-child', {
  extends: 'my-parent',
  mounted() {
    console.log('子组件中的mounted钩子。');
  }
});

在上述示例中，我们定义了一个名为my-parent的父组件，并在其中定义了一个名为message的数据属性和一个名为mounted的钩子函数。接下来，我们在一个子组件中使用extends属性来继承my-parent组件。这样，子组件就可以访问my-parent组件中定义的message属性和mounted钩子函数了。需要注意的是，子组件中的mounted钩子函数会覆盖父组件中的mounted钩子函数。

混入和继承的区别和使用场景

混入和继承两种技术在Vue中都可以用来共享代码，但它们适合应用于不同的场景：

混入

适用场景：

• 多个组件需要共享一些公共的代码。
• 需要在多个组件中添加相同的选项，比如页面的title。
• 需要在多个组件中使用相同的方法。

优点：

• 提供了一种将重复代码抽象成可重用性组件的方式。
• 可以在组件中多个混入对象，从而实现优秀的代码复用方式。

缺点：

• 混入属性会被多个组件共享，可能导致冲突。

继承

适用场景：

• 在现有组件的基础上创建新的组件。
• 需要在子组件中扩展基础组件的功能。

优点：

• 提供了一种从已有的对象中继承属性和行为的方式。
• 可以通过继承和扩展组件的方式来改变组件的行为。

缺点：

• 只能在现有组件的基础上进行扩展，不适用于多个组件之间共享代码的场景。

示例说明

下面通过两条示例来说明混入和继承的具体用法：

示例1 - 混入

我们有两个组件，它们都需要使用一个相同的计算属性fullName，我们可以将这个计算属性定义在一个混入对象中，并将该混入对象混入到两个组件中：

// 混入对象
const nameMixin = {
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
};

// 组件1
Vue.component('my-component1', {
  mixins: [nameMixin],
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  }
});

// 组件2
Vue.component('my-component2', {
  mixins: [nameMixin],
  data() {
    return {
      firstName: 'Jane',
      lastName: 'Doe'
    }
  }
});

在上述示例中，我们定义了一个名为nameMixin的混入对象，并将其混入到了两个组件中。该混入对象中定义了一个名为fullName的计算属性，它根据传入的firstName和lastName属性来计算出一个完整的名字。

示例2 - 继承

我们有一个基础组件base-component，它有一个名为message的数据属性和一个名为mounted的钩子函数。现在，我们想要创建一个新的组件my-component，它需要继承base-component组件并在其中添加一个名为greet的方法：

// 基础组件
Vue.component('base-component', {
  data() {
    return {
      message: 'Hello, World!'
    };
  },
  mounted() {
    console.log('基础组件中的mounted钩子。');
  }
});

// 自定义组件
Vue.component('my-component', {
  extends: 'base-component',
  methods: {
    greet() {
      console.log('我想要向你问好。');
    }
  }
});

在上述示例中，我们定义了一个名为base-component的基础组件，并在其中定义了一个名为message的数据属性和一个名为mounted的钩子函数。接下来，我们在一个自定义组件中使用extends属性来继承base-component组件，并在其中添加了一个名为greet的方法。

现在，我们可以在my-component组件中访问base-component组件中定义的message属性和mounted钩子函数，并且还可以使用greet方法来向用户发送问候语。