二十四、Mixins 混入選項操作
阿新 • • 發佈：2018-12-18
Mixins 混入選項操作
Mixins一般有兩種用途：
1、在你已經寫好了構造器後，需要增加方法或者臨時的活動時使用的方法，這時用混入會減少原始碼的汙染。 2、很多地方都會用到的公用方法，用混入的方法可以減少程式碼量，實現程式碼重用。
<html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../assets/js/vue.js"></script> <title>Mixins Option Demo</title> </head> <body> <h1>Mixins Option Demo</h1> <hr> <div id="app"> <p>num:{{ num }}</p> <P><button @click="add">增加數量</button></P> </div> <script type="text/javascript"> //全域性API混入方式 Vue.mixin({ updated:function(){ console.log('我是全域性被混入的==='); } }) //所謂的混入就是一個臨時增加，額外臨時加入時，用於顯示日誌 //從執行的先後順序來說，都是混入的先執行，然後構造器裡的再執行， // 需要注意的是，這並不是方法的覆蓋，而是被執行了兩邊。 var addLog={ updated:function(){ console.log("資料放生變化,變化成"+this.num+"."); } } var app=new Vue({ el:'#app', data:{ num:1 }, methods:{ add:function(){ this.num++; } }, updated:function(){ console.log("構造器裡的updated方法。") }, mixins:[addLog]//混入 }) </script> </body> </html>