天天看點

【Vue】Mixin 混入的基礎文法(1)

學習内容:

(1)學習 Vue 裡面複用性代碼該怎麼去寫(元件?)

學習過程:

首先來學習 mixin 這樣的知識點,來看示例代碼:

【Vue】Mixin 混入的基礎文法(1)
【Vue】Mixin 混入的基礎文法(1)
【Vue】Mixin 混入的基礎文法(1)

mixin是什麼概念?它是一個混入的概念,混入就是把一些内容混入到哪裡去?

首先我定一個myMixin,【第15行】

myMixin它是一個混入,等于一個對象{}。‍‍在對象裡面我也定一個data,然後它return一個number是2,‍‍這樣的話我就定義了一個混入的内容,

它就是一個對象裡面有一個data的東西,這個data其實和我們在元件裡面 在 Vue 的執行個體裡面寫 data 是一樣的,

然後我把混入混到元件裡面來,‍‍怎麼混?代碼寫注釋

我們寫一下 minxins,然後讓它等于一個數組,‍‍在這個數組裡面我們使用 myMixin,它的意思就是我在我的 Vue 的執行個體上面‍‍去使用minxins這樣的内容。‍‍

那麼你可以了解成myMixin裡面的data也會混進來,‍‍它會不會覆寫掉我們這個執行個體裡面原來的 data,【第21行】

可以看到執行個體上的number是1:

【Vue】Mixin 混入的基礎文法(1)

你混入進來的一個number是2:

【Vue】Mixin 混入的基礎文法(1)

現在列印出的number究竟是幾?儲存一下,然後回到頁面上重新整理,來看一下:

【Vue】Mixin 混入的基礎文法(1)

這個時候你會發現它列印出的 Number是 1,也就是使用的資料内容還是元件裡的資料内容,‍‍假設我把元件裡的data給它去掉:

【Vue】Mixin 混入的基礎文法(1)

儲存一下,然後再重新整理:

【Vue】Mixin 混入的基礎文法(1)

你發現這個時候‍‍它裡面myMixin好像并沒有生效,這塊是我寫錯了,改正之後:

【Vue】Mixin 混入的基礎文法(1)

寫對了之後我們再重新整理,它展示的是2:

【Vue】Mixin 混入的基礎文法(1)

也就是說當你元件裡沒有資料的時候,我會使用你混入進來的資料,‍‍但是當你元件裡也有這個資料,我再把它打開的時候,我們刷一下,你會發現它會用1。

當你混入的一些内容,‍‍如果和我元件裡的一些内容有一些沖突的話,比如說你data裡的資料沖突了,那麼誰都優先級更高呢?‍‍【重點記住】

元件裡面的資料的優先級比混入的資料的優先級更高,

是以元件‍‍ data 優先級高于mixin data優先級。‍‍

你在mixin裡面除了定一個number之外,你可以再給它定一些其他的東西,比如說count:

【Vue】Mixin 混入的基礎文法(1)

你定義了count之後,ta會把 count混入到 app執行個體裡面 對應的 data裡面來,‍‍現在隻要你在app應用的執行個體裡面用了 mixin之後,理論上你在這直接就可以用count了,‍‍因為它會把 count混進來:

【Vue】Mixin 混入的基礎文法(1)

這就是混入的概念,就是一個對象,我把它混到我的應用裡,或者混到我的元件裡,就這麼簡單。‍‍

繼續,比如說data可以混入,生命周期函數可不可以混入?

比如說在這裡我寫 created()這樣的生命周期函數:

【Vue】Mixin 混入的基礎文法(1)

我們回到浏覽器上重新整理一下,看一下控制台的輸出:

【Vue】Mixin 混入的基礎文法(1)

你會發現mixin created也會被執行,說明什麼?‍‍

說明你這種生命周期函數也可以通過這種混入的形式混到我的應用裡或者元件裡,

假設‍‍我這個元件裡面也有自己的這種生命周期函數,怎麼辦?

比如說:

【Vue】Mixin 混入的基礎文法(1)

儲存,然後重新整理:

【Vue】Mixin 混入的基礎文法(1)

這個時候 mixin created 和 created‍‍都會執行,也就是說我們下面寫的生命周期函數沒有把mixin裡面的對應的内容覆寫掉,

像data一樣,如果是data的話那就覆寫了,但是你發現如果是這種生命周期函數的話,它會怎麼樣?它不會覆寫,兩個都會執行。‍‍

先執行myMixmin裡面的 created:

【Vue】Mixin 混入的基礎文法(1)

再執行我元件自己的生命周期函數。‍‍

是以生命周期函數。先執行mixin裡面的‍‍,再執行元件裡面的:

繼續閱讀