学习笔记(25):Vue2.x从入门到实战-Mixins 混入选项操作

立即学习:https://edu.csdn.net/course/play/6823/135334?utm_source=blogtoedu

mixins混入选项

Mixins一般有两种用途：

1. 在你已经写好了构造器后，需要增加方法或者临时的活动时使用的方法，这时用混入会减少源代码的污染。
2. 很多地方都会用到的公用方法，用混入的方法可以减少代码量，实现代码重用。

基本用法

{{number}}
    <p><button @click="add">add</button></p>

var addCon={
        updated:function () {
            console.log("数据更新完成，更新为"+this.number);
        }
    };
var app=new Vue({
        el:'#app',
        data:{
            number:1
        },
        methods:{
            add:function () {
                this.number++;
            }
        },
        mixins:[addCon]
    })

我们现在有个数字点击递增的程序，每次点击增加数字，在控制台打印出提示：“数据发生变化”.

mixins调用顺序

1、在构造器中用原生的updated方法

updated:function(){
          console.log("原生的update方法");
        }

2、在全局API混入方式

Vue.mixin({
        updated:function () {
            console.log("全局的update方法");
        }
    })

运行完代码可以在控制台看到全局API是首先执行，然后是构造器中的mixins选项，最后是构造器中原生updated方法。

新手一枚，若有不足，请指教！