Mixins一般有兩種用途：
1、在你已經寫好了構造器后，需要增加方法或者臨時的活動時使用的方法，這時用混入會減少源代碼的污染。
2、很多地方都會用到的公用方法，用混入的方法可以減少代碼量，實現代碼重用。
一、Mixins的基本用法
我們現在有個數字點擊遞增的程序，假設已經完成了，這時我們希望每次數據變化時都能夠在控制臺打印出提示：“數據發生變化”.
代碼實現過程:
<!DOCTYPE html><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"> //額外臨時加入時，用于顯示日志 var addLog={ updated:function(){ console.log("數據放生變化,變化成"+this.num+"."); } } var app=new Vue({ el:'#app', data:{ num:1 }, methods:{ add:function(){ this.num++; } }, mixins:[addLog]//混入 }) </script></body></html>二、mixins的調用順序
從執行的先后順序來說，都是混入的先執行，然后構造器里的再執行，需要注意的是，這并不是方法的覆蓋，而是被執行了兩邊。
在上邊的代碼的構造器里我們也加入了updated的鉤子函數：
updated:function(){ console.log("構造器里的updated方法。")},這時控制臺輸出的順序是：
mixins數據放生變化,變化成2.
構造器里的updated方法。
PS：當混入方法和構造器的方法重名時，混入的方法無法展現，也就是不起作用。
三、全局API混入方式
我們也可以定義全局的混入，這樣在需要這段代碼的地方直接引入js，就可以擁有這個功能了。我們來看一下全局混入的方法：
Vue.mixin({ updated:function(){ console.log('我是全局被混入的'); }})PS：全局混入的執行順序要前于混入和構造器里的方法。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。
新聞熱點
疑難解答
圖片精選
