006-读书笔记-Vue官网 混合

1.认识混合

• 混合(mixins)是一种分发Vue组件中可复用功能的非常灵活的方式
• 混合的作用：抽取多个组件的共同部分，增强组件的可复用性
• 混合的实质：混合对象类似一个Vue实例，可以包含Vue实例中的任意选项；使用混合对象时，相当于把混合对象的所有选项都注入到了组件中

2.混合的简单使用

2-1 没有使用混合的情况

当组件A中有一个方法methodCommon，组件B中同样有一个方法methodCommon，如果每个组件中都写这个方法，会出现很多重复性代码：

<!-- componentA.vue -->

<template>
  <div>{{ methodCommon() }}</div>
</template>

<script>
  export defautl {
    methods: {
      methodCommon() {
        return 'this is a method ...'
      }
    }
  }
</script>

<!-- componentB.vue -->

<template>
  <div>{{ methodCommon() }}</div>
</template>

<script>
  export defautl {
    methods: {
      methodCommon() {
        return 'this is a method ...'
      }
    }
  }
</script>

2-2 使用混合优化代码

上面代码中的重复部分，可以抽取一个公共的mixin：

// mixin.js

export default {
  methods: {
    methodCommon() {
      return 'this is a method ...'
    }
  }
}

然后在每一个组件中引入该mixin.js即可：

<!-- componentA.vue -->

<template>
  <div>{{ methodCommon() }}</div>
</template>

<script>
  import mixin from './mixin.js'
  export default {
    mixins: [ mixin ]
  }
</script>

<!-- componentB.vue -->

<template>
  <div>{{ methodCommon() }}</div>
</template>

<script>
  import mixin from './mixin.js'
  export default {
    mixins: [ mixin ]
  }
</script>

通过混合，提高了代码的复用性。

3.混合中的钩子函数

3-1 同名钩子函数都会执行

如果组件A中存在钩子函数，混合中也存在相同的钩子函数，那么两个钩子函数都会执行。
执行顺序是混合中的钩子函数先执行，组件中的钩子函数后执行。

// mixin.js

export default {
  created() {
    console.log('mixin created ...')
  }
}

<!-- componentA.vue -->

<template>
  <div>component A</div>
</template>

<script>
  import mixin from './mixin.js'
  export default {
    mixins: [ mixin ],
    created() {
      console.log('componentA created ...')
    }
  }
</script>

最终的执行结果：

mixin created ...
componentA created ...

3-2 多个混合的钩子函数

多个混合的钩子函数，会根据混合使用的顺序来执行。

mixins: [ 'mixin1', 'mixin2' ]

执行的时候，会先执行mixin1中的钩子函数，再执行mixin2中的钩子函数，最后执行当前组件中的钩子函数。

4.混合中的对象选项

混合中的对象选项，如directives filters components data computed methods等会被混合成一个对象的属性，如果键值对相同，会优先根据组件中的内容进行输出。

// mixin.js

export default {
  data() {
    return {
      msg: 'mixin msg ...'
    }
  }
}

<!-- componentA.vue -->

<template>
  <div>{{ msg }}</div>
</template>

<script>
  import mixin from './mixin.js'
  export default {
    mixins: [ mixin ],
    data() {
      return {
        msg: 'componentA msg ...'
      }
    }
  }
</script>

最终会输出组件A中的msg：componentA msg ...

5.参考内容

• 混合