vue mixins合并策略以及應(yīng)用場景分析
vue mixins合并策略及應(yīng)用場景
mixins
混合 (mixins) 是一種分發(fā) Vue 組件中可復(fù)用功能的非常靈活的方式。
混合對象可以包含任意組件選項(xiàng)。
當(dāng)組件使用混合對象時，所有混合對象的選項(xiàng)將被混入該組件本身的選項(xiàng)。
具體合并策略
1、data
mixins中的data會合并到data中，有沖突的話，data中數(shù)據(jù)覆蓋mixins中的數(shù)據(jù)。
2、鉤子函數(shù)
mixins中的鉤子函數(shù)也會執(zhí)行，先執(zhí)行mixins中的鉤子函數(shù)。
3、methods、components 和 directives
methods、components 和 directives會執(zhí)行，但有沖突時，原methods、components和 directives會覆蓋mixins中的methods、components和 directives
應(yīng)用場景
多個實(shí)例引用了相同或相似的方法或?qū)傩缘?，可將這些重復(fù)的內(nèi)容抽取出來作為mixins的js，export出去，在需要引用的vue文件通過mixins屬性注入
mixins的使用方法和注意點(diǎn)
mixins基礎(chǔ)概況
vue中的解釋是這樣的，如果覺得語言枯燥的可以自行跳過嘿~
混入 (mixins)： 是一種分發(fā) Vue 組件中可復(fù)用功能的非常靈活的方式?；烊雽ο罂梢园我饨M件選項(xiàng)。當(dāng)組件使用混入對象時，所有混入對象的選項(xiàng)將被混入該組件本身的選項(xiàng)。
怎么用？
舉個栗子：
定義一個混入對象
把混入對象混入到當(dāng)前的組件中
用法似不似相當(dāng)簡單呀
mixins的特點(diǎn)
1 方法和參數(shù)在各組件中不共享
混合對象中的參數(shù)num
組件1中的參數(shù)num進(jìn)行+1的操作
混入對象中的方法
打印臺的輸出
值為函數(shù)的選項(xiàng)，如created,mounted等，就會被合并調(diào)用，混合對象里的鉤子函數(shù)在組件里的鉤子函數(shù)之前調(diào)用
混入對象函數(shù)中的console
組件函數(shù)中的console
打印臺的打印
與vuex的區(qū)別
經(jīng)過上面的例子之后，他們之間的區(qū)別應(yīng)該很明顯了哈~
vuex：用來做狀態(tài)管理的，里面定義的變量在每個組件中均可以使用和修改，在任一組件中修改此變量的值之后，其他組件中此變量的值也會隨之修改。Mixins：可以定義共用的變量，在每個組件中使用，引入組件中之后，各個變量是相互獨(dú)立的，值的修改在組件中不會相互影響。
總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue中之nextTick函數(shù)源碼分析,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
Vue路由懶加載是一種優(yōu)化技術(shù),旨在減少應(yīng)用程序的初始加載時間并提高性能,這篇文章給大家介紹vue路由懶加載的相關(guān)知識,感興趣的朋友跟隨小編一起看看吧2024-05-05
Vue 菜單欄點(diǎn)擊切換單個class(高亮)的方法
今天小編就為大家分享一篇Vue 菜單欄點(diǎn)擊切換單個class(高亮)的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
vue新vue-cli3環(huán)境配置和模擬json數(shù)據(jù)的實(shí)例
今天小編就為大家分享一篇vue新vue-cli3環(huán)境配置和模擬json數(shù)據(jù)的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
深入探討Vue3實(shí)現(xiàn)多數(shù)據(jù)變化監(jiān)聽的方式
隨著 Vue 3 的發(fā)布,框架帶來了更多的新特性和增強(qiáng),其中之一就是 watch 函數(shù)的升級,這一改進(jìn)使得多個數(shù)據(jù)的變化偵聽更加優(yōu)雅和靈活,本文將深入探討 Vue 3 中的 watch 函數(shù),以及如何以更加優(yōu)雅的方式實(shí)現(xiàn)對多個數(shù)據(jù)變化的監(jiān)聽2023-08-08
Vite創(chuàng)建項(xiàng)目的實(shí)現(xiàn)步驟
隨著 Vite2 的發(fā)布并日趨穩(wěn)定，現(xiàn)在越來越多的項(xiàng)目開始嘗試使用它。本文我們就介紹了Vite創(chuàng)建項(xiàng)目的實(shí)現(xiàn)步驟，感興趣的可以了解一下2021-07-07
vue項(xiàng)目使用websocket連接問題及解決
這篇文章主要介紹了vue項(xiàng)目使用websocket連接問題及解決，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
iview tabs 頂部導(dǎo)航欄和模塊切換欄的示例代碼
這篇文章主要介紹了iview tabs 頂部導(dǎo)航欄和模塊切換欄的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
Vue自定義指令實(shí)現(xiàn)checkbox全選功能的方法
下面小編就為大家分享一篇Vue自定義指令實(shí)現(xiàn)checkbox全選功能的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
Vue 作為一款流行的前端框架,提供了多種方式來定義組件,包括單文件組件、渲染函數(shù)、、JSX/TSX 以及函數(shù)式組件、不同的方式適用于不同的場景,本文將對這四種方式進(jìn)行詳細(xì)對比,幫助你找到最適合自己項(xiàng)目的方案,需要的朋友可以參考下2025-03-03