理解vue中mixin，以及使用mixin的注意點

mixin在vue官方文檔中是這麼解釋的：

混入 (mixin) 提供了一種非常靈活的方式，來分發 Vue 組件中的可複用功能。一個混入對象可以包含任意組件選項。當組件使用混入對象時，所有混入對象的選項將被「混合」進入該組件本身的選項。

mixin爲我們提供了兩種混入方式：局部混入和全局混入

具體怎麼用？

我們就以局部混入（也就是隻有引入了mixin的混入對象纔可以使用，並且只有在引入了mixin混入對象的組件中才生效）舉個例子

定義一個混入對象

把混入對象混入到組件中

控制檯打印結果

mixin的特點

1. 方法和參數在各組件中不共享

混合對象中的參數num

組件1中的參數num進行+1的操作

打印結果

組件2中的參數num不進行操作

打印結果

大家可以看到，我在組件1裏改變了num裏面的值，組件2中的num值還是混入對象裏的初始值

2. 值爲對象的選項，如methods,components等，選項會被合併，鍵衝突的組件會覆蓋混入對象的

混入對象中的方法test(）
組件中的方法test()

當我在組件中調用這個重複的方法時

打印結果

可以看到mixin裏的test方法被組件裏的test方法覆蓋了

3. 值爲函數的選項，如created,mounted等，就會被合併調用，混合對象裏的鉤子函數在組件裏的鉤子函數之前調用

混入對象函數中的console

組件函數中的console

打印結果

看了上面的例子，大家應該會很容易理解了吧！

總結：mixin可以定義共用的變量，在每個組件中使用，引入組件中之後，各個變量是相互獨立的，值的修改在組件中不會相互影響。