KeepAlive ​

<KeepAlive> là một thành phần tích hợp cho phép chúng ta lưu trữ điều kiện các thể hiện của thành phần khi chuyển đổi giữa nhiều thành phần động.

Sử Dụng Cơ Bản ​

Trong chương Cơ Bản của Component, chúng ta đã 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>:

<component :is="activeComponent" />

Mặc định, một thể hiện thành phần hoạt động sẽ được gỡ bỏ khi chuyển sang thành phần khác. Điều này sẽ làm mất mọi trạng thái đã thay đổi mà nó giữ. Khi thành phần này được hiển thị lại, một thể hiện mới sẽ được tạo với chỉ 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ộ với một đầu vào thông qua v-model. Hãy thử cập nhật trạng thái của một trong số chúng, chuyển sang thành phần khác, và sau đó chuyển 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ẽ bị đặt lại.

Tạo một thể hiện thành phần mới khi chuyển là hành vi thường hữu ích, nhưng trong trường hợp này, chúng ta thực sự muốn lưu giữ hai thể hiện thành phầ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 <KeepAlive>:

<!-- Các thành phần không hoạt động sẽ được lưu trữ! -->
<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:

Bao Gồm / Loại Trừ ​

Mặc định, <KeepAlive> sẽ lưu trữ bất kỳ thể hiệ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 prop include và `

exclude. Cả hai prop đều có thể là một chuỗi được phân cách bằng dấu phẩy, một RegExp` hoặc một mảng chứa bất kỳ kiểu nào:

<!-- chuỗi được phân cách bằng dấu phẩy -->
<KeepAlive include="a,b">
  <component :is="view" />
</KeepAlive>

<!-- regex (sử dụng `v-bind`) -->
<KeepAlive :include="/a|b/">
  <component :is="view" />
</KeepAlive>

<!-- Mảng (sử dụng `v-bind`) -->
<KeepAlive :include="['a', 'b']">
  <component :is="view" />
</KeepAlive>

So sánh đượ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 khai báo một cách rõ ràng một tùy chọn name để có thể được lưu trữ điều kiện bởi KeepAlive.

Số Lượng Thể Hiện Lớn Nhất Được Lưu Trữ ​

Chúng ta có thể giới hạn số lượng tối đa các thể hiện thành phần có thể được lưu trữ thông qua prop max. Khi max được chỉ định, <KeepAlive> hoạt động giống như một bộ nhớ cache LRU: nếu số lượng thể hiện được lưu trữ sắp vượt quá số lượng tối đa đã chỉ định, thì thể hiện đã được truy cập ít gần đây nhất sẽ bị hủy để tạo chỗ cho thể hiện mới.

<KeepAlive :max="10">
  <component :is="activeComponent" />
</KeepAlive>

Chu Kỳ Cuộc Đời Của Thể Hiện Đã Lưu Trữ ​

Khi một thể hiện thành phần bị xóa khỏi DOM nhưng là một phần của cây thành phần được lưu trữ bởi <KeepAlive>, nó sẽ chuyển sang trạng thái deactivated thay vì bị gỡ bỏ. Khi một thể hiện thành phần được chèn vào DOM là một phần của cây được lưu trữ, nó sẽ được activated.

<script setup>
import { onActivated, onDeactivated } from 'vue'

onActivated(() => {
  // được gọi khi khởi tạo
  // và mỗi khi nó được chèn lại từ bộ nhớ cache
})

onDeactivated(() => {
  // được gọi khi bị xóa khỏi DOM vào cache
  // và cũng khi bị gỡ bỏ
})
</script>

export default {
  activated() {
    // được gọi khi khởi tạo
    // và mỗi khi nó được chèn lại từ bộ nhớ cache
  },
  deactivated() {
    // được gọi khi bị xóa khỏi DOM vào cache
    // và cũng khi bị gỡ bỏ
  }
}

Lưu ý rằng:

• onActivatedactivated cũng được gọi khi khởi tạo, và onDeactivateddeactivated được gọi khi bị gỡ bỏ.
• Cả hai hooks đều hoạt động không chỉ cho thành phần gốc được lưu trữ bởi <KeepAlive>, mà còn cho các thành phần con trong cây lưu trữ.