Sự kiện điều chỉnh và giảm nguồn với Vue.js và lodash
Điều chỉnh sự kiện và gỡ lỗi là những cách tốt để cải thiện hiệu suất hoặc giảm chi phí mạng. Trong khi Vue.js 1 từng có hỗ trợ root cho các sự kiện điều chỉnh và gỡ lỗi, nó đã bị loại bỏ trong Vue 2 vì lợi ích của việc giữ cho lõi mỏng. Do đó, cách tiêu chuẩn để điều chỉnh và gỡ lỗi các sự kiện trong Vue 2 hiện là thông qua lodash .
Nếu bạn hơi bối rối về sự khác biệt giữa điều chỉnh và gỡ lỗi, css-trick có một bài viết tuyệt vời về chủ đề này .
Cài đặt
lodash có thể được cài đặt thông qua sợi hoặc npm .
# Yarn
$ yarn add lodash
# NPM
$ npm install lodash --save
Lưu ý: Nếu bạn không muốn nhập tất cả lodash , chỉ những phần bạn cần, một chút tùy chỉnh xây dựng webpack sẽ thực hiện thủ thuật. Bạn cũng có thể cài đặt và nhập các phần của lodash một cách riêng biệt, trong các gói như lodash.throttle và lodash.debounce .
Phương pháp điều chỉnh
Điều chỉnh các phương pháp xử lý sự kiện của bạn khá dễ dàng. Chỉ cần bọc hàm bạn muốn gọi trong hàm _.throttle của lodash . Điều chỉnh điều tiết được dùng đảm bảo các sự kiện của bạn được giữ nguyên, nhưng bị tách biệt theo thời gian.
<template>
<button @click="throttledMethod()">Click me as fast as you can!</button>
</template>
<script>
import _ from 'lodash'
export default {
methods: {
throttledMethod: _.throttle(() => {
console.log('I get fired every two seconds!')
}, 2000)
}
}
</script>
Phương thức gỡ nợ
Mặc dù điều tiết hữu ích trong một số trường hợp, nhưng bạn thường tìm cách gỡ lỗi. Debouncing về cơ bản sẽ group các sự kiện của bạn lại với nhau và giúp chúng không bị kích hoạt quá thường xuyên. Để sử dụng nó trong một thành phần Vue, chỉ cần bọc hàm bạn muốn gọi trong hàm _.debounce của lodash .
Tuyên bố từ chối trách nhiệm: Không sử dụng tính năng khử mùi trên quả bóng cao su trừ khi bạn muốn chúng ngừng nảy. Chất tẩy có ít hoặc không ảnh hưởng đến quả bóng bowling.
<template>
<button @click="throttledMethod()">Click me as fast as you can!</button>
</template>
<script>
import _ from 'lodash'
export default {
methods: {
throttledMethod: _.debounce(() => {
console.log('I only get fired once every two seconds, max!')
}, 2000)
}
}
</script>
Tài liệu tham khảo
Các tin liên quan
