Vue中mixins的使用方法以及實際項目應用指南

更新時間：2023年03月28日 12:17:25 作者：阿酒在看云

vue中提供了一種混合機制--mixins,用來更高效的實現(xiàn)組件內容的復用,下面這篇文章主要給大家介紹了關于Vue中mixins的使用方法以及實際項目應用指南,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

（1）mixin基礎

官網(wǎng)解釋（Vue2.x）：

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

如何理解mixins？我們可以將mixins理解成一個數(shù)組，數(shù)組中有單或多個mixin，mixin的本質就是一個JS對象，它可以有data、created、methods等等vue實例中擁有的所有屬性，甚至可以在mixins中再次嵌套mixins。

（2）mixin特點

1.選項合并

官網(wǎng)解釋（Vue2.x）

當組件和混入對象含有同名選項時，這些選項將以恰當?shù)姆绞竭M行‘合并’。
比如，數(shù)據(jù)對象在內部會進行遞歸合并，并在發(fā)生沖突時以組件數(shù)據(jù)優(yōu)先。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>學習mixins的簡單使用</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div class="my-app">{{message}}</div>
    <script type="text/javascript">
        const myMixin = {
            data() {
                return {
                    message: 'this is mixin message'
                }
            },
            created() {
                console.log('mixin created')
            }
        }
        new Vue({
            el: ".my-app",
            mixins: [myMixin],
            data() {
                return {
                    message: '簡單的vue'
                }
            },
            created() {
                console.log(this.message)
            }
        })
    </script>
</body>

</html>

界面：

mixins與Vue instance合并時，會將created等鉤子函數(shù)合并成數(shù)組，mixins的鉤子優(yōu)先調用，當data、methods對象健值沖突時，以組件優(yōu)先。

同名鉤子函數(shù)將合并為一個數(shù)組，因此都將被調用。另外，混入對象的鉤子將在組件自身鉤子之前調用。

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

2.方法和參數(shù)在各組件中不共享

簡述：對于一個混合對象而言，如果在不同的組件中（以組件1和組件2為例）使用數(shù)據(jù)，如果組件1對mixin中的值改變，不會影響組件2中引用的mixin的data。

例子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>學習mixins的簡單使用（1）</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div class="my-app">{{message}}</div>
    <div class="my-app1">{{message}}</div>
    <script type="text/javascript">
        const myMixin = {
            data() {
                return {
                    message: 'this is mixin message',
                    age: '18',
                }
            },
            created() {
                console.log('mixin created')
            }
        }
        new Vue({
            el: ".my-app",
            mixins: [myMixin],
            data() {
                return {
                    message: '簡單的vue'
                }
            },
            created() {
                this.age++;
                console.log('第一次引用mixin——————' + this.age)//19
            }
        })
        new Vue({
            el: ".my-app1",
            mixins: [myMixin],
            data() {
                return {
                    message: '簡單的vue'
                }
            },
            created() {
                console.log(this.message)
                console.log('第二次引用mixin——————' + this.age)//18
            }
        })
    </script>
</body>
</html>

（3）mixin與vuex的區(qū)別

vuex：
狀態(tài)管理
里面定義的變量在每個組件中均可以進行使用和修改，在任一組件中修改此變量的值之后，其他組件中此變量的值也會隨之改變。

mixins:
可以定義共用的變量
在每個組件中使用，引入組件之后，各個變量是相互獨立的，值的修改在組件中不會相互影響

（4）mixin與公共組件的區(qū)別

組件：在父組件中引入組件，相當于在父組件中給出獨立的一片空間來供子組件使用，父子組件中根據(jù)props和$emit來互相傳值，實際上兩者是相互獨立的

mixins:在引入組件之后與組件中的對象與方法進行合并，相當于擴展了父組件中的對象和方法，形成了一個新的組件。

（5）項目實踐

在vue項目中使用element-ui時，比如在使用Table表格的時候，免不了申明tableData、total、pageSize等一些Table表格、Pagination分頁需要的參數(shù)。

可以將重復的data和methods寫入一個tableMixin中。

export default {
  data() {
    return {
      total: 0,
      pageNo: 1,
      pageSize: 10,
      tableData: [],
      loading: false
    }
  },
  created() {
    this.searchData()
  },
  methods: {
    // 預申明，防止報錯
    searchData() {},
    handleSizeChange(size) {
      this.pageSize = size
      this.searchData()
    },
    handleCurrentChange(page) {
      this.pageNo = page
      this.searchData()
    },
    handleSearchData() {
      this.pageNo = 1
      this.searchData()
    }
  }
}

當需要的時候直接引入即可

import tableMixin from './tableMixin'

export default {
  ...//引入mixins
  mixins: [tableMixin],
  methods: {
    searchData() {
      ...
    }
  }
}

我們在組件內會重新申明serchData方法，類似這種methods對象形式的key，如果key相同，組件內的key會覆蓋tableMixin中的key。
當然我們還可以在mixins嵌套mixins。

（6）總結

注意一下 vue 中 mixins 的優(yōu)先級，component > mixins > extends。

我們暫且將 mixins 稱作是組件模塊化，靈活運用組件模塊化，可以將組件內的重復代碼提取出來，實現(xiàn)代碼復用，也使我們的代碼更加清晰，效率也大大提高。

附：mixins和普通情況下引入組件有什么區(qū)別？

組件在引用之后相當于在父組件內開辟了一塊單獨的空間，來根據(jù)父組件props過來的值進行相應的操作，單本質上兩者還是涇渭分明，相對獨立。
而mixins則是在引入組件之后，則是將組件內部的內容如data等方法、method等屬性與父組件相應內容進行合并。相當于在引入后，父組件的各種屬性方法都被擴充了。

mixins的一些特性

mixins中的生命周期會與引入mixins的組件的生命周期整合在一起調用
值為對象的選項, 組件的data、methods、filters會覆蓋mixins里的同名data、methods、filters
如methods,components等，選項會被合并，鍵沖突的組件會覆蓋混入對象的，比如混入對象里有個方法A，組件里也有方法A，這時候在組件里調用的話，執(zhí)行的是組件里的A方法
值為函數(shù)的選項，不同mixin里的同名方法，按照引進的順序，最后的覆蓋前面的同名方法
如created,mounted等，就會被合并調用，混合對象里的鉤子函數(shù)在組件里的鉤子函數(shù)之前調用，同一個鉤子函數(shù)里，會先執(zhí)行混入對象的東西，再執(zhí)行本組件的
方法和參數(shù)在各組件中不共享
如混入對象中有一個 cont:1的變量,在組件A中改變cont值為5，這時候在組件B中獲取這個值，拿到的還是1，還是混入對象里的初始值，數(shù)據(jù)不共享
與vuex的區(qū)別
vuex：用來做狀態(tài)管理的，里面定義的變量在每個組件中均可以使用和修改，在任一組件中修改此變量的值之后，其他組件中此變量的值也會隨之修改
mixins：可以定義共用的變量，在每個組件中使用，引入組件中之后，各個變量是相互獨立的，值的修改在組件中不會相互影響
與公共組件的區(qū)別
組件：在父組件中引入組件，相當于在父組件中給出一片獨立的空間供子組件使用，然后根據(jù)props來傳值，但本質上兩者是相對獨立的

到此這篇關于Vue中mixins的使用方法以及實際項目應用指南的文章就介紹到這了,更多相關Vue中mixins使用方法內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: