Vue 混入對象

1.認識混入

混入是一種代碼的組織方式,可以在多個組件間橫向的複用代碼.
定義混入對象,只需要把混入對象添加到組件中,那麼該組件就可以獲取到該混入對象中存儲的任何東西.

2.混入的基本使用

聽到混入這個詞是不是會有一種熟悉的感覺,我們在less 的基本語法中也有一個混入Mixin,但今天的混入和那個還是不一樣哦…

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

示例代碼如下:

<div id="app">
        <my-com></my-com>
    </div>
    <template id="mycom">
        <div>
            {{msg}}
        </div>
    </template>
    <script>
    //定義混入對象
        let mixin = {
            data(){
                return{
                    msg:"hello world",
                }
            }
        }
        let MyCom = {
        //使用混入對象
            mixins: [mixin],
            template:"#mycom",
        }
        let vm = new Vue({
            el:"#app",
            components: {
                MyCom,
            }
        })
    </script>

上面的例子中我展示了混入的一個最基本的用法.
我們在組件mycom 中並沒有定義數據 msg,只引入了混入對象mixin,但是我們卻可以在頁面上輸出 mixin 中的數據 hello world.

所以,我們就可以理解爲當我們在組件中使用了混入對象的時候,該組件中就可以使用混入對象中的數據

混入對象幾乎可以引用組件中的所有對象,就像它本身就是組件總的一部分.

2.混入對象與組件選項的和並

既然我們會在組件中使用混入對象,那就不可避免的會發生一個問題數據衝突
當組件中的數據和混入對象中的數據發生衝突的時候,要以誰的數據爲最終參考呢???

2.1 數據對象合併

數據對象會在內部發生遞歸合併,並在衝突時以組件的數據優先.
示例如下:

<div id="app">
        <my-com></my-com>
    </div>
    <template id="mycom">
        <div>
            <h2>{{msg}}</h2>
            <h3>{{user}}</h3>
            {{music}}
        </div>
    </template>
    <script>
        let mixin = {
            data(){
                return{
                    msg:"hello world",
                    music:"日光",
                }
            }
        }
        let MyCom = {
            mixins: [mixin],
            data(){
               return{
                msg:"我是組件本身的數據",
                user:{
                    name:"圖圖",
                    age:3,
                }
               }
            },
            template:"#mycom",
        }
        let vm = new Vue({
            el:"#app",
            components: {
                MyCom,
            }
        })
    </script>

頁面中顯示的結果如下圖:

我們再在開發者工具裏看看:

這裏就很明顯了,組件和混入的數據相同的時候,會以組件的數據優先,當混入有的數據組件中沒有的時候數據會合並.

總結爲一句話就是:
數據對象會在內部發生遞歸合併,並在衝突時以組件的數據優先.

2.2 鉤子函數

同名鉤子函數將合併爲一個數組，因此都將被調用。另外，混入對象的鉤子將在組件自身鉤子之前調用。
看下面的示例:

<script>
	//鉤子函數
        let mixin = {
            created () {
                console.log("我是混入中的函數");   
            }
        }
        let MyCom = {
            mixins: [mixin],
            template:"#mycom",
            created () {
                console.log("我是組件中的函數")
            }
        }
        let vm = new Vue({
            el:"#app",
            components: {
                MyCom,
            }
        })
</script>

看下打印的結果:

所以當組件被執行時,混入中鉤子函數和組件中的鉤子函數都會執行,且混入中的鉤子函數會在組件的鉤子函數之前執行

2.3 方法 計算屬性等的合併

值爲對象的選項，例如 methods、components 和 directives，將被合併爲同一個對象。兩個對象鍵名衝突時，取組件對象的鍵值對。

通俗的說,就跟data中數據一樣,重名的就用組件的覆蓋混入對象的方法.

	<div id="app">
        <my-com></my-com>
    </div>
    <template id="mycom">
        <div>
            <button @click = "handleClick">handleClick</button>
            <button @click = "mixinClick">mixinClick</button>
            <!-- <h2>{{msg}}</h2>
            <h3>{{user}}</h3>
            {{music}} -->
        </div>
    </template>
    <script>
    let mixin = {
           methods:{
               handleClick() {
                   console.log("混入中的handleClick方法")
               },
               mixinClick(){
                   console.log("混入中的方法")
               }
           }
        }
        let MyCom = {
            mixins: [mixin],
            template:"#mycom",
            methods:{
               handleClick() {
                   console.log("組件中的handleClick方法")
               }
           }
        }
        let vm = new Vue({
            el:"#app",
            components: {
                MyCom,
            }
        })
    </script>

執行結果如下:

當組件創建時,如果組件和混入中都有這個方法,那麼就會只有組件中的方法執行, 因爲組件中的方法把混入方法覆蓋了.

通俗的說,就跟data中數據一樣,重名的就用組件的覆蓋混入對象的方法.不重名就遞歸合併.