Vue的混合继承详解

Vue的混合继承详解

在Vue中，混合继承（Mixins）是一种非常常用的组件复用方式。它允许我们将多个组件共用的代码提取到一个混合对象中，然后在需要的组件中使用mixins选项进行混合。

一、基本用法

我们将要使用到一个示例，这是一个Vue组件定义的基本结构：

Vue.component('my-component', {
  mixins: [myMixin],
  //组件选项
})

如上所示，我们可以在组件定义时使用mixins熟悉来引用这个混合对象，然后在其组件选项中进行指定。这个数组中每一项都为一个混合对象。

我们接下来定义一个名为myMixin的混合对象：

var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

上述代码定义了一个myMixin对象，在其中包含了一个在组件created钩子函数中进行调用的hello方法。这样我们在定义组件时引用了该混合对象后，就可以在每个组件中使用hello方法。

<template>
  <div>Hello World</div>
</template>

<script>
export default {
  created:{
    console.log('hello from component!')
  },
  mixins: [myMixin]
}
</script>

此时当组件的生命周期进入created阶段时，控制台将会输出两行信息：一行输出hello from component!，另一行输出hello from mixin!。

二、Mixins的选项合并规则

在使用混合对象时，每一个混合对象中所定义的选项将都会被混入到组件中。当选项冲突的时候则会按照一定的顺序进行合并。

有以下三条规则：

1. 同名钩子函数将依次被调用，混合对象的钩子将在组件自身钩子之前被调用。

例如，如果我们定义了一个混合对象myMixin包含一个created钩子，在一个组件中同时定义了created钩子，则在实例化组件后，该组件中定义的created钩子函数将首先执行，而混合对象中定义的created钩子函数将第二个执行。

var myMixin = {
  created: function () {
    console.log('hello from mixin!')
  }
}

Vue.component('my-component', {
  created: function () {
    console.log('hello from component!')
  },
  mixins: [myMixin]
})

// 控制台输出：
// 'hello from component!'
// 'hello from mixin!'

1. 同名选项，如果是methods、components则将被混合，组件本身的同名方法将覆盖混合对象的。

例如，我们定义一个混合对象myMixin包含一个methods选项：

var myMixin = {
  methods: {
    greet: function () {
      console.log('greeting from mixin!')
    }
  }
}

而在组件定义中也有一个同名的methods选项：

Vue.component('my-component', {
  methods: {
    greet: function () {
      console.log('greeting from component!')
    }
  },
  mixins: [myMixin]
})

// 现在调用组件的greet方法
this.greet()

// 控制台输出：
// 'greeting from component!'

1. data选项按照合并策略来确定冲突时的优先级。

这里我们来看一下一个示例，我们定义一个data选项，并在组件定义和混合对象中都进行了定义：

var myMixin = {
  data: function () {
    return {
      message: 'hello',
      foo: 'abc'
    }
  }
}

Vue.component('my-component', {
  data: function () {
    return {
      message: 'goodbye',
      bar: 'def'
    }
  },
  mixins: [myMixin],
  created: function () {
    console.log(this.$data)
    /*
    {
      message: "goodbye",
      foo: "abc",
      bar: "def"
    }
    */
  }
})

这个例子中，我们混合对象和组件选项中都定义了data选项。在实例化组件后，可以发现控制台的输出内容为{ message: 'goodbye', foo: 'abc', bar: 'def' }。此时，混合对象中的同名data选项被忽略掉了，而组件中的data选项被使用。

三、混合对象列表

我们可以将多个混合对象混合成一个组件，如下所示：

var firstMixin = { // 第一个混合对象
  data: function () {
    return {
      message: 'Hello',
      foo: ''
    }
  },
  created: function(){
    console.log('firstMixin')
  },
  methods: {
    say: function() {
      console.log('firstMixin say hello')
    }
  }
}

var secondMixin = { // 第二个混合对象
  data: function () {
    return {
      message: 'world',
      bar: ''
    }
  },
  created: function(){
    console.log('secondMixin')
  },
  methods: {
    say: function() {
      console.log('secondMixin say hello')
    }
  }
}

var vm = new Vue({
  el: '#app',
  mixins: [firstMixin, secondMixin], // 将混合对象列表传递给Vue实例
  created: function(){
    console.log(this.message) // Hello
    console.log(this.foo) // ''
    console.log(this.bar) // ''
  },
  methods: {
    sayHello: function(){
      console.log('Component say hello')
    },
    say: function(){
      console.log('Component say goodbye')
    }
  }
})

控制台输出：

firstMixin
secondMixin
"Hello"
""
""

可以看到，在混合了两个组件后，合并后的组件中拥有两个created和say方法。此时我们的实例，因混合而来的data选项相应地被合并了起来。

与之类似地，我们的组件选项也会相应地被混合。这样我们就能使用混合对象对组件进行扩展，然后再基于这些新扩展的组件进行开发。

总的来说，在合适的场景下有意识地使用混合对象能提高组件的复用性，让组件更加符合单一职责原则。