VUE学习-mixin混入

mixin混入

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

• vue实例混入

  • 数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。

    var mixin = {
    	data: function () {
    		return {message: 'hello',foo: 'abc'}
    	}
    }
    new Vue({
    	mixins: [mixin],
    	data: function () {
    		return {message: 'goodbye',bar: 'def' }
    	},
    	created: function () {
    		console.log(this.$data)
    	}
    	// => { message: "goodbye", foo: "abc", bar: "def" }
    })
    

  • 同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。

    var mixin = {
    	created: function () {
    		console.log('混入对象的钩子被调用')
    	}
    }
    new Vue({ 
    	mixins: [mixin],
    	created: function () {
    		console.log('组件钩子被调用')
    	}
    })
    // => "混入对象的钩子被调用"
    // => "组件钩子被调用"
    

  • 值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

    var mixin = {
    	methods: {
    		foo: function () {
    			console.log('foo')
    		},
    		conflicting: function () {
    			console.log('from mixin')
    		}
    	}
    }
    var vm = new Vue({
    	mixins: [mixin],
    	methods: {
    		conflicting: function () {
    			console.log('from self')
    		}
    	}
    })
    vm.foo() // => "foo"
    vm.conflicting() // => "from self"
    

• 全局混入
  一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。

  // 为自定义的选项 'myOption' 注入一个处理器。
  Vue.mixin({
  	created: function () {
  		var myOption = this.$options.myOption;
  		if (myOption) {console.log(myOption)}
  	}
  })
  new Vue({myOption: 'hello!'})
  // => "hello!"
  

自定义选项合并策略

自定义选项将使用默认策略，即简单地覆盖已有值。如果想让自定义选项以自定义逻辑合并，可以向 Vue.config.optionMergeStrategies 添加一个函数。

Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {
	/* 返回合并后的值 */
}
// Vuex 1.x 的混入策略
const merge = Vue.config.optionMergeStrategies.computed
Vue.config.optionMergeStrategies.vuex = function (toVal, fromVal) {
	if (!toVal) return fromVal
	if (!fromVal) return toVal
	return {
		getters: merge(toVal.getters, fromVal.getters),
		state: merge(toVal.state, fromVal.state),
		actions: merge(toVal.actions, fromVal.actions)
	}
}

页面混入模块

var mixinClock = {
	data() {
		return {
			clock: '',
			interalId: '',
		}
	},
	created() {
		this.interalId = setInterval(()=>{
			this.setClock()
		}, 1000)
	},
	destroyed() {
		clearInterval(this.interalId)
	},
	methods:{
		setClock() {
			this.clock = this.dateTimeFormatter(new Date())
			console.log(this.clock)
		},
		dateTimeFormatter(_date) {
			let date = new Date(_date);
			let y = date.getFullYear();
			let M  = (date.getMonth()).toString().padStart(2, '0');
			let d = (date.getDate()).toString().padStart(2, '0');
			let h = (date.getHours()).toString().padStart(2, '0');
			let m = (date.getMinutes()).toString().padStart(2, '0');
			let s = (date.getSeconds()).toString().padStart(2, '0');
			return `${y}-${M}-${d} ${h}:${m}:${s}`
		}
	}
}

new Vue({
	el: '.main-container',
	mixins: [mixinClock],
})