Vue学习-混入

混入(mixins): 混入提供了一种非常灵活的方式，来分发Vue组件中的可复用功能

--摘自VUE官方文档

对于这句话的理解我想是这样的。我们在js代码中定义一个混入对象，这个混入对象的名字可以任意取，它只是一个单独的对象，里面可以包含一个组件可以有的任何组件选项:data,method,watch，钩子函数等等。它可以看做一个封装好的代码块，哪一个组件想用它，就可以通过mixins选项来将它包含进来，为自己所用。

在上面这个代码中，我定义了一个可以作为混入对象的对象，接下来只要使用mixins选项将它包含进某一个组件里面，就可以实现我们的混入功能。

这样我们再打开浏览器运行这个文件的时候,就会看到

Hello Mixins

说明我们的混入选项已经生效，在实例被创建时调用了混入对象中的钩子函数created，向控制台发送了"Hello Mixins"的文字。

 

混入-选项合并：

当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行"合并".

例如，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。

--摘自VUE官方文档

现有一个混入对象和一个实例对象(见代码):

var mixin = {
    data:function(){
        return{
            message:"yes",
            message2:"oh"
        }
    }
}
//以上为混入对象
new Vue({
    mixins:[mixin],
    data:function(){
        return{
            message:"no",
            bar:"abcdefg"
        }
    },
    created:function(){ console.log(this.$data)}
})
//定义一个使用混入对象的组件

运行后的结果:

 

可以看到混入对象和使用混入对象的组件中共同拥有一个同名的数据message,并且两个值各不相同,混入对象中为"yes",而组件中为"no",而最后输出的数据为"no"，是原来组件中的数据，这说明混入对象中的数据对象中的键与组件中的数据对象中的键发生了冲突时，会以组件的值优先。

同名钩子函数将会合并成为一个数组，因此都将被调用，混入对象的钩子函数先于组件自身的钩子函数进行执行。

--摘自VUE官方文档

看下面一段代码:

var mixin = {
    created:function(){
            console.log("This is mixin's HOOK FUNCTION")
            }
        }
new Vue({
    mixins:[mixin],
    created:function(){ console.log("This is conponents' HOOK FUNCTION")}
})

这段代码是定义了一个混入对象和一个组件，该组件包含该混入对象，它们各拥有一个created钩子函数，混入对象的钩子向控制台输出"This is mixin's HOOK FUNCTION"，组件的钩子向控制台输出"This is conponents' HOOK FUNCTION"。在Vue实例被创建时，created函数调用。

执行结果如下:

很明显，两个钩子函数都被调用，并且混入对象mixin的钩子函数先于组件的钩子函数调用。

 

小结:使用mixins选项包含混入对象时，如遇到键值对的选项，组件优先，覆盖掉混入对象的键值对，如果是同名钩子函数，则都会包含进来，混入对象的钩子函数先执行。