Small is Powerful Vue mixins

small is beautiful

1
2
3
4
5
6
7
8
9
10
11
new Vue({
el: '#app',
methods: {
hello: function(){
console.log('hello')
}
},
created: function(){
this.hello()
}
})

big is ugly

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
new Vue({
el: '#app',
methods: {
hello: function(){
console.log('hello')
},
hello1: function(){
console.log('hello1')
},
hello2: function(){
console.log('hello2')
},
hello3: function(){
console.log('hello3')
},
// a lot of function be added, this is ugly
helloN: function(){
console.log('helloN')
},
},
created: function(){
this.hello()
}
})

mixins is powerful

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
var mix  = {
created: function () {
console.log('i am mixins')
},
methods: {
helloX: function(){
console.log('helloX')
}
}
}

new Vue({
el: '#app',
mixins: [mix],
methods: {
hello: function(){
console.log('hello')
},
hello1: function(){
console.log('hello1')
},
hello2: function(){
console.log('hello2')
},
hello3: function(){
console.log('hello3')
}
},
created: function(){
this.hello()
}
})

reading more