一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第26天，点击查看活动详情。

前言

在前面章节的文章中，我们了解了vue里面基础语法、生命周期、指令的使用、动画效果等内容。本章节开始，就一起学习vue的高级语法，今天的文章会学习到Mixin混入语法的内容。

概念

mixin混入：就是将一个对象中的数据、方法通过mixin混入到其他地方。

实例中使用mixin

data

以前的案例中，我们都是在实例或者组件中定义的data函数，使用mixin的时候，我们可以把data函数写进去，然后混入到实例中。

<script>
  const myMixin = {
    data(){
      return {
        num: 111
      }
    }
  }

  const app = Vue.createApp({
    mixins: [myMixin],
    template: `
      <div>
        <div>{{num}}</div>
      </div>
    `
  });

  const vm = app.mount('#root');

</script>

在浏览器中会发现实例中模板渲染的num数据值就是mixin中定义的，也就是通过mixin会把数据对象和实例或组件进行合并，vue底层也会在执行template模板编译的时候进行合并执行。

那如果我们在使用mixin的同时，实例中也定义了data，并且数据值都是num，会出现什么情况呢(O_O)?

const app = Vue.createApp({
    data(){
      return {
        num: 22
      }
    },
    mixins: [myMixin],
    template: `
      <div>
        <div>{{num}}</div>
      </div>
    `
});

这时候页面上就会渲染实例中定义的data数据值了。

但是当mixin中定义了实例中没有定义的数据，但是实例中的模板渲染了这个数据，那就又会不一样了。

<script>
  const myMixin = {
    data(){
      return {
        num: 111,
        count: 123
      }
    }
  }

  const app = Vue.createApp({
    data(){
      return {
        num: 22
      }
    },
    mixins: [myMixin],
    template: `
      <div>
        <div>{{num}} - {{count}}</div>
      </div>
    `
  });

  const vm = app.mount('#root');

</script>

在mixin中定义了一个count数据值，但是实例里面没有定义，而是直接在模板中使用了。

组件实例中的data的优先级高于mixin中的data的优先级，如果mixin定义了，而实例中没有定义的，则会使用mixin中的数据。

methods

上面的代码我们知道了mixin中定义data的概念，那如果我们点击按钮触发methods中的方法呢？是不是也会想data函数一样呢？

const myMixin = {
    methods:{
      handleClick(){
        console.log('mixin方法')
      }
    },
  }

const app = Vue.createApp({
    mixins: [myMixin],
    template: `
      <div>
        <button @click="handleClick">按钮</button>
      </div>
    `
});

当我们点击按钮时，就会执行mixin中定义的methods下面的方法。如果我们同时在实例中定义一个同样的方法会怎样呢？

const app = Vue.createApp({
    mixins: [myMixin],
    methods:{
      handleClick(){
        console.log('实例方法')
      }
    },
    template: `
      <div>
        <button @click="handleClick">按钮</button>
      </div>
    `
});

这时候我们会发现，methods的概念是和data的概念一样的。

组件实例中的methods的优先级高于mixin中的methods的优先级。

生命周期

在vue里面，除了data和methods之外，还有生命周期函数，同样也可以在mixin中定义。

const myMixin = {
    created(){
      console.log('mixin created')
    }
  }

const app = Vue.createApp({
    mixins: [myMixin],
    created(){
      console.log('实例 created')
    },
    template: `
      <div>
        <button>按钮</button>
      </div>
    `
});

我们在实例和mixin中都定义了同样的created生命周期函数，执行的效果会怎样呢?

在页面执行生命周期函数的时候，会先执行mixin中的，然后再执行组件实例中的。

但是在vue3里面不会通过或者说不推荐使用mixin做混入操作，在后面的章节中会讲解compositionAPI或插件时，会和大家一起学习新的内容。

总结

本章节主要讲解了mixin的使用、概念和组件实例的一些运用方式，还有mixin和组件实例的优先级概念。大家一起学习一起加油！！💪🏻

【Vue3从零开始-第五章】5-1 Mixin混入语法

前言

概念

实例中使用mixin

data

methods

生命周期

总结