vue中的mixins的介绍和使用

1. 介绍

官网：混入 — Vue.js (vuejs.org)

混入（mixins）提供了一种非常灵活的方式，来分发vue组件中的可服用功能。一个混入对象可以包含任意的组件选项（vue在script的部分）。当组件使用混入对象时，所有混入对象的选项都将被“混合”进入改组件本身的选项。

其实就是vue对象script的合并

注意

​ 不同组件混入之后，会生成不同的实例，数据会相互隔离，互不影响

2. 简单例子

myMixins.js

export default {
  created () {
    // 钩子函数，在组件的created方法执行之前，调用hello方法
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

Test1.vue

<template>
  <div></div>
</template>

<script>
// 导入myMixins
import myMixins from './component/myMixins'

export default {
  // 进行混入
  mixins: [myMixins],
  name: 'Test1'
}
</script>

<style scoped>

</style>

结果：混入的选项等同于组件的选项

3. 合并内容

1. data对象

data对象会进行递归合并，如果有冲突，会使用组件中的数据

myMixins.js

export default {
  data () {
    return {
      // myMixins中定义的变量
      message: 'hello',
      foo: 'abc'
    }
  },
  created () {
    // 钩子函数，在组件的created方法执行之前，调用hello方法
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

Test1.vue

<template>
  <div></div>
</template>

<script>
// 导入myMixins
import myMixins from './component/myMixins'

export default {
  // 进行混入
  mixins: [myMixins],
  name: 'Test1',
  data () {
    return {
      // Test1中定义的变量
      message: 'goodbye',
      bar: 'def'
    }
  },
  created () {
    // 打印数据
    console.log(this.$data)
  }
}
</script>

<style scoped>

</style>

结果：message合并，使用了组件中定义的值，foo和bar都被保留

2. 钩子函数

钩子函数会被合并起来执行，先执行混入的钩子函数，再执行组件对应的钩子函数

myMixins.js

export default {
  data () {
    return {
      // myMixins中定义的变量
      message: 'hello',
      foo: 'abc'
    }
  },
  created () {
    // 钩子函数，在组件的created方法执行之前，调用hello方法
    this.hello()
  },
  mounted () {
    // myMixins中的mounted钩子函数
    console.log('mixins mounted...')
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

Test1.vue

<template>
  <div></div>
</template>

<script>
// 导入myMixins
import myMixins from './component/myMixins'

export default {
  // 进行混入
  mixins: [myMixins],
  name: 'Test1',
  data () {
    return {
      // Test1中定义的变量
      message: 'goodbye',
      bar: 'def'
    }
  },
  created () {
    // 打印数据
    console.log(this.$data)
  },
  mounted () {
    // Test1中的mounted钩子函数
    console.log('Test1 mounted...')
  }
}
</script>

<style scoped>

</style>

结果: 执行顺序

• myMixins中的created
• Test1中的created
• myMixins中的mounted
• Test1中的mounted

3. 值为对象的选项，例如method,components,directives等

将会被合并成一个大对象，如果有冲入，以组件中的选项为准

myMixins.js

export default {
  data () {
    return {
      // myMixins中定义的变量
      message: 'hello',
      foo: 'abc'
    }
  },
  methods: {
    // myMixins中的method方法列表
    hello () {
      console.log('hello from mixin!')
    },
    hello2 () {
      console.log('hello2 from mixin!')
    }
  }
}

Test1.vue

<template>
  <div></div>
</template>

<script>
// 导入myMixins
import myMixins from './component/myMixins'

export default {
  // 进行混入
  mixins: [myMixins],
  name: 'Test1',
  data () {
    return {
      // Test1中定义的变量
      message: 'goodbye',
      bar: 'def'
    }
  },
  created () {
    // 调用方法
    this.hello()
    this.hello2()
  },
  methods: {
    // Test1中的method方法列表
    hello2 () {
      console.log('hello2 from test1')
    }
  }
}
</script>

<style scoped>

</style>

结果：

• hello方法没有冲突，使用mixins中的
• hello2方法有冲突，使用组件中的

4. 全局混入

混入分为组件混入和全局混入

• 组件混入：每个组件单独按需进行混入

• 全局混入：一旦进行全局混入，它将影响每一个之后创建的 Vue 实例(包括第三方组件)，所以需要慎重

myMixins.js

export default {
  data () {
    return {
      // myMixins中定义的变量
      message: 'hello',
      foo: 'abc'
    }
  },
  created () {
    console.log('hello from mixin!')
  }
}

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import myMixins from '@/views/mixins-test/component/myMixins'

Vue.config.productionTip = false

// 全局混入
Vue.mixin(myMixins)

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

Test1.vue

<template>
  <div></div>
</template>

<script>

export default {
  // 进行混入
  name: 'Test1'
}
</script>

<style scoped>

</style>

结果：之后每个创建的组件都混入了这些选项，导致访问一个路由组件，其中创建的每个组件都打印了created的处理

5. 扩展

1. 与vuex的区别

vuex：用来做状态管理，里面定义的变量每个组件都可以查看和修改，共享一分数据，一般只能存储属性和方法，不能存放钩子函数

mixins：可以用来定义公用变量、方法，总的钩子函数等。在组件混入之后，每个组件各自维护一份变量，相互隔离

2. 与公共组件的区别

组件：在父组件中引入公共组件之后，相当于引入了一个公共子组件，通过props等方式进行组件传值，但本质上是相互独立的

mixins：在引入组件之后，于组件中的对象和方法进行合并，相当于扩展了父组件的对象和方法，可以理解为形成了一个新的组件