全局混入、局部混入

混入

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
vue文档链接：混入-Vue.js

我们暂时从全局混入的角度来讲述它的一些特性

全局混入

在main.js中定义mixin，在需要的使用的页面直接使用，不需要再引入（使用方法同局部混入）

属性合并

当实例和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。数据对象在内部会进行递归合并，并在发生冲突时以实例数据优先
1、属性合并

        Vue.mixin({
            data() {
                return {
                    username: 'mixin',
                    age: '18'//只有混入定义了age属性，则值会调用混入的属性
                }
            },

        })

        var vm = new Vue({
            el: "#app",
            data: {
                username: "root"//这里和混入一样定义了username属性，但是会以实例这边的属性优先
            },
            created() {
                console.log(this.username, this.age)//实例的username属性，混入的age属性
            },

        })

2、方法的合并

        Vue.mixin({
            data() {
                return {
                    username: 'mixin',
                    age: '18'
                }
            },
            methods: {
                getusername() {//混入方法返回age
                    return this.age;
                }
            }
        })

        var vm = new Vue({
            el: "#app",
            data: {
                username: "root"
            },
            methods: {
                getusername() {//实例返回username
                    return this.username;
                }
            },
            mounted() {
                console.log(this.getusername())
            }
        })

我们混入和实例都有相同名称的方法，这里就依旧实例优先，打印了root，如果我们将实例的方法注释掉，则会打印出age

        //全局混入
        Vue.mixin({
            data() {
                return {
                    username: 'mixin',
                    age: '18'
                }
            },
            methods: {
                getusername() {
                    return this.age;
                }
            }
        })

        var vm = new Vue({
            el: "#app",
            data: {
                username: "root"
            },
            // methods: {
            //     getusername() {
            //         return this.username;
            //     }
            // },
            mounted() {
                console.log(this.getusername())
            }
        })

同名钩子函数将合并为一个数组，因此都将被调用。但是，混入对象的钩子将在实例钩子之前调用

 //全局混入
Vue.mixin({
	beforeCreate(){
		console.log("from mixin beforeCreate")
	},
	created () {
		console.log("from mixin Create")
	},
})

//实例
var vm = new Vue({
	el:"#app",
	data:{},
	beforeCreate () {
		console.log("from root beforeCreate")
    },
    created () {
    	console.log("from root created")
    },
})

局部混入

局部混入一样拥有混入的特性，同名属性和方法均以实例优先，钩子函数会都执行但是混入优先执行

        //局部混入，这里我们创建了两个局部混入
	
	//局部混入1
        const mixin1={
            data:function(){
                return {age:18}//这里定义age
            }
        }
	//局部混入2
        const mixin2={
            methods:{
                getcity(){//获取城市方法
                    return '北京'
                }
            }
        }

	//vue实例
        var vm = new Vue({
            mixins: [mixin1,mixin2],//引用局部注入
            el:"#app",
            data:{
                username:"root",
                age:20
            },
            methods: {
                getcity(){//获取城市
                    return '上海'
                }
            },
            created () {
              console.log(this.getcity())
              console.log(this.age)  
            }
        })