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中封裝的一些公用的方法）