vue的混入可以使用生命週期嗎

vue的混入可以使用生命週期。mixins（混入）中的生命週期會與引入mixins的元件的生命週期整合在一起呼叫，而且mixins中的生命週期函數會比引入mixins的元件呼叫的快。需要注意，多個mixins的生命週期會融合到一起執行，但是同名屬性、同名方法無法融合，可能會導致衝突或覆蓋。

前端（vue）入門到精通課程，老師線上輔導：聯絡老師
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API偵錯工具：

本教學操作環境：windows7系統、vue3版，DELL G3電腦。

mixins（混入）基本介紹

我們在開發過程中，會遇到一些相同邏輯和功能的元件，我們不會在每一個元件中都寫一套程式碼，這樣會導致程式碼冗餘。

mixins的作用就是將相同的邏輯和功能抽離出來，分成單個檔案，元件只需引入mixins就可以實現相同功能。

mixins使用

也是在src資料夾中建立mixins資料夾，在裡面去寫對應的mixin.js檔案。如下所示：

用一個js檔案將vue的script部分抽離出來，如下所示：

  data(){
    return {}
  },
  methods:{},
  computed:{},
  filters:{},  created(){},  mounted(){
    console.log("我是mixins");
  }
}複製程式碼

我們就可以在元件中引入mixin，去使用如下所示：

mixin的特性

1.mixins中的生命週期會與引入mixins的元件的生命週期整合在一起呼叫，而且mixins中的生命週期函數會比引入mixins的元件呼叫的快。【相關推薦：、】

2.元件的data、methods、filters會覆蓋mixins裡的同名data、methods、filters。

3.不同mixin裡的同名方法，按照引進的順序，最後的覆蓋前面的同名方法。

mixin的缺點

1、變數來源不明確（隱式傳入），不利於閱讀，使程式碼變得難以維護。

元件裡可以引入多個mixin，並直接隱式呼叫mixin裡的變數/方法，這會讓我們有時候混亂 區分不出這些變數和方法 分別是哪個mixin裡的？

2、多個mixins的生命週期會融合到一起執行，但是同名屬性、同名方法無法融合，可能會導致衝突或覆蓋。

比如元件1中的方法要輸出屬性info，
但是元件2中也有同名屬性info，且覆蓋了元件1中的屬性info，
那麼當執行元件1中的方法時，輸出的確實元件2中的屬性，
這個我們可以避免，但是一不小心就會導致衝突，很容易製造混亂。

3、mixins和元件可能出現多對多的關係，複雜度較高

即一個元件可以參照多個mixins，一個mixins也可以被多個元件參照。

（學習視訊分享：、）

以上就是vue的混入可以使用生命週期嗎的詳細內容，更多請關注TW511.COM其它相關文章！