Mixins 混入选项操作(22)

一、mixins适用场景

1、已经写好构造器，要加功能或者临时活动，但是不想污染构造器，就可以用混入的功能，比如，促销满100减10块。
2、很多地方都用到公共方法，用混入的方法可以减少代码量，实现代码重用。

二、Mixins的基本用法

我们现在有个数字点击递增的程序，已经完成，这时我们希望每次数据变化时都能够在控制台打印出提示：“数据发生变化”

<div id="app">
    <h1>{{number}}</h1>
    <button @click="add">添加</button>
</div>
<script>
    var addConsole={
        updated:function(){
            console.log("打印数据变化"+this.number)
        }
    };
  var app=new Vue({
        el:"#app",
        data:{
            number:1
        },
        methods:{
            add:function(){
                this.number++
            }
        },
//        updated:function(){
//            console.log("原生的updated")
//        },
        mixins:[addConsole]
    })
</script>

image.png

混入的先执行，原生的后执行

三、执行顺序

全局混入的先执行，然后是构造器里的混入执行，最后才是原生的执行，都是混入先执行。

四、全局API混入方式

 Vue.mixin({
                updated:function(){
                    console.log("全局的混入")
                }
            });

不知道混入方法和构造器方法重名会怎样，我测的是都执行，但是别人是混入方法不起作用。这个问题先留着