vue查漏补缺（二）-mixins

是什么：

vue.js混入用来定义一部分可复用的方法和计算属性，直接插入任意组件选项使用。当你写好你的程序构造器组件的后，需要额外增加一些方法或者是需要建造临时的功能的时候使用，会大大的减少代码量。建造好vue.js混入后还可以在其他地方时候，实现了代码的重用。

与vuex的区别
经过上面的例子之后，他们之间的区别应该很明显了哈~

vuex：用来做状态管理的，里面定义的变量在每个组件中均可以使用和修改，在任一组件中修改此变量的值之后，其他组件中此变量的值也会随之修改。

Mixins：可以定义共用的变量，在每个组件中使用，引入组件中之后，各个变量是相互独立的，值的修改在组件中不会相互影响。
与公共组件的区别
组件：在父组件中引入组件，相当于在父组件中给出一片独立的空间供子组件使用，然后根据props来传值，但本质上两者是相对独立的。

Mixins：则是在引入组件之后与组件中的对象和方法进行合并，相当于扩展了父组件的对象与方法，可以理解为形成了一个新的组件。

怎么用：

定义混入对象：

//minxins.js 文件
export default{
    data(){
        return{
            message:'混入对象',
            foo:'foo'
        }
    }
}

（1）局部混入：

//组件内
import minxins  from "./common/minxins";
export default{
    mixins: [minxins],//混入
    data(){
        return{
             message:'使用混入对象的组件',
             bar:'bar',
 
        }
    },
    mounted() { 
    console.log(this.message) // 使用混入对象的组件  //发生冲突时以组件数据优先
    console.log(this.$data) //{ message: "使用混入对象的组件", foo: "foo", bar: "bar" }
  },
 
}

（2）全局混入：在main.js中使用

//main.js 中
//方式一
Vue.mixin({
  data(){
    return{
      globalMix:'globalMix'
    }
  },
  methods:{
    hello(){
      console.log('hello,globalMix')
    }
  }
})
//方式二
import mixin from './common/mixin';
Vue.mixin(mixin);

使用注意项:

1 .混入对象的方法和参数在各组件中不共享。
混合对象中的参数num

组件1中的参数num进行+1的操作

组件2中的参数num未进行操作

2.值为对象的选项（如methods,components等，）拥有相同键名的选项-混入对象会被组件覆盖

混入对象中的方法

组件中的方法

打印结果如下：

3.值为函数的选项（如created,mounted，data等）会被合并调用——都被调用，且混合对象里的钩子函数在组件里的钩子函数之前调用。

//minxins.js 文件
export default{
    data(){
        return{
            message:'混入对象',
            foo:'foo'
        }
    }
}

//组件内
import minxins  from "./common/minxins";
export default{
    mixins: [minxins],//混入
    data(){
        return{
             message:'使用混入对象的组件',
             bar:'bar',
 
        }
    },
    mounted() { 
    console.log(this.message) // 使用混入对象的组件  //发生冲突时以组件数据优先
    console.log(this.$data) //{ message: "使用混入对象的组件", foo: "foo", bar: "bar" }
  },
 
}

原因：混入mixins中data（）的钩子函数在组件里的钩子函数之前调用。导致组件内的data（）return的数据覆盖了混入mixins中data返回的数据。

4.混入中的异步：
当混合里面包含异步请求函数，而我们又需要在组件中使用异步请求函数的返回值时，我们应该如何使用？答案是：不要返回结果而是直接返回异步函数
mixin中

组件中

控制台：