vue混入（mixins）的使用方法和注意点，2024年最新前端优秀实践指南

// 定义混入对象
export const myMixin = {
  data() {
    return {
      mixinData: 'foo'
    };
  },
  created() {
    console.log('myMixin created!');
  },
  methods: {
    mixinMethod() {
      console.log('myMixin method!');
    }
  }
};
 
// 使用混入
export default {
  mixins: [myMixin],
  data() {
    return {
      localData: 'bar'
    };
  },
  created() {
    console.log('local created!');
  },
  methods: {
    localMethod() {
      console.log('local method!');
    }
  }
};

在这个例子中，我们定义了一个名为myMixin的混入对象，它有自己的数据属性mixinData和一个生命周期钩子created以及一个方法mixinMethod。然后在组件中我们引入了这个混入，并定义了自己的数据属性localData和生命周期钩子created以及方法localMethod。当组件被创建时，两个created钩子会按照混入然后是组件自身的顺序被调用。注意，如果混入和组件中都定义了同名的数据属性或生命周期钩子，则它们会被合并为一个，但方法会有所不同，具体取决于Vue的选项合并逻辑。