vue中minix

mixin

概念

Mixin在Vue中本质上是一个包含Vue选项的JavaScript对象。这些选项可以包括data、methods、computed、watch以及生命周期钩子（如created、mounted等）。这意味着你可以将组件中重复使用的代码片段或逻辑封装到Mixin中，然后在其他组件中通过混入（mixin）的方式使用这些代码

定义Mixin

需要创建一个Mixin对象，该对象包含你想要在多个组件中共享的选项。这些选项可以是data、methods、computed属性、watch或者生命周期钩子等。

	// myMixin.js  
export default {  
  data() {  
    return {  
      sharedData: 'This is data shared by the mixin'  
    }  
  },  
  methods: {  
    sharedMethod() {  
      console.log('This is a method shared by the mixin');  
    }  
  },  
  created() {  
    console.log('Mixin created hook called');  
  }  
  // 其他选项...  
};

引入并使用mixin

Vue组件中，可以通过mixins选项引入并使用定义的Mixin

		// MyComponent.vue  
<template>  
  <div>  
    <!-- 组件模板 -->  
  </div>  
</template>  
  
<script>  
import myMixin from './myMixin';  
  
export default {  
  mixins: [myMixin],  
  data() {  
    return {  
      componentData: 'This is data specific to the component'  
    }  
  },  
  created() {  
    console.log('Component created hook called');  
    this.sharedMethod(); // 调用Mixin中的方法  
  },  
  // 其他组件选项...  
};  
</script>

注意事项

命名冲突

如果Mixin和组件有同名的选项（如data中的属性或methods中的方法），Vue会进行合并或覆盖。

• 数据对象会进行递归合并
  • 重复的data如果都是对象，进行递归合并
  • 重复的data如果非对象，或者类型不同时，组件中的覆盖mixin中的
• 同名的生命周期钩子函数都会被调用，Mixin中的生命周期钩子会先于组件中的执行
• 同名的方法或计算属性会进行覆盖，组件中的会覆盖Mixin中的

独立性

当使用Mixin时，要确保你的Mixin是独立的，并且没有与组件或其他Mixin产生不必要的耦合