vue.js
动态组件
有时候，我们需要在多个不同的组件之间进行切换。虽然我们可以通过v-if来处理，但是会比较麻烦，vue提供了一个更方便的方式来处理这种情况
component 组件
component是 vue内置的一个组件，他提供了一个is属性用来动态渲染不同的组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.current {
background: yellow;
}
</style>
</head>
<body>
<div id="app">
<button @click="goto('InBox')" :class="{'current': currentComponent==='InBox'}">收邮件</button>
<button @click="goto('PostMail')" :class="{'current': currentComponent==='PostMail'}">发邮件</button>
<button @click="goto('RecycleBin')" :class="{'current': currentComponent==='RecycleBin'}">垃圾箱</button>
<hr>
<component :is="currentComponent"></component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const InBox = {
data() {
return {
items: [
'111111',
'22222222222',
'aaaaaaaa',
'3333333'
]
}
},
template: `
<div>
<ul>
<li v-for="item of items">
<input type="checkbox" />
{{item}}
</li>
</ul>
</div>
`,
created() {
console.log('InBox:created');
},
destroyed() {
console.log('InBox:destroyed');
}
}
const PostMail = {
template: `
<div>PostMail</div>
`,
created() {
console.log('PostMail:created');
},
destroyed() {
console.log('PostMail:destroyed');
}
}
const RecycleBin = {
template: `
<div>RecycleBin</div>
`,
created() {
console.log('RecycleBin:created');
},
destroyed() {
console.log('RecycleBin:destroyed');
}
}
let app = new Vue({
el: '#app',
data: {
currentComponent: 'InBox'
},
components: {
InBox,
PostMail,
RecycleBin
},
methods: {
goto(target) {
this.currentComponent = target;
}
}
});
</script>
</body>
</html>
我们会发现，当组件切换的时候，都会触发组件的销毁和重建。首先，性能不好。其次，会丢失组件状态
keep-alive组件
当这些组件之间切换的时候，有时会想保持这些组建的状态，以避免重复渲染导致的性能问题。keep-alive是一个内置容器组件，使用keep-alive以后，内部包含的组件将增加激活和冻结的状态
<keep-alive>
<component :is="currentComponent"></component>
</keep-alive>
activated
keep-alive组件激活时调用
deactivated
keep-alive组件停用时调用
网友评论