Nguyen Hoang<template>
<div>
<keep-alive include="ComponentA" exclude="ComponentB">
<component-a v-if="showComponentA" />
<component-b v-if="showComponentB" />
</keep-alive>
</div>
</template>
<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';
export default {
components: {
ComponentA,
ComponentB,
},
data() {
return {
showComponentA: true,
showComponentB: false,
};
},
};
Trong ví dụ này:
Chỉ ComponentA sẽ được giữ lại, còn ComponentB sẽ không được giữ lại bởi keep-alive.
Tóm tắt
keep-alive là một component đặc biệt trong Vue.js dùng để giữ lại trạng thái của các component khi chúng không còn hiển thị trong DOM.
Giúp bảo toàn trạng thái và cải thiện hiệu suất bằng cách giữ lại các component đã được tạo ra.
