简述Vue中mixin与extend区别？

Vue面试题 5月前 0 83

在 Vue 中，mixin 和 extend 都是用来复用组件代码的方法，但它们有一些关键的不同：

Mixin：Mixin 是一种将组件选项（如 data、methods、computed 等）混入到另一个组件的方式。使用 Mixin 的目的是为了复用组件代码，减少重复。我们可以创建一个 mixin，然后在多个组件中使用它。当一个组件使用了 mixin，mixin 的所有选项将被混入该组件，如果组件和 mixin 有同名的选项，组件的选项将优先。
```
const myMixin = {
 created() {
   console.log('mixin hook called');
 },
};

new Vue({
 mixins: [myMixin],
 created() {
   console.log('component hook called');
 },
});

// => "mixin hook called"
// => "component hook called"
```
Extend：Extend 是一种基于一个组件创建新组件的方式，被称为组件继承。使用 extend，我们可以创建一个新组件，它继承了另一个组件的所有选项。和 mixin 不同的是，extend 创建的新组件是一个全新的组件，它不会影响到被继承的组件。同样的，如果新组件和被继承的组件有同名的选项，新组件的选项将优先。
```
const CompA = {
 template: `<div>A</div>`,
};

const CompB = Vue.extend(CompA);

const instanceB = new CompB(); // instanceB 是 CompA 的扩展
```

总的来说，mixin 更适合于跨多个组件共享功能，而 extend 更适合于基于一个组件创建一个新组件。