您好,登錄后才能下訂單哦!
這篇文章主要介紹了vue.js混入指的是什么,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
在vue.js中混入是一種分發(fā)Vue組件中可反復(fù)使用的功能的方法或計算屬性,用途:1、在已寫好了構(gòu)造器后,需要增加方法或者臨時的活動時使用的方法,這時用混入會減少源代碼的污染;2、用到公用方法時,用混入的方法可以減少代碼量,實(shí)現(xiàn)代碼重用。
混入 (mixins)定義了一部分可復(fù)用的方法或者計算屬性?;烊雽ο罂梢园我饨M件選項(xiàng)。當(dāng)組件使用混入對象時,所有混入對象的選項(xiàng)將被混入該組件本身的選項(xiàng)。
Mixins一般有兩種用途:
1、在你已經(jīng)寫好了構(gòu)造器后,需要增加方法或者臨時的活動時使用的方法,這時用混入會減少源代碼的污染。
2、很多地方都會用到的公用方法,用混入的方法可以減少代碼量,實(shí)現(xiàn)代碼重用。
Mixins的基本用法
我們現(xiàn)在有個數(shù)字點(diǎn)擊遞增的程序,假設(shè)已經(jīng)完成了,這時我們希望每次數(shù)據(jù)變化時都能夠在控制臺打印出提示:“數(shù)據(jù)發(fā)生變化”.
代碼實(shí)現(xiàn)過程:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../assets/js/vue.js"></script> <title>Mixins Option Demo</title> </head> <body> <h2>Mixins Option Demo</h2> <hr> <div id="app"> <p>num:{{ num }}</p> <P><button @click="add">增加數(shù)量</button></P> </div> <script type="text/javascript"> //額外臨時加入時,用于顯示日志 var addLog={ updated:function(){ console.log("數(shù)據(jù)放生變化,變化成"+this.num+"."); } } var app=new Vue({ el:'#app', data:{ num:1 }, methods:{ add:function(){ this.num++; } }, mixins:[addLog]//混入 }) </script> </body> </html>
mixins的調(diào)用順序
從執(zhí)行的先后順序來說,都是混入的先執(zhí)行,然后構(gòu)造器里的再執(zhí)行,需要注意的是,這并不是方法的覆蓋,而是被執(zhí)行了兩邊。
在上邊的代碼的構(gòu)造器里我們也加入了updated的鉤子函數(shù):
updated:function(){ console.log("構(gòu)造器里的updated方法。") },
這時控制臺輸出的順序是:
mixins數(shù)據(jù)放生變化,變化成2.
構(gòu)造器里的updated方法。
PS:當(dāng)混入方法和構(gòu)造器的方法重名時,混入的方法無法展現(xiàn),也就是不起作用。
全局API混入方式
我們也可以定義全局的混入,這樣在需要這段代碼的地方直接引入js,就可以擁有這個功能了。我們來看一下全局混入的方法:
Vue.mixin({ updated:function(){ console.log('我是全局被混入的'); } })
PS:全局混入的執(zhí)行順序要前于混入和構(gòu)造器里的方法。
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“vue.js混入指的是什么”這篇文章對大家有幫助,同時也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。