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>
官网也有介绍:
需要注意一点是:混入的生命周期构子会比原生的先执行.
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>
实现效果:
