mixin和extends的区别和联系以及他们的覆盖逻辑

mixin 和 extends 都是 Vue.js 中用于组件复用和扩展的方式

Mixin (混入):

1. mixin 允许你定义一个包含选项的对象，然后将它混入到一个或多个组件中。这意味着你可以将相同的选项或功能应用到多个组件中。
2. mixin 中的选项会与组件的选项合并，如果出现冲突，组件的选项会覆盖 mixin 中的选项。
3. mixin 可以是全局定义的，也可以是局部定义的，取决于你在组件中如何使用它。

示例：

// 全局 mixin
Vue.mixin({
  created() {
    console.log('Global Mixin - Created Hook');
  }
});

// 在组件中使用 mixin
export default {
  mixins: [myMixin],
  created() {
    // 组件的 created 钩子
    console.log('Component Created Hook');
  }
}

Extends (扩展):

1. extends 允许你创建一个新的组件构造函数，它继承自现有的组件构造函数。这意味着你可以创建一个新的组件，同时继承原始组件的所有选项。
2. extends 中的选项会与原始组件的选项合并，如果出现冲突，新组件的选项会覆盖原始组件的选项。
3. extends 主要用于创建类似于原始组件的派生组件。

示例：

// 创建基础组件
const BaseComponent = {
  data() {
    return {
      message: 'Hello from BaseComponent',
    };
  },
  created() {
    console.log('BaseComponent Created Hook');
  },
};

// 使用 extends 创建派生组件
const DerivedComponent = Vue.extend(BaseComponent);

区别:

1. 主要区别在于用途和应用场景。mixin 用于将相同的功能应用于多个组件，而 extends 用于创建类似于原始组件的派生组件。
2. mixin 是对象形式的选项合并，而 extends 是用于创建新的组件构造函数。

覆盖逻辑:
在 Vue.js 中，无论是 mixin 还是 extends，选项的合并都会遵循一定的规则，通常是按照以下优先级进行合并和覆盖：

1. 当前组件的选项：组件自身定义的选项拥有最高的优先级。
2. extends 中的选项：如果你在 extends 中定义了选项，它们会与当前组件的选项合并，但如果出现冲突，当前组件的选项会覆盖。
3. mixin 中的选项：如果你使用了 mixin，它中定义的选项会与当前组件的选项合并，但如果出现冲突，当前组件的选项会覆盖。
4. 全局 mixin：如果你使用了全局 mixin，它中定义的选项会与当前组件的选项合并，但如果出现冲突，当前组件的选项会覆盖。

这个合并规则确保了组件在使用 mixin 或 extends 时能够灵活地覆盖和定制选项，同时保留了组件自身的特定配置。