VueJS: Tính năng Mixins
This post hasn't been updated for 3 years
Chào mọi người, hôm nay mình sẽ viết về Mixins và 1 số vấn đề trong sử dụng Mixins hay ho mà mình gặp trong dự án thực.
I. Mixin trong VueJS:
Trích dẫn từ trang chủ của VueJS
:
Mixin là một cách linh hoạt để phân phối những tính năng tái sử dụng được cho component.
Cú pháp sử dụng Mixin cũng rất đơn giản, tạo 1 file js bất kỳ và sử dụng nó ở các file vue:
- src/mixins/isEven.js
export default {
methods: {
isEven(value) {
return value % 2 === 0;
}
}
};
Sau đó, chúng ta sẽ import vào file .vue
cần dùng:
- src/views/Home.vue:
...
import isEven from "@/helpers/isEven";
...
export default {
...
mixins: [isEven], // sử dụng isEven như một mixin
...
};
Ngoài ra, chúng ta cũng có thể viết một Global Mixin
:
- src/mixins/isEven.js
import Vue from "vue";
Vue.mixin({
methods: {
isEven(value) {
return value % 2 === 0;
}
}
});
Và gọi ở trong file main.js
:
- src/main.js:
...
import "@/helpers/isEven";
...
Với cả 2 cách trên, chúng ta đã có thể sử dụng isEven
để kiểm tra chẵn lẻ:
- Ở tag
template
:
<template>
...
{{ isEvent(5) }} <!-- false -->
...
</template>
- Ở tag
script
:
export default {
...
created() {
console.log(this.isEven(5)); /* false */
},
...
}
II. Một số lưu ý khác khi sử dụng mixin:
1. Option Merging:
- Khi các tên biến
data
, cáccomputed
, cácmethods
củamixin
vàcomponent
trùng nhau,Vue
sẽ sử dụng các giá trị này củacomponent
ưu tiên. - Khi các
Lifecycle Hooks
trùng nhau, thứ tự chạy sẽ làMixin -> Component
cho từng hook.
Demo code:
- src/mixins/isEven.js
export default {
data: () => ({
name: "Mixin"
}),
computed: {
show() {
return "Mixin";
}
},
methods: {
isEven(value) {
return value % 2 === 0;
},
warning() {
return "Mixin";
}
},
created() {
console.log("in mixin create"); // eslint-disable-line no-console
},
beforeDestroy() {
console.log("in mixin destroy"); // eslint-disable-line no-console
}
};
- File
.vue
:
<template>
<div class="home">
<h2>data: {{ name }}</h2> <!-- Component -->
<h2>computed: {{ show }}</h2> <!-- Component -->
<h2>methods: {{ warning() }}</h2> <!-- Component -->
</div>
</template>
import isEven from "@/helpers/isEven";
export default {
name: "Home",
mixins: [isEven],
data: () => ({
name: "Component"
}),
computed: {
show() {
return "Component";
}
},
methods: {
warning() {
return "Component";
}
},
created() {
console.log("in component create"); // eslint-disable-line no-console
},
beforeDestroy() {
console.log("in component destroy"); // eslint-disable-line no-console
}
};
- In Terminal khi vào url '/':
in mixin create
in component create
- Khi thay đổi route:
in mixin destroy
in component destroy
2. Lưu ý từ người viết:
Có một vài quan điểm về Mixin
mà mình muốn chia sẽ thêm.
- Đầu tiên là việc không sử dụng
Global Mixin
, chỉ import mixin khi bạn sử dụng, tránh việc ảnh hưởng bởiMixin
làm thay đổi các giá trị của ứng dụng web, ngoài ra còn có thể làm giảm hiệu năng web của bạn. - Trong hầu hết trường hợp, khi viết các
helpers
, chúng ta không nên viết theo dạngMixin
, thay vào đó, hay viết 1pure function
(như functionisEven
ở đầu bài là 1pure function
), import vào ở dạng method. Chỉ khi cần sử dụng biếnthis
củaVue
, chúng ta mới ưu tiên hơn chomixin
. Việc sử dụngpure function
cũng giúp code gọn gàng hơn, 1 function cho 1 chức năng, và tương tự đối với mixin,1 mixin 1 chức năng
:
import isEvent from '...';
export default {
methods: {
isEven,
...
},
}
Trên đây là một vài chia sẻ nho nhỏ của mình về Mixin
khi thực chiến với Vue
, cảm ơn các bạn đã đọc qua. Hãy mạnh dạn comment ở bên dưới nếu có thắc mắc hoặc vấn đề cẩn thảo luận nhé .
All Rights Reserved