vue裏面的Mixins（混合）
阿新 • • 發佈：2018-01-12
type 擁有 click 定義 就是 增加方法 基本用法 round 點擊
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方法
當混入方法和構造器的方法重名時，混入的方法無法展現，也就是不起作用。
三、全局API混入方式
我們也可以定義全局的混入，這樣在需要這段代碼的地方直接引入js，就可以擁有這個功能了。我們來看一下全局混入的方法：
Vue.mixin({
updated:function(){
console.log(‘我是全局被混入的‘);
}
})
全局混入的執行順序要前於混入和構造器裏的方法
vue裏面的Mixins（混合）