Chào mừng đến với Cafedev, nơi chúng tôi chia sẻ những kiến thức và kinh nghiệm mới nhất về lập trình và công nghệ! Hôm nay, chúng ta sẽ khám phá về Vuejs với tính năng KeepAlive – một công cụ mạnh mẽ trong việc tối ưu hóa hiệu suất ứng dụng web. Vuejs là một trong những framework phổ biến nhất hiện nay, và khi kết hợp với KeepAlive, chúng ta có thể tăng cường trải nghiệm người dùng và tối ưu hóa hiệu suất của ứng dụng một cách đáng kể. Hãy cùng khám phá cách sử dụng Vuejs with KeepAlive để tạo ra những ứng dụng web mạnh mẽ và linh hoạt!
KeepAlive là một thành phần tích hợp sẵn cho phép chúng ta cache điều kiện các phiên bản thành phần khi chuyển đổi động giữa nhiều thành phần khác nhau.
Nội dung chính
1. Cách sử dụng cơ bản
Trong chương các Thành phần cơ bản, chúng tôi đã giới thiệu cú pháp cho Các Thành phần Động, sử dụng phần tử đặc biệt :
<component :is="activeComponent" />Theo mặc định, một phiên bản thành phần hoạt động sẽ bị gỡ bỏ khi chuyển sang thành phần khác. Điều này sẽ làm mất bất kỳ trạng thái đã thay đổi mà nó giữ. Khi thành phần này được hiển thị lại, một phiên bản mới sẽ được tạo ra chỉ với trạng thái ban đầu.
Trong ví dụ dưới đây, chúng ta có hai thành phần có trạng thái – A chứa một bộ đếm, trong khi B chứa một thông báo được đồng bộ hóa với một đầu vào thông qua v-model. Hãy cố gắng cập nhật trạng thái của một trong số chúng, chuyển đổi đi, và sau đó chuyển đổi lại:
Bạn sẽ nhận thấy rằng khi chuyển lại, trạng thái đã thay đổi trước đó sẽ đã được đặt lại.
Tạo phiên bản thành phần mới khi chuyển đổi thường là hành vi hữu ích, nhưng trong trường hợp này, chúng ta thực sự muốn hai phiên bản thành phần được bảo tồn ngay cả khi chúng không hoạt động. Để giải quyết vấn đề này, chúng ta có thể bọc thành phần động của mình bằng thành phần tích hợp sẵn <KeepAlive>:
<!-- Inactive components will be cached! -->
<KeepAlive>
<component :is="activeComponent" />
</KeepAlive>Bây giờ, trạng thái sẽ được duy trì qua các chuyển đổi thành phần:
Hãy thử nó trong Công cụ Playground
Lời khuyên: Khi sử dụng trong trong các mẫu DOM, nó nên được tham chiếu là “<keep-alive>” .
2. Bao Gồm / Loại Trừ
Theo mặc định, sẽ cache bất kỳ phiên bản thành phần nào bên trong. Chúng ta có thể tùy chỉnh hành vi này thông qua các thuộc tính include và exclude. Cả hai thuộc tính này có thể là một chuỗi được phân tách bằng dấu phẩy, một RegExp, hoặc một mảng chứa các loại:
<!-- comma-delimited string -->
<KeepAlive include="a,b">
<component :is="view" />
</KeepAlive>
<!-- regex (use `v-bind`) -->
<KeepAlive :include="/a|b/">
<component :is="view" />
</KeepAlive>
<!-- Array (use `v-bind`) -->
<KeepAlive :include="['a', 'b']">
<component :is="view" />
</KeepAlive>Sự phù hợp được kiểm tra dựa trên tùy chọn name của thành phần, vì vậy các thành phần cần được cache điều kiện bởi KeepAlive phải rõ ràng khai báo một tùy chọn name.
3. Số Lượng Tối Đa Có Thể Cache
Chúng ta có thể giới hạn số lượng tối đa các phiên bản thành phần có thể được cache thông qua thuộc tính max. Khi max được chỉ định, hoạt động giống như một bộ nhớ cache LRU: nếu số lượng các phiên bản được cache sắp vượt quá số lượng tối đa được chỉ định, phiên bản cache truy cập ít nhất gần đây nhất sẽ được hủy bỏ để tạo chỗ cho phiên bản mới.
<KeepAlive :max="10">
<component :is="activeComponent" />
</KeepAlive>4. Chu kỳ sống của Phiên Bản Được Cache
Khi một phiên bản thành phần được loại bỏ khỏi DOM nhưng là một phần của cây thành phần được cache bởi , nó chuyển sang trạng thái deactivated thay vì bị gỡ bỏ. Khi một phiên bản thành phần được chèn vào DOM như một phần của một cây cache, nó được activated.
Một thành phần được giữ sống có thể đăng ký các hooks chu kỳ sống cho hai trạng thái này bằng cách sử dụng onActivated() và onDeactivated():
<script setup>
import { onActivated, onDeactivated } from 'vue'
onActivated(() => {
// called on initial mount
// and every time it is re-inserted from the cache
})
onDeactivated(() => {
// called when removed from the DOM into the cache
// and also when unmounted
})
</script>Một thành phần được giữ sống có thể đăng ký các hooks chu kỳ sống cho hai trạng thái này bằng cách sử dụng activated và deactivated
Lưu ý rằng:
– onActivated cũng được gọi khi được mount, và onDeactivated được gọi khi được unmount.
– Cả hai hooks này hoạt động không chỉ cho thành phần gốc được cache bởi , mà còn cho các thành phần con trong cây cache.
Cảm ơn bạn đã đọc bài viết về Vuejs with KeepAlive trên Cafedev. Hy vọng rằng thông tin mà chúng tôi chia sẻ đã giúp bạn hiểu rõ hơn về tính năng này và cách áp dụng vào dự án của mình. Nếu bạn muốn tìm hiểu thêm về các công nghệ và kỹ thuật mới, hãy đảm bảo theo dõi những bài viết tiếp theo trên trang web của chúng tôi. Đừng quên đăng ký nhận thông báo để không bỏ lỡ bất kỳ bài viết mới nào từ Cafedev. Chúc bạn thành công trong việc phát triển ứng dụng của mình với Vuejs và KeepAlive!
Các nguồn kiến thức MIỄN PHÍ VÔ GIÁ từ cafedev tại đây
Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của CafeDev để nhận được nhiều hơn nữa:
Chào thân ái và quyết thắng!
