Vue中mixin的理解

mixins基礎概況
vue中的解釋是這樣的，如果覺得語言枯燥的可以自行跳過嘿~

混入 (mixins)： 是一種分發 Vue 元件中可複用功能的非常靈活的方式。混入物件可以包含任意元件選項。當元件使用混入物件時，所有混入物件的選項將被混入該元件本身的選項。

怎麼用？
舉個例子：

定義一個混入物件

把混入物件混入到當前的元件中

用法似不似相當簡單呀

mixins的特點
1 方法和引數在各元件中不共享

混合物件中的引數num

元件1中的引數num進行+1的操作

元件2中的引數num未進行操作

看兩元件中分別輸出的num值

大家可以看到，我在元件1裡改變了num裡面的值，元件2中的num值還是混入物件裡的初始值

2 值為物件的選項，如methods,components等，選項會被合併，鍵衝突的元件會覆蓋混入物件的

混入物件中的方法

元件中的方法

列印臺的輸出

3 值為函式的選項，如created,mounted等，就會被合併呼叫，混合物件裡的鉤子函式在元件裡的鉤子函式之前呼叫

混入物件函式中的console

元件函式中的console

列印臺的列印

與vuex的區別
經過上面的例子之後，他們之間的區別應該很明顯了哈~

vuex：用來做狀態管理的，裡面定義的變數在每個元件中均可以使用和修改，在任一元件中修改此變數的值之後，其他元件中此變數的值也會隨之修改。

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

與公共元件的區別
同樣明顯的區別來再列一遍哈~

元件：在父元件中引入元件，相當於在父元件中給出一片獨立的空間供子元件使用，然後根據props來傳值，但本質上兩者是相對獨立的。

Mixins：則是在引入元件之後與元件中的物件和方法進行合併，相當於擴充套件了父元件的物件與方法，可以理解為形成了一個新的元件。

來源：https://www.jianshu.com/p/f34863f2eb6d