vue中mixin使用和事件执行顺序

浅析 vue中mixin的 引用、变量引用、钩子函数执行顺序、事件调用等内容

前言

混入 (mixins)：mixins就是组件的变量、方法抽离。方便在多个组件引用同样的方法（注意： 多个组件的mixin变量不会相互污染影响，每个引用都是独立的）

一、引用、调用

vue页面：

// home.vue

<template>
	<div>
		<div>Home：{{title}}</div>
		<div>mixin：{{mxData}} - {{mxNum}}</div>
		<button @click="homeFun">homeFun</button>
		<button @click="mixinFun">mixinFun</button>
		<button @click="sameFun">相同fun-sameFun</button>
		<button @click="addMxNum">增加mx数据addMxNum</button>
	</div>
</template>

<script>
	import test from '@/mixins/test.js' //mixin文件位置不要求，可以结合项目看着创建 - 注意引用地址变动
	export default {
		name: 'Home',
		mixins: [test],
		data() {
			return {
				title: 'Home-title',
			}
		},
		methods: {
			homeFun() {
				console.log('homeFun - 这是Home中function');
			},
			sameFun() {
				console.log('sameFun - 相同fun - home')
			},
			addMxNum() {
				console.log('mixin数据mxNum操作')
				this.mxNum++
			}
		},
		beforeCreate() {
			console.log('Home-beforeCreate');
		},
		created() {
			console.log('Home-created');
		},
		beforeMount() {
			console.log('Home-beforeMount');
		},
		mounted() {
			console.log('Home-mounted');
		}
	}
</script>

<style type="text/css">
	div{
		line-height: 40px;
	}
	button{
		display: block;
		margin: 20px auto;
		line-height: 25px;
	}
</style>

mixin页面：

export default {
	data() {
		return {
			mxData: 'mixin-mxData',
			mxNum: 0
		}
	},
	methods: {
		mixinFun() {
			console.log('mixinFun - 这是mixin中function');
		},
		sameFun() {
			console.log('sameFun - 相同fun - mixin')
		}
	},
	beforeCreate() {
		console.log('mixin-beforeCreate');
	},
	created() {
		console.log('mixin-created');
	},
	beforeMount() {
		console.log('mixin-beforeMount');
	},
	mounted() {
		console.log('mixin-mounted');
	}
}

 

二、加载顺序：

事件钩子中，mixin优先组件执行

三：方法调用：

1.不同名方法 - 正常调用

2.mixin和组件 方法名同名：- mixin方法不执行被覆盖，组件方法正常执行

 

四：组件操作mixin变量

和普通组件的变量一样使用。
注意： 多组件引用同一个mixin，不会相互污染改变变量