【vue混入（Mixin)】

混入（Mixin)

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 页面中的可复用功能
混入对象和页面对象基本是相同，都有data、method和一系列生命周期钩子函数

1、在assets里面新建mixin.js文件
const mixins = {
	data: function() {
		return {
			num: 0    //数据
		}
	},
	beforeCreate(){   //混入对象生命周期钩子函数
			console.log('混入内的生命周期函数---beforeCreate')
	},
	created(){
			console.log('混入内的生命周期函数---created')
	},
	beforeMount(){
		console.log('混入内的生命周期函数---beforeMount')
	},
	mounted(){
		console.log('混入内的生命周期函数---mounted')
	}, 
	methods: {
		add() {
			this.num++    //方法
		}
	}

}

export default mixins

//2、在页面引入
import mixins from '../assets/mixins.js'
//与data同级
mixins:[mixins],
//页面使用
<h1>{{num}}</h1>

生命周期执行：页面的函数和混和的函数都执行，混入中的函数会先执行，页面的函数后执行
数据对象进行合并：其中混入的数据和页面的数据发生冲突时以页面数据优先，页面中的数据会覆盖混入对象的数据