Vue （mixins） 混入个人理解 及使用场景

一、理解混入合并的规则

1.data ,同名以组件为准

data (){
    return{
    }
}

2.create 等钩子函数，  先运行mix,再运行组件内

3.methods,components等， 内同名，以组件为准


 

二、理解局部混入和全局混入

1.局部混入  创建mixin.js文件， 在需要的组件或者页面引入

import mixin from '../mixins/mixin'
export default {
    mixins: [mixin],
    data() {
        return {
        }
    }
    mounted() {
        this.mixinMethod()
    }
}

 

2.全局混入，分两种情况，一种是普通的html 中引入， 直接 

Vue.mixin({
        methods: {
            mixinOne: function() {
                console.log('mixinOne')
            }    
        }
    })

第二种 ，在vue 项目中，则可以在main.js中引入，页面组件中直接通过this.访问混入的组件和方法即可

 

 

混入在什么情景需要用到？mixins 的作用可能和 vuex ，公共组件这两个有点像。

mixins和vuex的区别。
vuex公共状态管理，在一个组件被引入后，如果该组件改变了vuex里面的数据状态，其他引入vuex数据的组件也会对应修改，所有的vue组件应用的都是同一份vuex数据。（在js中，有点类似于浅拷贝）
vue引入mixins数据，mixins数据或方法，在每一个组件中都是独立的，互不干扰的，都属于vue组件自身。（在js中，有点类似于深度拷贝）

mixins和公共组件的区别
通用的数据和方法，确实可以提出一个通用的组件，由父子组件传参的形式进行分享公用。
公共组件最主要的作用还是复用相同的vue组件（有视图，有方法，有状态)。
如果只是提取公用的数据或者通用的方法，并且这些数据或者方法，不需要组件间进行维护，就可以使用mixins。（类似于js中封装的一些公用的方法）