首頁 > web前端 > 前端問答 > vue的混入可以使用生命週期嗎

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

青灯夜游
發布: 2022-12-15 14:25:22
原創
2933 人瀏覽過

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

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

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

mixins(混入)基本介紹

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

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

mixins使用

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

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

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

  data(){
    return {}
  },
  methods:{},
  computed:{},
  filters:{},  created(){},  mounted(){
    console.log("我是mixins");
  }
}复制代码
登入後複製

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

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

mixin的特性

1.mixins中的生命週期會與引入mixins的元件的生命週期整合在一起呼叫,而且mixins中的生命週期函數會比引入mixins的元件所呼叫的。 【相關推薦:vuejs影片教學web前端開發

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

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

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

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

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

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

##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也可以被多個組件引用。 ######(學習影片分享:###vuejs入門教學###、###程式設計基礎影片###)###

以上是vue的混入可以使用生命週期嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板