Vue选项之mixins混入

mixins一般有两种用途:

1.当你已经写好了构造器之后,需要增加方法或者临时的活动时使用的方法,这是用混入会减少源代码的污染;

下面的需求是构造器已经完成,突然要额外增加控制台打印变化的数据,操作如下:

<body>
    <div id="app">
        {{num}}
        <p><button @click="add">ADD</button></p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
    //2,声明一个对象
      let addConsole={
          updated:function(){//updated是Vue生命周期
            console.log("数据变化了,新值为"+this.num); 
          }
      }
      let app = new Vue({
        el: '#app',
        data:{
            num:1
        },
        methods:{
            add(){
                this.num++;
            }
        },
        updated() {
            console.log("我是原生的生命周期");//发现会比混入慢
            
        },
        //1.增加混入写法
        mixins:[addConsole]//跟一个数组
      })
    </script>
  </body>

官网也有介绍:
Vue选项之mixins混入_第1张图片
需要注意一点是:混入的生命周期构子会比原生的先执行.

2.定义全局的混入,这样在需要这段代码的地方直接引入js,就可以实现这个功能了,全局的引入操作如下:
Vue.mixin({
	updated:function(){
	 console.log("我是全局的混入");
	}
})

注意:全局混入的执行顺序要前于混入和构造器里的方法

最后完整代码:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>lianxi</title>
  </head>
  <body>
    <div id="app">
        {{num}}
        <p><button @click="add">ADD</button></p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      let addConsole={
          updated:function(){//updated是Vue生命周期
            console.log("数据变化了,新值为"+this.num);
            
          }
      }
    //   全局的混入,速度最快
    Vue.mixin({//不用s
        updated:function(){
            console.log("我是全局的混入");
            
        }
    })

      let app = new Vue({
        el: '#app',
        data:{
            num:1
        },
        methods:{
            add(){
                this.num++;
            }
        },
        updated() {
            console.log("我是原生的生命周期");//发现会比混入慢
            
        },
        //混入写法
        mixins:[addConsole]
      })
    </script>
  </body>
</html> 

实现效果:
Vue选项之mixins混入_第2张图片

你可能感兴趣的:(十二.vue,Vue选项之mixins混入)