Mixin

Mixin基本使用

目前我们是使用组件化的方式在开发整个Vue的应用程序，但是组件和组件之间有时候会存在相同的代码逻辑，如果想对相同的代码逻辑进行抽取就可以使用Mixin。
在Vue2和Vue3中都支持的一种方式就是使用Mixin来完成:
- Mixin提供了一种非常灵活的方式，来分发Vue组件中的可复用功能;
- 一个Mixin对象可以包含任何组件选项;
- 当组件使用Mixin对象时，所有Mixin对象的选项将被混合进入该组件本身的选项中;

创建mixins文件夹,并且把公共的逻辑抽离放在js文件中

//demoMixin.js
export const demoMixin = {
  data() {
    return {
      message:"hi Mixin"
    }
  },
  methods: {
    sayHello() {
      console.log("hello wolrd")
    }
  },
  created() {
    console.log("执行了created")
  }
}

App.vue

<template>
  <h2>
    {{message}}
  </h2>
  <button @click="sayHello">
    点击触发mixin里面事件
  </button>
</template>
<script>
  export default {
    import {demoMixin} from "./mixins/demoMixin"
    mixins:[Mixin],
    data() {
      return {
        title:"文本"
      }
    }
  }
</script>
<style scoped>

</style>

Mixin合并规则

如果Mixin对象中的选项和组件对象中的选项发生了冲突,那么Vue如何操作？
- 这里分成不同的情况来进行处理
1. 如果是data函数的返回值对象
- 返回值对象默认情况下会进行合并
- 如果data返回值对象的属性发生了冲突,那么会保留组件自身的数据
1. 生命周期钩子函数
- 生命周期的钩子函数会被合并到数组中,都会被调用
1. 值为对象的选项,比如 methods,components,directives,将被合并为同个对象
- 比如都是methods选项,并且都定义了方法,那么它们都会生效
- 但是如果对象的key相同,那么会取组件对象的键值对

<template>
  <div>
    <h2>{{message}}</h2>
    <button @click="foo">按钮</button>
  </div>
</template>

<script>
  import { demoMixin } from './mixins/demoMixin';

  export default {
    mixins: [demoMixin],
    data() {
      return {
        title: "Hello World",
        message: "Hello App"
      }
    },
    methods: {
      foo() {
        console.log("app foo");
      }
    },
    computed: {

    },
    watch: {

    },
    created() {
      console.log("App created 执行");
    }
  }
</script>

<style scoped>

</style>

//Mixin.js
export const demoMixin = {
  data() {
    return {
      message: "Hello DemoMixin"
    }
  },
  methods: {
    foo() {
      console.log("demo mixin foo");
    }
  },
  created() {
    console.log("执行了demo mixin created");
  }
}

全局混入Mixin

如果组件中的某些选项,是所有的组件都需要拥有的,那么这个时候我们可以使用全局的mixin:
- 全局的Mixin可以使用应用app的方法 mixin 来完成注册
- 一旦注册,那么全局混入的选项将会影响每一个组件

//main.js
app.mixin({
  data() {
    return {
      
    }
  },
  methods: {
    
  },
  created() {
    console.log("全局created")
  }
})

[注意] 以上代码会在每个组件中都有mixin属性

extends

在开发中extends用的非常少，在Vue2中比较推荐大家使用Mixin，而在Vue3中推荐使用Composition API。
允许声明扩展另外一个组件，类似于Mixins;

先创建BasePage.vue

<template>
  <div>
    <h2>哈哈哈哈啊</h2>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        title: "Hello Page"
      }
    },
    methods: {
      bar() {
        console.log("base page bar");
      }
    }
  }
</script>

<style scoped>

</style>

创建Home.vue并且继承BasePage的数据或者方法,但是不能继承html的东西哦

<template>
  <div>
    Home Page
    <h2>{{title}}</h2>
    <button @click="bar">按钮</button>
  </div>
</template>

<script>
  import BasePage from './BasePage.vue';

  export default {
    extends: [BasePage],
    data() {
      return {
        content: "Hello Home"
      }
    }
  }
</script>

<style scoped>

</style>

🐑5分钟搞懂Mixin

Mixin

Mixin基本使用

Mixin合并规则

全局混入Mixin

extends