面试题之Vue2中的Mixin

概念

•   - Mixin是一种思想，也可以说是混入的意思，在很多开发框架中都实现了mixin混入

  - 通俗点说混入就是将组件的公共逻辑或者配置提取出来，在组件需要的时候，直接将提取的这部分混入到组件内部即可。这样可以减少代码冗余，也可以让后期项目维护起来更加容易。

使用

  1. 在vue中，mixin提供了一种非常灵活的方式，来分发vue组件中的可复用功能。

  2. 首先定义mixin，mixin其实就是一个对象，只不过这个对象里边包含了vue组件中的一些配置。比如data、methods、computed等等。

  3. 其次，在组件中使用mixins选项引入mixin

     导入mixins可以分为全局和局部导入

     - 全局导入是在任何一个组件中都可以直接使用

     - 局部导入类似组件的按需加载，在需要的时候引入然后使用

  4. 注意，mixin只是将逻辑或配置提取出来，而不是html或css

如果一个组件中改动了mixin中的数据，另一个引用了mixin的组件会受影响吗？

- 如果一个组件中改动了mixin中的数据，另一个引用了mixin的组件是会受影响的。mixin的作用是将一些可复用的逻辑和数据注入到多个组件中，他们共享一个数据源。而且在vue中，数据是响应式的，当数据发生变化时，所有引用该数据的地方都会自动更新。

  为了避免数据共享带来的问题，可以考虑在组件中使用mixin的时候，通过复制数据创建一个独立的副本，这样就能保证每个组件中使用的数据都是独立的

Mixin的优缺点？

  - 优点：

    1. 提高代码复用性

    2. 无需传递状态

    3. 维护方便，只需要修改一个地方即可

  - 缺点：

    1. 变量来源不明确，不利于阅读

    2. 同时使用多个mixin的时候，会出现命名冲突

    3. mixin和组件间多对多的关系，一个mixin可以被多个组件引用，一个组件也可以引入多个mixin，这样会提高复杂度，代码容易出错