前端Vue篇之简述 mixin、extends 的覆盖逻辑

目录

简述 mixin、extends 的覆盖逻辑

Mixin案例参考

// mixinconst myMixin ={data(){return{message:'Hello, from mixin!'};}};// 组件exportdefault{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优先级更高。合并成一个新的对象provideprovide选项的合并方式是将其合并为一个对象，允许在mixin和组件中同时定义provide将provide对象合并成一个新的对象props组件自身的props会覆盖mixin中的props。如果存在冲突，组件自身的props优先级更高。直接替换methodsmethods选项会被合并到最终的选项中，如果有冲突，组件的methods会覆盖mixin中的methods。合并成一个新的对象injectinject选项的合并方式是将其合并为一个数组，允许在mixin和组件中同时定义inject将inject数组合并成一个新的数组computedcomputed属性会被合并到最终的选项中，对象中相同名字的属性会被覆盖。合并成一个新的对象组件选项合并策略中，除了上述几个特殊的属性外，其他选项都采用对象合并的方式。如果有冲突，组件自身的选项会覆盖mixin中的选项。对象合并过滤器过滤器不会直接合并，而是按照就近原则，即如果有冲突，则使用组件本身的过滤器。就近原则指令属性指令属性也是按照就近原则，如果有冲突，则使用组件本身的指令属性。就近原则elel不参与合并，因为它通常在实例化时传递给Vue构造函数。不适用propsDatapropsData不参与合并，因为它通常在实例化时传递给Vue构造函数。不适用watchwatch选项会被合并到最终的选项中，对象中相同名字的属性会被覆盖。合并成一个新的对象HOOKS 生命周期钩子生命周期钩子的合并方式是将它们合并为数组，并且按照顺序依次调用。将生命周期钩子函数合并成一个新的数组

  Mixin 和 Extends的合并逻辑

Mixin

Mixin允许我们定义可复用的组件选项，这些选项会被合并到组件中。当一个组件使用了mixin时，mixin中的属性和方法会被合并到组件中。Mixin 钩子按照传入顺序依次调用，并在调用组件自身的钩子之前被调用。

// mixinconst myMixin ={created(){
    console.log('Mixin created')}}// 组件exportdefault{mixins:[myMixin],created(){
    console.log('Component created')}}

Extends

Extends主要是为了便于扩展单文件组件。它接收一个对象或构造函数，可以用来创建基础组件，并在其上进行扩展。

// 基础组件const baseComponent ={created(){
    console.log('Base component created')}}// 扩展组件exportdefault{extends: baseComponent,created(){
    console.log('Extended component created')}}

总结

• Mixin允许我们将可复用的逻辑组织成对象，然后将其合并到组件中。
• Extends允许我们创建基础组件，并在其基础上进行扩展，类似于继承的概念。
• 在使用这两种方式时，需要注意合并逻辑和钩子函数的执行顺序，以确保正确地组合和扩展组件的行为。

mergeOptions 的执行过程

mergeOptions的执行过程是Vue在初始化组件时用来合并组件配置项的方法。这个过程涉及了对组件选项的合并，包括从构造函数、mixin和继承等不同来源的选项进行合并以生成最终的组件选项。

1. 处理构造函数选项：首先，Vue会将构造函数（即组件定义）中的选项与全局配置选项进行合并。
2. 处理Mixin：接着，Vue会处理传入组件中的mixins选项。这个过程会将每个mixin中的选项与之前已经合并的选项进行递归合并。
3. 处理继承：如果组件使用了extends属性，Vue会将其指向的组件进行解析，并将该组件的选项与之前已经合并的选项进行递归合并。
4. 最终合并：在这些步骤完成后，Vue会得到一个包含了所有选项的最终组件配置。这些选项可能包括data、props、methods等等。
5. 返回结果：最终合并后的选项被用来实例化组件，为组件的行为和特性提供基础。

总体而言，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')}})// 实例化组件newMyComponent()

思路描述

1. 首先，定义了一个名为myMixin的混入对象，它包含了data属性和created生命周期钩子。
2. 然后，定义了一个名为MyComponent的组件，使用Vue.extend方法创建。在这个组件中，我们引入了上述的混入对象，并且定义了自己的data属性和created生命周期钩子。
3. 最后，实例化了MyComponent。

mergeOptions 执行过程

1. 当实例化MyComponent时，Vue会执行mergeOptions方法来合并组件的选项。
2. Vue首先处理构造函数选项，即MyComponent本身的选项。
3. 接着，处理混入对象myMixin的选项。这个过程会将myMixin中的data属性与MyComponent中的data属性进行合并，以及其他选项的递归合并。
4. 如果有继承，也会将继承的组件选项进行合并。
5. 最终，得到一个包含了所有选项的最终组件配置。
6. 这些选项可能包括data、methods、created等等。
7. 最终合并后的选项被用来实例化组件，为组件的行为和特性提供基础。

注意事项

• 在合并过程中，如果遇到相同名称的属性或钩子，Vue会根据一定的策略进行合并或覆盖。
• 合并是一个递归的过程，涉及到不同来源（构造函数、混入、继承）的选项的深度合并。
• 合并完成后，最终的组件选项将被用于实例化组件。

总结

mergeOptions的执行过程是一个非常关键的步骤，它确保了组件的各种选项能够正确地被合并，从而形成最终的组件配置。这个过程涉及到对不同来源的选项进行递归合并，确保组件的行为和特性能够正常运作。

持续学习总结记录中，回顾一下上面的内容：
Mixin是一种非常有用的工具，能够帮助我们在Vue组件中实现可复用的逻辑。然而，在使用Mixin时，需要小心命名冲突和意外覆盖的问题。确保理解组件和Mixin之间的属性和方法合并规则，以便正确地利用它们来构建更加灵活和可维护的Vue应用程序。
Mixin和Extends的覆盖逻辑是在Vue组件中合并选项时的处理方式。当使用Mixin时，如果组件自身和Mixin具有相同名称的属性或方法，组件自身的将会覆盖Mixin中的。而在使用Extends时，组件自身的选项会覆盖Extends的选项。mergeOptions的执行过程涉及将构造函数选项、Mixin选项和Extends选项进行深度合并，确保最终生成的组件配置包含了所有来源的选项，并按照一定规则进行合并，以确保组件行为和特性正常运作。