Mixins 混入選項操作 · web前端

Mixins一般有兩種用途： 1. 在你已經寫好了構造器后，需要增加方法或者臨時的活動時使用的方法，這時用混入會減少源代碼的污染。 2. 很多地方都會用到的公用方法，用混入的方法可以減少代碼量，實現代碼重用。 # Mixins的基本用法我們現在有個數字點擊遞增的程序，假設已經完成了，這時我們希望每次數據變化時都能夠在控制臺打印出提示：“數據發生變化”. ~~~ <body> <div id="app"> <p>num:{{num}}</p> <p> <button @click="add">add</button> </p> </div> </body> <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> ~~~ # mixins的調用順序從執行的先后順序來說，都是混入的先執行，然后構造器里的再執行，需要注意的是，這并不是方法的覆蓋，而是被執行了兩邊。在上邊的代碼的構造器里我們也加入了updated的鉤子函數： ~~~ updated:function(){ console.log("構造器里的updated方法。") } ~~~ 這時控制臺輸出的順序是：數據發生變化,變化成---2. index.html:75 構造器里的updated方法。 PS：當混入方法和構造器的方法重名時，混入的方法無法展現，也就是不起作用 # 全局API混入方式我們也可以定義全局的混入，這樣在需要這段代碼的地方直接引入js，就可以擁有這個功能了。我們來看一下全局混入的方法： ~~~ Vue.mixin({ updated:function(){ console.log('我是全局被混入的'); } }) ~~~ ~~~ <body> <div id="app"> <p>num:{{num}}</p> <p> <button @click="add">add</button> </p> </div> </body> <script type="text/javascript"> Vue.mixin({ updated: function () { console.log('我是全局被混入的'); } }); var app = new Vue({ el: '#app', data: { num: 1 }, methods: { add: function () { this.num++; }, }, updated: function () { console.log("構造器里的updated方法。") }, }); </script> ~~~ PS：全局混入的執行順序要前于混入和構造器里的方法。