Vue-mixins选项
Mixins用于：
1.已经写好了构造器，还要增加方法或者临时的活动时使用的方法，用混入能减少源代码的污染。
2.公用方法，用混入的方法可以减少代码量，实现代码重用。（使用全局混入）
执行顺序：全局混入 > 构造器之外的混入 > 原生的混入
原生中：
1 updated:function(){ 2 console.log("这是原生") 3 }
构造器之外的混入：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <body> 10 <div id="vueMixins"> 11 <h2>Vue-mixins选项</h2> 12 <div> 13 <p>{{num}}</p> 14 <p><button @click="add()" >增加</button></p> 15 </div> 16 </div> 17 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 18 <script> 19 var addNews={ //后来的内容用变量接收 20 updated:function(){ 21 console.log("你好啊，地球"); 22 } 23 } 24 var app=new Vue({ 25 el:"#vueMixins", 26 data: { 27 num: 16, 28 },32 methods: { 33 add:function(){ 34 this.num++; 35 }, 36 }, 37 mixins: [ addNews ] // 把上面的变量在这里应用 38 }); 39 </script> 47 </body> 48 </html>
全局混入：
1 <script> 2 3 Vue.mixin({ 4 updated:function(){ 5 console.log("这是全局混入"); 6 } 7 }) 8 var app=new Vue({ 9 el:"#vueMixins", 10 data: { 11 num: 16, 12 }, 13 methods: { 14 add:function(){ 15 this.num++; 16 }, 17 } 18 19 }); 20 </script>