Vue 3源码深度解析之：`Vue`的`component`选项：`components`和`mixins`的合并策略。

各位观众老爷们，大家好！今天咱来聊聊Vue 3源码里那些“相亲相爱一家人”的合并策略，特别是component选项下的components和mixins。放心，保证不枯燥，咱用大白话把这些弯弯绕绕给捋顺了。

开场白：Vue的家庭伦理剧

Vue组件就像一个家庭，而components和mixins就像这个家庭里的不同成员，他们之间总要发生点关系，比如继承家产（属性）、共享秘密（方法）、甚至闹点小矛盾（命名冲突）。 Vue要做的，就是扮演一个公正的家长，协调好这些关系，让家庭和谐幸福。

第一幕：components – 组件注册的“户口本”

components选项，说白了，就是给子组件上户口的地方。你在这个选项里注册了组件，才能在父组件的模板里愉快地使用它。

1. 注册方式：简单粗暴，但有效

注册组件的方式很简单，就是键值对：

import MyButton from './MyButton.vue';
import MyInput from './MyInput.vue';

export default {
  components: {
    'my-button': MyButton, // 直接引入的组件
    MyInput // ES6简写，等同于 'MyInput': MyInput
  },
  template: `
    <div>
      <my-button>点我啊！</my-button>
      <MyInput />
    </div>
  `
}

这里，my-button和MyInput就是组件的“户口名”，而MyButton和MyInput则是组件的“身份证”（组件的定义）。

2. 合并策略：后来者居上

如果父组件和子组件都注册了同名的组件，会发生什么呢？ 答案是：父组件赢！ Vue采用的是“后来者居上”的策略，父组件的注册会覆盖子组件的注册。

假设我们有以下场景：

• ParentComponent 注册了 MyButton。
• ChildComponent 也注册了 MyButton。
• ParentComponent 引用了 ChildComponent。

那么，在ChildComponent内部，使用的仍然是ChildComponent自己注册的MyButton。但是在ParentComponent内部，使用的就是ParentComponent注册的MyButton。

第二幕：mixins – 共享代码的“亲戚团”

mixins选项，就像一个亲戚团，他们会把自己的技能和财产贡献出来，供大家一起使用。 但是，亲戚多了，也容易产生矛盾。

1. mixins 的基本用法

mixins 就是一个包含选项的对象数组。 这些选项会被合并到组件的选项中。

const myMixin = {
  data() {
    return {
      message: 'Hello from mixin!'
    };
  },
  mounted() {
    console.log('Mixin mounted!');
  },
  methods: {
    mixinMethod() {
      console.log('Mixin method called!');
    }
  }
};

export default {
  mixins: [myMixin],
  data() {
    return {
      componentMessage: 'Hello from component!'
    };
  },
  mounted() {
    console.log('Component mounted!');
  },
  template: `
    <div>
      <p>{{ message }}</p>
      <p>{{ componentMessage }}</p>
      <button @click="mixinMethod">Call mixin method</button>
    </div>
  `
};

在这个例子中，组件会继承 myMixin 的 data、mounted 钩子和 methods。

2. 合并策略：数据冲突？生命周期钩子？方法重名？

这才是重头戏！ Vue对mixins的合并策略非常讲究，不同的选项有不同的处理方式。

• 数据对象 (data)：深度合并，后来的覆盖

  data 选项会被深度合并。如果 mixin 和组件都有同名的属性，组件的属性会覆盖 mixin 的属性。

  const mixinA = {
    data() {
      return {
        name: 'Mixin A',
        age: 30
      };
    }
  };
  
  const mixinB = {
    data() {
      return {
        name: 'Mixin B',
        city: 'Beijing'
      };
    }
  };
  
  export default {
    mixins: [mixinA, mixinB],
    data() {
      return {
        name: 'Component',
        gender: 'Male'
      };
    },
    mounted() {
      console.log(this.name); // Component
      console.log(this.age);  // 30
      console.log(this.city); // Beijing
      console.log(this.gender); // Male
    }
  };

  可以看到，name 属性被组件的 Component 覆盖了，而 age 和 city 则保留了 mixin 的值。gender是组件独有的。

• 生命周期钩子函数：合并成数组，依次执行

  生命周期钩子函数，比如 mounted、created 等，会被合并成一个数组，然后依次执行。 mixin 的钩子函数会先于组件的钩子函数执行。

  const mixinA = {
    mounted() {
      console.log('Mixin A mounted');
    }
  };
  
  const mixinB = {
    mounted() {
      console.log('Mixin B mounted');
    }
  };
  
  export default {
    mixins: [mixinA, mixinB],
    mounted() {
      console.log('Component mounted');
    }
  };
  // 输出顺序：
  // Mixin A mounted
  // Mixin B mounted
  // Component mounted

  注意执行顺序，mixinA -> mixinB -> component。 这很重要，因为它决定了钩子函数执行的上下文和依赖关系。

• 值为对象的选项（如 methods、computed、watch）：合并，键冲突时组件胜出

  methods、computed、watch 这些选项都是对象，它们的合并方式类似于 components，采用的是“后来者居上”的策略。 如果 mixin 和组件有同名的属性，组件的属性会覆盖 mixin 的属性。

  const mixinA = {
    methods: {
      myMethod() {
        console.log('Mixin A method');
      },
      commonMethod() {
          console.log('Mixin A common method')
      }
    }
  };
  
  const mixinB = {
    methods: {
      myMethod() {
        console.log('Mixin B method');
      }
    }
  };
  
  export default {
    mixins: [mixinA, mixinB],
    methods: {
      myMethod() {
        console.log('Component method');
      },
      componentMethod(){
          console.log('Component method')
      }
    },
    mounted() {
      this.myMethod(); // Component method
      this.commonMethod(); // Mixin A common method
      this.componentMethod(); // Component method
    }
  };

  这里，myMethod 被组件的 myMethod 覆盖了，commonMethod和componentMethod正常执行。

