目录
简述 mixin、extends 的覆盖逻辑Mixin案例参考思路描述注意事项Mixin 和 Extends的合并逻辑MixinExtends总结 mergeOptions 的执行过程代码案例思路描述mergeOptions 执行过程注意事项总结
简述 mixin、extends 的覆盖逻辑
Mixin案例参考
// mixinconst myMixin = { data() { return { message: 'Hello, from mixin!' }; }};// 组件export default { mixins: [myMixin], data() { return { message: 'Hello, from component!' }; }};思路描述
Mixin：当组件使用了mixin时，mixin中的属性和方法会被合并到组件中。如果组件和mixin具有相同的选项，则以组件的选项为准。在上面的例子中，组件和mixin都有data选项，但最终以组件的data为准，因此message将是"Hello, from component!"。 注意事项
当组件和mixin具有相同的选项时，以组件的选项为准。Mixin提供了一种可复用的逻辑组织方式，但可能导致命名冲突和意外覆盖问题，因此在设计时需要注意避免这些问题。| 属性名称 | 合并策略 | 合并函数 |
|---|---|---|
| data | 组件自身的data会覆盖mixin中的data。如果存在冲突，组件自身的data优先级更高。 | 合并成一个新的对象 |
| provide | provide选项的合并方式是将其合并为一个对象，允许在mixin和组件中同时定义provide | 将provide对象合并成一个新的对象 |
| props | 组件自身的props会覆盖mixin中的props。如果存在冲突，组件自身的props优先级更高。 | 直接替换 |
| methods | methods选项会被合并到最终的选项中，如果有冲突，组件的methods会覆盖mixin中的methods。 | 合并成一个新的对象 |
| inject | inject选项的合并方式是将其合并为一个数组，允许在mixin和组件中同时定义inject | 将inject数组合并成一个新的数组 |
| computed | computed属性会被合并到最终的选项中，对象中相同名字的属性会被覆盖。 | 合并成一个新的对象 |
| 组件 | 选项合并策略中，除了上述几个特殊的属性外，其他选项都采用对象合并的方式。如果有冲突，组件自身的选项会覆盖mixin中的选项。 | 对象合并 |
| 过滤器 | 过滤器不会直接合并，而是按照就近原则，即如果有冲突，则使用组件本身的过滤器。 | 就近原则 |
| 指令属性 | 指令属性也是按照就近原则，如果有冲突，则使用组件本身的指令属性。 | 就近原则 |
| el | el不参与合并，因为它通常在实例化时传递给Vue构造函数。 | 不适用 |
| propsData | propsData不参与合并，因为它通常在实例化时传递给Vue构造函数。 | 不适用 |
| watch | watch选项会被合并到最终的选项中，对象中相同名字的属性会被覆盖。 | 合并成一个新的对象 |
| HOOKS 生命周期钩子 | 生命周期钩子的合并方式是将它们合并为数组，并且按照顺序依次调用。 | 将生命周期钩子函数合并成一个新的数组 |
Mixin 和 Extends的合并逻辑
Mixin
Mixin允许我们定义可复用的组件选项，这些选项会被合并到组件中。当一个组件使用了mixin时，mixin中的属性和方法会被合并到组件中。Mixin 钩子按照传入顺序依次调用，并在调用组件自身的钩子之前被调用。
// mixinconst myMixin = { created() { console.log('Mixin created') }}// 组件export default { mixins: [myMixin], created() { console.log('Component created') }}Extends
Extends主要是为了便于扩展单文件组件。它接收一个对象或构造函数，可以用来创建基础组件，并在其上进行扩展。
// 基础组件const baseComponent = { created() { console.log('Base component created') }}// 扩展组件export default { extends: baseComponent, created() { console.log('Extended component created') }}总结
Mixin允许我们将可复用的逻辑组织成对象，然后将其合并到组件中。Extends允许我们创建基础组件，并在其基础上进行扩展，类似于继承的概念。在使用这两种方式时，需要注意合并逻辑和钩子函数的执行顺序，以确保正确地组合和扩展组件的行为。mergeOptions 的执行过程
mergeOptions的执行过程是Vue在初始化组件时用来合并组件配置项的方法。这个过程涉及了对组件选项的合并，包括从构造函数、mixin和继承等不同来源的选项进行合并以生成最终的组件选项。
处理构造函数选项：首先，Vue会将构造函数（即组件定义）中的选项与全局配置选项进行合并。
处理Mixin：接着，Vue会处理传入组件中的mixins选项。这个过程会将每个mixin中的选项与之前已经合并的选项进行递归合并。
处理继承：如果组件使用了extends属性，Vue会将其指向的组件进行解析，并将该组件的选项与之前已经合并的选项进行递归合并。
最终合并：在这些步骤完成后，Vue会得到一个包含了所有选项的最终组件配置。这些选项可能包括data、props、methods等等。
返回结果：最终合并后的选项被用来实例化组件，为组件的行为和特性提供基础。
总体而言，mergeOptions的执行过程可以被描述为一个递归的、深度合并不同来源选项的过程，最终生成了一个完整的组件选项对象，该对象包含了组件的所有配置信息。
代码案例
// 定义一个混入对象const myMixin = { data() { return { mixinData: 'Hello from Mixin' } }, created() { console.log('Mixin created') }}// 定义一个组件const MyComponent = Vue.extend({ mixins: [myMixin], data() { return { componentData: 'Hello from Component' } }, created() { console.log('Component created') }})// 实例化组件new MyComponent()思路描述
首先，定义了一个名为myMixin的混入对象，它包含了data属性和created生命周期钩子。然后，定义了一个名为MyComponent的组件，使用Vue.extend方法创建。在这个组件中，我们引入了上述的混入对象，并且定义了自己的data属性和created生命周期钩子。最后，实例化了MyComponent。 mergeOptions 执行过程
当实例化MyComponent时，Vue会执行mergeOptions方法来合并组件的选项。Vue首先处理构造函数选项，即MyComponent本身的选项。接着，处理混入对象myMixin的选项。这个过程会将myMixin中的data属性与MyComponent中的data属性进行合并，以及其他选项的递归合并。如果有继承，也会将继承的组件选项进行合并。最终，得到一个包含了所有选项的最终组件配置。这些选项可能包括data、methods、created等等。最终合并后的选项被用来实例化组件，为组件的行为和特性提供基础。 注意事项
在合并过程中，如果遇到相同名称的属性或钩子，Vue会根据一定的策略进行合并或覆盖。合并是一个递归的过程，涉及到不同来源（构造函数、混入、继承）的选项的深度合并。合并完成后，最终的组件选项将被用于实例化组件。总结
mergeOptions的执行过程是一个非常关键的步骤，它确保了组件的各种选项能够正确地被合并，从而形成最终的组件配置。这个过程涉及到对不同来源的选项进行递归合并，确保组件的行为和特性能够正常运作。
持续学习总结记录中，回顾一下上面的内容：
Mixin是一种非常有用的工具，能够帮助我们在Vue组件中实现可复用的逻辑。然而，在使用Mixin时，需要小心命名冲突和意外覆盖的问题。确保理解组件和Mixin之间的属性和方法合并规则，以便正确地利用它们来构建更加灵活和可维护的Vue应用程序。
Mixin和Extends的覆盖逻辑是在Vue组件中合并选项时的处理方式。当使用Mixin时，如果组件自身和Mixin具有相同名称的属性或方法，组件自身的将会覆盖Mixin中的。而在使用Extends时，组件自身的选项会覆盖Extends的选项。mergeOptions的执行过程涉及将构造函数选项、Mixin选项和Extends选项进行深度合并，确保最终生成的组件配置包含了所有来源的选项，并按照一定规则进行合并，以确保组件行为和特性正常运作。