vue minxin

// Vue Mixin 示例代码

// 定义一个 mixin 对象
const myMixin = {
  // 混入的生命周期钩子函数会在组件对应的生命周期钩子之前调用
  created() {
    console.log('mixin - created');
  },
  methods: {
    // 混入的方法会与组件中的方法合并，如果有同名方法，组件中的方法会覆盖混入的方法
    greet() {
      console.log('Hello from mixin!');
    }
  }
};

// 定义一个使用 mixin 的 Vue 组件
const MyComponent = {
  mixins: [myMixin],
  created() {
    console.log('component - created');
  },
  methods: {
    greet() {
      console.log('Hello from component!');
    }
  },
  mounted() {
    // 调用混入的方法
    this.greet();
  }
};

// 创建 Vue 实例并挂载组件
new Vue({
  el: '#app',
  render: h => h(MyComponent)
});

解释说明：

1. mixin 对象：myMixin 包含了一个 created 生命周期钩子和一个 greet 方法。
2. 组件定义：MyComponent 使用了 myMixin，并且也有自己的 created 钩子和 greet 方法。
3. 生命周期钩子顺序：当组件实例化时，mixin 中的 created 钩子会在组件自身的 created 钩子之前调用。
4. 方法合并：如果组件和 mixin 中有同名方法（如 greet），组件中的方法会覆盖 mixin 中的方法。
5. 挂载组件：通过 Vue 实例将 MyComponent 挂载到页面上的 #app 元素。