Vue mixin开发入门

by Deep Ocean on

 

前言

混入（mixin）应该算是Vue的一个不太会被注意到的功能，大家的关注点可能更多的在组件，插件或者过渡动画等，混入更多的适用于一些公共方法的提取，这样一方面减少代码量便于维护，另一方面也可以让代码更加Dry。
首先，我们简单看一下Vue官方对此的描述。
混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

// 定义一个混入对象
var myMixin = {
 created: function () {
 this.hello()
 },
 methods: {
 hello: function () {
 console.log('hello from mixin!')
 }
 }
}

// 定义一个使用混入对象的组件
var Component = Vue.extend({
 mixins: [myMixin]
})

var component = new Component() // => "hello from mixin!"
如上所述，mixin使用起来很简单，只需要定义一个混入对象，写入对应的需要混入的方法，然后通过mixins: [myMixin]挂载就可以了。

合并

mixin的实现原理其实是将用户传入的对象与Vue自身的options属性合并，合并后的对象将会覆盖原来的Vue.options。因为mixin方法修改了Vue.options属性，之后创建的每个实例都会用到该属性，所以会影响创建的每个实例，因此，mixin在一些场景下才具有重要的用途。
如果用户传入的对象与组件有相同的数据对象，将会发生合并，并且遵循组件数据优先的原则。对于钩子函数来说，如果相同，将会合并为一个数组，所以都会被调用，只是混入对象的钩子会被先调用。值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

var mixin = {
 data: function () {
 return {
 message: 'hello',
 foo: 'abc'
 }
 },
 created: function () {
 console.log('混入对象的钩子被调用')
 }
}

new Vue({
 mixins: [mixin],
 created: function () {
 console.log('组件钩子被调用');
 console.log(this.$data)
 // => { message: "goodbye", foo: "abc", bar: "def" }
 },
 data: function () {
 return {
 message: 'goodbye',
 bar: 'def'
 }
 }
})

// => "混入对象的钩子被调用"
// => "组件钩子被调用"

实践

由于具有混入到任何组件本身的特性，mixin非常适合进行一些公共操作。
假设，组件A和组件B都需要请求同一个后台接口的数据，那么可以将请求数据的行为混入到组件A和组件B中，这样可以使代码更加简洁。

var myMixin = {
 created() {
 // 发起异步请求
 Vue.axios.get(api).then((response) => {
 console.log("1234")
 })
 }
}

// 定义一个使用混入对象的组件A
var ComponentA = Vue.extend({
 mixins: [myMixin]
})

var componenta = new ComponentA() // => "1234"

// 定义一个使用混入对象的组件B
var ComponentB = Vue.extend({
 mixins: [myMixin]
})

var componentb = new ComponentB() // => "1234"
组件A和组件B创建时都会执行mixin中请求数据的方法，相当于实现了一次写入，多次运行。

和插件一起使用

mixin全局混入将会影响每一个之后创建的Vue实例，和插件一起使用可以避免重复应用混入。

// Plugin.js
function Plugin() {
}

// 该对象具备install函数
Plugin.install = function (Vue) {
 // mixin
 Vue.mixin({
 created() {
 console.log('1234')
 }
 })
}

export default Plugin;
使用起来很简单，只需要引入，然后调用Vue.use()方法就可以。

// main.js
import Plugin from './Plugin';
Vue.use(Plugin);
小结
到这里，就完成了mixin的简单使用。看完上面的描述，相信大家对mixin的开发过程有了一定的了解，也可以根据自己的需求在项目里使用，除了以上介绍的，mixin还支持自定义的选项合并，感兴趣的小伙伴可以自己尝试一下。

 

始发于微信公众号： 腾讯DeepOcean

发表评论