前端开发实用技巧：mixin提高代码复用率

mixin从理论到实践

---

一、什么是mixin

• mixin混入 — Vue.js (vuejs.org)

• 官方解释： 混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

• 个人理解： 如果在写vue组件时，发现有几个组件的逻辑类似，那么就可以使用vue的mixin（混入），把类似的逻辑抽离出来封装成js，然后在各个组件引入使用。mixin是一种可以在Vue组件中复用代码的方式。mixin可以包含任意的组件选项，例如data、methods、computed、watch等。当一个组件使用mixin时，它会将mixin中的选项与组件本身的选项合并。如果有选项名称冲突，一般情况下组件选项将覆盖mixin选项。

• 优势：

  • 代码重用和维护性：通过使用混入，可以将常用的样式、功能或逻辑集中在一个地方定义，避免了代码的重复编写，提高了代码的重用性。当需要修改或更新某个样式或功能时，只需修改混入的定义，所有使用该混入的组件或模板都会自动应用更新，提高了代码的维护性。
  • 抽象和可配置性：混入可以将通用的代码逻辑抽象出来，并提供参数以使其具有灵活性。通过传递不同的参数给混入，可以根据具体的需求来定制代码逻辑和样式，实现更强的可配置性。
  • 组件模块化和复合性：混入能够将多个功能或样式组合在一起，形成更丰富的组件模块。通过将不同的混入组合使用，可以快速创建出具有复杂功能和样式的组件，提高了前端开发的效率和灵活性。

• 劣势：

  • 命名冲突和可读性：过度使用混入可能导致命名冲突，特别是当多个混入定义了相同的样式或功能时。这可能会增加代码的复杂性和维护成本，并降低代码的可读性。
  • 依赖关系和耦合：使用混入可能导致组件之间产生依赖关系，并增加它们之间的耦合度。如果修改了一个混入的定义，可能会影响到多个组件或模板，需要特别注意修改带来的潜在风险。
  • 性能影响：当多个混入被应用到一个组件或模板中时，可能会导致多余的代码和样式加载。这可能会对页面的性能产生一定影响，特别是在加载大量混入的情况下。

• 由于mixin会导致命名冲突和混乱的依赖关系、灵活性和可读性问题，以及会导致编译效率和性能问题，在 Vue 3 中引入了更加灵活和可组合的 Composition API。Composition API 允许以函数的形式编写逻辑，并将其作为可复用的组合函数在组件中使用。这种方式提供了更好的代码组织结构、更明确的依赖关系和更高的可读性。通过 Composition API，开发者可以更灵活地组合功能并避免命名冲突。

• 但并不意味着 mixin 完全没有价值，混入仍然可以在某些情况下提供一些价值和灵活性。在 Vue 2 中，它仍然是一种常用的代码重用机制。特别是对于较小规模的项目或具有简单需求的组件，使用 mixin 可以提供一种简单且灵活的方式来组织和复用代码。

• 在使用混入时，需要权衡利弊，合理使用，并确保良好的代码组织和命名规范，以最大化地发挥混入的优势并减少其潜在的缺点。

---

二、使用mixin

// 定义一个 Mixin 对象
const myMixin = {
  data() {
    return {
      message: 'Hello, Mixin!'
    }
  },
  methods: {
    greet() {
      console.log(this.message);
    }
  }
}

// 在组件中引入 Mixin
Vue.component('my-component', {
  mixins: [myMixin],
  mounted() {
    this.greet(); // 输出：Hello, Mixin!
  }
})

• 在这个例子中，定义了一个名为 myMixin 的 Mixin 对象，它包含了一个名为 message 的数据属性和一个名为 greet 的方法。然后，我们在一个组件中通过 mixins 选项引入了这个 Mixin。最终，在组件的 mounted 生命周期钩子中调用了 greet 方法，控制台输出了 Hello, Mixin!

---

三、mixin的合并策略

data选项

• 当一个组件和Mixin都拥有相同的data属性时，Vue会将它们合并成一个新的对象。如果是基本类型，组件的data属性将覆盖Mixin中的data属性，如果两个属性的值都是对象，则Vue会将它们深度合并，递归对比key，如果是同名key则会覆盖，如果不是同名的，则保留。

生命周期钩子

• 当一个组件和Mixin都定义了相同的生命周期钩子时，同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。

方法与计算属性

• 当一个组件和Mixin都包含相同名称的方法或计算属性时，组件的方法或计算属性会覆盖Mixin的方法或计算属性。

• 除了上面这些选项，还有比如components（组件），和directives(指令)等也是一样的逻辑，同名的会覆盖，以组件的为优先。

---

四、mixin辨析

与 Vuex 的区别

• Vuex： 用来做状态管理，vuex中定义的变量在每个组件中均可以使用和修改，在任一组件中修改此变量的值之后，其他组件中此变量的值也会随之修改。相当于所有组件共享。

• Mixins： 可以定义共用的变量，在每个组件中使用，引用组件中之后，各个变量是相互独立的，值的修改在组件中不会相互影响。组件直接使用是相互隔离的，数据互不影响。

与公共组件的区别

• 组件： 在父组件中引入组件，相当于在父组件中给出一片独立的空间供子组件使用，然后根据 prop 来传值，但本质上两者是相对独立的。

• Mixins： 在引入组件之后与组件中的对象和方法进行合并，相当于扩展了父组件的对象与方法，可以理解为形成了一个新的组件。

---

五、个人实践

• 前置情况：使用nust对项目进行重构，还是使用Vue2为主，且查询方案大量冗余，故使用mixin将相同代码进行抽离。

• 目录结构定义mixins的文件夹，并创建queryPlan.js文件

//导出
export const QueryPlan = {
    data() {
        return {
            list: {
                markets: [],
                themes: [],
                styles: [],
                plays: [],
            },
            // ......
        };
    },
    methods: {
        getMarkets() {
            // ...
        },
        getThemeList() {
            // ...
        },
        getPlays() {
            // ...
        },
        getStyles() {
            // ...
        },
        // ......
    },
    created() {
        // ......
    },
    mounted() {
        // ......
    },
};

• 创建好之后在.vue文件中引入即可