3. 多个 mixins 的优先级

如果一个组件使用了多个 mixins，那么 mixins 的顺序也很重要。 前面的 mixin 会被后面的 mixin 覆盖。

const mixinA = {
  data() {
    return {
      message: 'Mixin A'
    };
  }
};

const mixinB = {
  data() {
    return {
      message: 'Mixin B'
    };
  }
};

export default {
  mixins: [mixinA, mixinB],
  mounted() {
    console.log(this.message); // Mixin B
  }
};

mixinB 会覆盖 mixinA 的 message 属性。

第三幕：源码剖析 – Vue 3 是怎么做到的？

Vue 3 的合并策略主要体现在 packages/compiler-core/src/options.ts 文件中。 虽然我们不能把所有代码都贴出来，但可以抓住核心逻辑。

1. mergeOptions 函数

mergeOptions 函数是合并选项的核心函数。 它会遍历组件和 mixins 的选项，然后根据不同的选项类型调用不同的合并策略。

2. 合并策略函数

Vue 3 定义了一系列合并策略函数，用于处理不同类型的选项。

• mergeData：用于合并 data 选项。
• mergeLifecycleHook：用于合并生命周期钩子函数。
• mergeAsObject：用于合并 methods、computed、watch 等选项。

3. 核心代码片段 (简化版，仅供参考)

// packages/compiler-core/src/options.ts

const strats = {}

// 合并生命周期钩子函数
strats[LifecycleHooks.MOUNTED] =
  strats[LifecycleHooks.UPDATED] =
  strats[LifecycleHooks.BEFORE_MOUNT] =
  strats[LifecycleHooks.BEFORE_UPDATE] =
  strats[LifecycleHooks.BEFORE_UNMOUNT] =
  strats[LifecycleHooks.UNMOUNTED] =
  strats[LifecycleHooks.ERROR_CAPTURED] =
  strats[LifecycleHooks.RENDER_TRACKED] =
  strats[LifecycleHooks.RENDER_TRIGGERED] =
    mergeLifecycleHook

// 合并 methods, computed, watch
strats[ComponentOptions.COMPUTED] =
  strats[ComponentOptions.WATCH] =
  strats[ComponentOptions.METHODS] =
    mergeAsObject

function mergeLifecycleHook(
  parentVal: Function[] | null,
  childVal: Function | Function[] | null
): Function[] {
  const res = childVal
    ? parentVal
      ? parentVal.concat(childVal)
      : isArray(childVal)
        ? childVal
        : [childVal]
    : parentVal
  return res ? dedupeHooks(res) : res
}

function mergeAsObject(parentVal: any, childVal: any): any {
  return childVal
    ? extend(extend({}, parentVal), childVal) // extend 类似 Object.assign, 后者覆盖前者
    : parentVal
}

这段代码展示了 Vue 3 如何合并生命周期钩子函数和 methods 等选项。 可以看到，生命周期钩子函数会被合并成数组，而 methods 则采用“后来者居上”的策略。

第四幕：实战演练 – 避免踩坑指南

了解了合并策略，我们就可以避免一些常见的坑。

• 命名冲突：谨慎命名

  尽量避免在 mixin 和组件中使用相同的属性名和方法名。 如果必须使用相同的名字，要清楚知道哪个会覆盖哪个。

• 生命周期钩子顺序：理清依赖关系

  要注意生命周期钩子的执行顺序。 如果 mixin 的钩子函数依赖于组件的数据，要确保数据已经初始化。

• 深度合并：小心修改

  在 data 选项中，要注意深度合并的影响。 修改一个属性可能会影响到其他 mixin 或组件的属性。

• 善用 provide/inject

  如果需要在多个组件之间共享数据，可以考虑使用 provide/inject，而不是 mixins。 provide/inject 更加灵活，也更容易维护。

第五幕：高级技巧 – 自定义合并策略

Vue 3 允许我们自定义合并策略。 这可以让我们更加灵活地控制选项的合并方式。

// packages/compiler-core/src/options.ts (简化版)

const strats = Object.create(null)

// 注册自定义合并策略
strats.myCustomOption = function (parentVal, childVal) {
  // 自定义合并逻辑
  return childVal ? childVal : parentVal
}

然后，在组件的 options 选项中，就可以使用 myCustomOption 了。

总结：Vue的家庭和睦之道

Vue 的 components 和 mixins 合并策略，就像一个家庭的伦理规则，它定义了不同成员之间的关系和责任。 了解这些规则，可以帮助我们更好地使用 Vue，写出更健壮、更易维护的代码。

选项类型	合并策略	备注
data	深度合并，后来的覆盖	如果 mixin 和组件都有同名的属性，组件的属性会覆盖 mixin 的属性。
生命周期钩子	合并成数组，依次执行	mixin 的钩子函数会先于组件的钩子函数执行。
methods、computed、watch	合并，键冲突时组件胜出	如果 mixin 和组件有同名的属性，组件的属性会覆盖 mixin 的属性。
components	后来者居上	父组件注册的组件会覆盖子组件注册的同名组件。
多个mixins	后面的mixin覆盖前面的mixin	多个mixin存在相同属性时，后面的mixin的属性会覆盖前面的mixin。

好了，今天的讲座就到这里。 感谢各位观众老爷的捧场！ 如果有什么疑问，欢迎在评论区留言。 咱们下期再见！