vue之混入(mixin)的详解

一、前言：
混入的作用：可以省很多代码(高类聚低耦合)，还方便维护；
个人理解：混入就是在一个公共的实例中写入公共的数据或者方法，这样的话vue会自动注入到(全局混入会注入到每一个实例组件中)、(单页面引入的会注入到引入的组件中)。混入的对象也就是mixin中可以写入的内容包含任意组件选项- - - - - -(也就是说你在export default { } 里边的内容都是可以混入的)有一种类似公共方法的感觉，但是可以写公共的data里面的数据，这一点比较方便。
二、混入的方式一：单页面引入混入
首先创建一个 mixin 文件夹，然后再在里面创建一个mixin.js文件
然后再创建混入对象：

let mixin = {
    data(){
        return{
            str:'你好'
        }
    },
    created() {
        console.log("我是混入的生命周期函数")
    },
    methods: {
        showToast(){
            alert("我是混入中的方法啊!")
        }
    },
}

// 记住，最后一定要导出
export default mixin 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

在组件中使用混入：

import mixin from '../mixin/mixin.js'	// 首先引入这个混入对象
export default {
    mixins:[mixin],		// 然后注册你引入的这个混入对象
}

1
2
3
4
5

混入方式二、全局混入：
创建混入对象的方式还是和上面方法一样，我这里就直接引入了;

在main.js中引入混入对象并全局注册

import mixin from './mixin/mixin'
Vue.mixin(mixin);

1
2
3

这里需要注意的是，在全局注册混入对象的时候是Vue.mixin(mixin);不是Vue.use(mixin);
这样第一种方法，就全局注入到每一个spa实例中了。
科普一下：spa应用就是单页面应用、像我们平时所做的vue项目都是spa应用;

注意事项：
1、而对于混入对象以及组件自身的created钩子函数呢，它们都将被调用。但混入对象的钩子会在组件自身的钩子之前调用。
2、如果组件自身定义了与钩子对象中同名的数据或方法，为了避免冲突，vue将优先使用组件自身的数据或方法 (也就是重名了就只会调用组件内部的数据或方法)。
3.组件data优先级高于mixin data优先级
4.生命周期函数，先执行mixin里面的，再执行组件里面的
5.自定义的属性，组件中的属性优先级高于mixin属性的优先级