mixin的作用及如何使用

如果需要在多个页面都用到公用的功能和属性可以写在mixins中
之后每次用到只要简单的引入mixin文件到用到的页面即可实现复用。
mixin文件的定义与正常vue组件的定义完全一致，
使用时在只需要的页面通过 mixins属性引入

export default {
import minxin from '路径'
	mixins: [mixin],
	components: {},
	data() { }
}

• 引入后mixin文件中定义的方法属性都会复制到引入到的组件的对应位置，
• 比如方法复制到methods中，定义的字段会复制到data中，
• 各个钩子函数都会匹配到组件对应的钩子函数中

需要注意优先级顺序
主要分下面几种情况:
1.对于created，mounted 等生命周期函数 mixin文件中的代码先执行，组件中的后执行
2.对于data中定义的字段，组件中定义同名数据，覆盖mixin中同名字段
3.对于 method中的同名方法，组件内的同名方法覆盖mixin中的方法

举个栗子

export default {
	data() {
		return {
			n: 0,
		};
	},
	activated() {
		console.log('激活缓存');
	},
	deactivated() {
		console.log('结束缓存');
	},
	methods: {
		log(val) {
			console.log(this.$options.name);
			console.log(val);

		}
	}
};