Mixins一般有兩種用途：

創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的岳池網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

1、在你已經(jīng)寫好了構(gòu)造器后，需要增加方法或者臨時(shí)的活動(dòng)時(shí)使用的方法，這時(shí)用混入會(huì)減少源代碼的污染。

2、很多地方都會(huì)用到的公用方法，用混入的方法可以減少代碼量，實(shí)現(xiàn)代碼重用。

一、Mixins的基本用法

我們現(xiàn)在有個(gè)數(shù)字點(diǎn)擊遞增的程序，假設(shè)已經(jīng)完成了，這時(shí)我們希望每次數(shù)據(jù)變化時(shí)都能夠在控制臺(tái)打印出提示：“數(shù)據(jù)發(fā)生變化”.

代碼實(shí)現(xiàn)過程:

  
  
  


  
Mixins Option Demo
  

  

    
num:{{ num }}
    
增加數(shù)量
  
 
  

二、mixins的調(diào)用順序

從執(zhí)行的先后順序來說，都是混入的先執(zhí)行，然后構(gòu)造器里的再執(zhí)行，需要注意的是，這并不是方法的覆蓋，而是被執(zhí)行了兩邊。

在上邊的代碼的構(gòu)造器里我們也加入了updated的鉤子函數(shù)：

updated:function(){


   console.log("構(gòu)造器里的updated方法。")


},

這時(shí)控制臺(tái)輸出的順序是：

mixins數(shù)據(jù)放生變化,變化成2.
構(gòu)造器里的updated方法。

PS：當(dāng)混入方法和構(gòu)造器的方法重名時(shí)，混入的方法無法展現(xiàn)，也就是不起作用。

三、全局API混入方式

我們也可以定義全局的混入，這樣在需要這段代碼的地方直接引入js，就可以擁有這個(gè)功能了。我們來看一下全局混入的方法：

Vue.mixin({


  updated:function(){


    console.log('我是全局被混入的');


  }


})

PS：全局混入的執(zhí)行順序要前于混入和構(gòu)造器里的方法。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。