mixin和extends

mixin

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

2.一个Mixin对象可以包含任何组件选项

3.当组件使用Mixin对象时，所有Mixin对象的选项将被 混合 进入该组件本身的选项中

mixin的基本使用

ex:写入公共内容到demoMixin.js文件中

export const demoMixin = {
  data() {
    return {
      message: "hello demoMixin"
    }
  },
  methods: {
    foo() {
      console.log("hello Mixin foo");
    }
  },
  created() {
    console.log("Mixin created");
  },
}

在需要调用的vue文件下引入即可

import { demoMixin } from "./minins/demoMixin";

  export default {
    mixins: [demoMixin],
  }

然后就可以在当前vue文件中使用demoMixin.js文件下创建的内容(data/methods/生命周期函数等)

Mixin的合并规则

1.如果时data函数的返回值对象

• 默认情况下时会进行合并
• 如果data返回值对象的属性发生了冲突，那么会保留vue组件自身的数据

  2.如果是生命周期钩子函数

• 生命周期的钩子函数会被合并到数组中，并依次执行，都会被调用

  3.值为对象的选项，如methods/watch/components等，会被合并为一个对象

• 不同方法名可以合并
• 如果方法名等发生了冲突，还是会优先保留自身组件的方法。

Mixin全局混入

使用Mixin全局混入，这样可以在所有的组件中都能使用全局的Mixin。
一旦注册，那么全局混入的选项将会影响每一个组件。

const app = createApp(App);
app.mixin({
  created() {
    console.log("global mixin created")
  }
})