（Vue）局部混入mixin混入用法

今天无意在百度上搜了一下mixins,然后哐哐得出来的都是mixin的概念，mixins的原理（几句话咱也没看懂），有几个是用法的，但是说的也是含含糊糊。。还有的画思维导图的。。挺简单的问题非要复杂化。。。 其实我就想知道咋用，能干什么，其他的我真不关心。。（最好带那种步骤的才好~ haha…）

好了，步入正题，mixin官方文档上得解释是：

官方文档介绍的。。有点官方。。。反正我第一遍是没看懂。。
个人理解：mixin可以定义公用的,data，created，methods，computed，watch… 可以把mixin理解成，html引入js文件就可以调用js文件的方法，minxin还有一个强大之处就是（混入），相同的变量/方法名会合并在一起，如果有相同名字，当前文件的变量或者方法会覆盖mixin文件的名字或者方法
下面是使用：
src目录创建minxins文件，里面创建index.js文件

然后页面上这样 相同颜色的要对应上，代码在最后面我会粘上

页面显示：

然后注释掉.vue文件的data值

页面变成了

所以当相同名字页面权重大于引入文件，代码在下面，可以粘贴下来自己测试~~

<template>
    <div>
        <div>{{testMix}}</div>
        <div @click="mixinsFun">{{testMix}}</div>
        <input type="text" v-model="testMix">
        <div>{{testMix2}}</div>
    </div>
</template>
<script>
import {mixinstest} from '../mixins/index' 
export default {
    mixins: [mixinstest],
    data (){
        return {
            // testMix:'这是组件的数据'
        }
    },
    created(){
        console.log('这是组件的created')
    },
    methods: {
        mixinsFun(){
            console.log('调用组件的methods的函数')
        }
    },
    computed:{
        testMix2(){
            return this.testMix+':这是组件计算结果'
        }
    },
    watch: {
        testMix(newVal,oldVal){
            console.log('组件的watch')
        }
    }
}
</script>
<style>

</style>

// 创建一个需要混入的对象 
export const mixinstest = {
    data(){
        return {
            testMix: '混入对象的data'
        }
    },
    created(){
        console.log('这是混入对象的created')
    },
    methods:{
        mixinsFun(){
            console.log('调用混入对象的methods的函数')
        }
    },
    computed:{
        testMix2(){
            return this.testMix+'：这是混入对象计算结果。'
        }
    },
    watch: {
        testMix(newVal,oldVal){
            console.log('混入对象的watch')
        }
    }
}