<keep-alive>
是 Vue.js 内置的一个抽象组件,用于保留动态组件或者组件的状态,避免多次销毁和重新创建组件,以提高性能。下面是一个简单的例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Keep-Alive Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 使用 keep-alive 包裹动态组件 -->
<keep-alive>
<component :is="currentComponent"></component>
</keep-alive>
<!-- 切换组件的按钮 -->
<button @click="toggleComponent">Toggle Component</button>
</div>
<script>
// 创建两个组件
var ComponentA = {
template: '<div>Component A</div>'
};
var ComponentB = {
template: '<div>Component B</div>'
};
// 创建 Vue 实例
var app = new Vue({
el: '#app',
data: {
currentComponent: 'ComponentA' // 初始化时显示 ComponentA 组件
},
methods: {
toggleComponent: function() {
// 切换组件
this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA';
}
},
components: {
ComponentA,
ComponentB
}
});
</script>
</body>
</html>
在这个例子中,我们与之前的动态组件例子类似,不同之处在于动态组件被 <keep-alive>
组件包裹起来。这样一来,当我们切换组件时,组件的状态将被保留,不会因为组件的销毁而丢失,当再次切换回来时,组件会保持之前的状态,从而提高了性能并提供更好的用户体验。