Vue的Mixins——接收一个混入对象的数组

先看一下官方文档的介绍：

关键语句：混入对象可以像正常的实例对象一样包含实例选项，这些选项将会被合并到最终的选项中

这句话的意思是：JS对象可以合并到Vue当前实例中。

---

直接上代码能更清楚：

Home.vue组件，引入Obj.js文件

<template>
    <div>
        <h1>HOME</h1>
    </div>
</template>

<script>
import {moreMethod} from './obj';
export default {
    mixins:[moreMethod],//使用mixins，值是数组对象
    data(){
        return{
            
        }
    },
    mounted(){
        console.log("=>",this.moreData);
        this.set();
        this.get();
    },
    methods:{
        
    },
}
</script>

<style lang="less" scoped>

</style>

Obj.js文件，里面创建并向外暴露了对象

 let moreMethod={
    data(){
        return{
            moreData:"dadadada"
        }
    },
    methods:{
        get(){
            console.log("get method");
        },
        set(){
            console.log("set method");
        }
    }
    
}
export {moreMethod}

最终在控制台输出：

结论：Mixins可以将对象合并Vue实例中。

---

如果Vue实例中有一个名为set函数，在外部文件的对象中也有一个set函数，data数据中有一个name属性，外部文件也有name属性，甚至连钩子函数都有相同的时候。

Home.vue

<template>
    <div>
        <h1>HOME</h1>
    </div>
</template>

<script>
import {moreMethod} from './obj';
export default {
    mixins:[moreMethod],//使用mixins，值是数组对象
    data(){
        return{
            name:"Home",
        }
    },
    mounted(){
        console.log("=>",this.name);
        this.set();
        this.get();
    },
    methods:{
        set(){
        	console.log("home Set");
		}
    },
}
</script>

<style lang="less" scoped>

</style>

obj.js

 let moreMethod={
    data(){
        return{
            name:"dadadada"
        }
    },
    mounted(){
		console.log("obj的mounted");
	},
    methods:{
        get(){
            console.log("get method");
        },
        set(){
            console.log("set method");
        }
    }
    
}
export {moreMethod}

结果

如果data数据与methods属性中有相同时，使用的是当前Vue实例的，而如果同时存在多个相同的钩子函数，那么钩子函数都会去执行