Vue mixin开发入门

 

前言

混入(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

发表评论