谈谈vue中mixin的一点理解

下面是对 "谈谈vue中mixin的一点理解" 的详细讲解：

什么是mixin

在Vue中，mixin指的是混入，也就是将一些可复用的代码，抽象出来，在多个组件之间进行共享。可以理解为抽象出来的一些特性集合。mixin可以包含组件中的各种选项，并且最终会和组件选项合并，优先级高于组件选项。

如何使用mixin

在Vue中使用mixin非常简单。我们可以先定义一个mixin对象，然后将其混入到组件中。如下：

// 定义一个mixin
var myMixin = {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}

// 使用mixin
var myComponent = {
  // 引入 mixin
  mixins: [myMixin],
  // 组件自己的数据
  data() {
    return {
      message: 'Hello!'
    }
  },
  methods: {
    showMessage() {
      alert(this.message)
    }
  }
}

在上述代码中，myMixin定义了count和increment两个选项。myComponent中定义了message选项以及showMessage方法。通过mixins选项引入myMixin，这些选项最终会合并到myComponent中。

mixin的合并策略

mixin的合并策略是非常灵活的。当 mixin 和组件含有同名选项时，会以如下规则进行合并：

• 钩子函数：合并时会把所有钩子函数都调用一遍。mixin的钩子函数会被先调用；
• 数据对象：合并时会把两个数据对象合并成一个，重复的属性会被组件的属性覆盖；
• 方法：合并时会把所有方法都合并到一起，如果有重复的方法，组件的方法会覆盖mixin的方法；
• 生命周期函数和属性：和数据对象的合并策略相同，如果重复，以组件的为准；
• 注意事项： mixin不支持实例属性和实例方法的合并。

下面两个示例将具体说明mixin的合并策略：

示范一

// mixin
var myMixin = {
  data() {
    return {
      message: 'hello mixin'
    }
  },
  methods: {
    showMessage() {
      console.log(this.message)
    }
  },
  mounted() {
    console.log('mounted in mixin')
  }
}

// 组件
var myComponent = {
  data() {
    return {
      message: 'hello component'
    }
  },
  methods: {
    showMessage() {
      console.log(this.message)
    }
  },
  mounted() {
    console.log('mounted in component')
  },
  mixins: [myMixin]
}

在上面的示例中，mixin和组件都定义了data、methods以及mounted。当组件和mixin都有同名选项时，按照合并策略，会以组件的为准。在执行myComponent的showMessage和mounted时，分别输出了"hello component"和"mounted in component"。

示范二

// mixin
var myMixin = {
  created() {
    console.log('created in mixin')
  }
}

// 组件
var myComponent = {
  created() {
    console.log('created in component')
  },
  mixins: [myMixin]
}

在上面的示例中，mixin和组件都定义了created钩子函数。因为mixin中的钩子函数会先被调用，所以在执行myComponent的created时，会先输出"create in mixin"，再输出"created in component"。

总结

使用mixin可以将一些可复用代码进行抽象，从而实现简化开发的目的。需要注意的是，在使用mixin时，选项的合并策略会影响到最终合并后的结果。