在Vue2循环渲染的log-entry组件中使用Mixins的性能影响如何？

结论 #

你担心的「50个组件重复加载50次Mixin代码」的情况完全不会发生，该用法带来的性能损耗几乎可以忽略不计，完全可以正常使用。

底层机制说明 #

• 首先JS模块本身自带缓存机制：同一个Mixin文件无论被多少组件导入引用，模块代码只会在首次导入时执行1次，导出的Mixin对象是全局唯一的引用，不会生成多份重复的代码副本。
• 其次Vue对Mixin的合并逻辑做了优化：
  • 你把Mixin引入log-entry组件时，Vue只会在组件首次注册阶段执行1次选项合并，把Mixin的方法、属性合并到log-entry组件的配置中，这个过程和你后续实例化多少个log-entry组件没有关系。
  • 组件实例化时，所有实例共享组件构造函数的原型方法，Mixin里的$_myAppMixin_lookupUserById这类方法只会存在1份，不会给每个实例单独复制一份方法。

实际性能损耗评估 #

你当前这个场景的性能损耗可以完全忽略：

• 如果你这个Mixin只包含纯工具方法，没有额外的响应式状态、重复执行的生命周期钩子逻辑，即使实例化100+个log-entry组件，也不会产生可感知的性能开销。
• 即使Mixin包含生命周期钩子，也只是每个组件实例触发对应生命周期时多执行一段Mixin的钩子逻辑，100级别的实例数量下，这个开销用户完全感知不到。

额外小建议 #

你贴的v-for代码有个语法错误，多了一个多余的右括号，另外不建议用index作为v-for的key，如果log条目有唯一ID，优先用唯一ID作为key可以优化列表重渲染性能：

<!-- 修正后写法 -->
<log-entry v-for="(log, index) in logs" :key="log.id || index" :log="log" />

内容的提问来源于stack exchange，提问作者Josh