本文版权归 “公众号 | 前端一万小时” 所有，欢迎转载！
转载请注明出处，未经同意，不可修改文章内容。
🔥🔥🔥本系列文章已在“公众号 | 前端一万小时”更新完毕，有需要的小伙伴可按需前往查看。
🔥🔥🔥“前端一万小时”两大明星专栏——“从零基础到轻松就业”、“前端面试刷题”，已于本月大改版，合二为一，干货满满，欢迎点击公众号菜单栏各模块了解。
涉及面试题：
什么是动态组件？
[编号：vue_21]
1 实现两组件间互相展示、隐藏的效果
💡先用之前学习的知识实现这个需求：
<body>
<div id="root">
<child-one v-if="type === 'child-one'"></child-one>
<child-two v-if="type === 'child-two'"></child-two>
<button @click="handleBtnClick">change</button>
</div>
<script>
Vue.component("child-one", {
template: "<div>hello world</div>"
})
Vue.component("child-two", {
template: "<div>hi Oli</div>"
})
var vm = new Vue({
el: "#root",
data: {
type: "child-one"
},
methods: {
handleBtnClick: function() {
this.type = (this.type === "child-one" ? "child-two" : "child-one");
}
}
})
</script>
</body>
**2 使用“动态组件”**简化以上代码
动态组件：<component></component>
通过父组件中的动态组件 <component :is="xxx"></component> 进行传值，先在 Vue 根实例 data 中设定 type 的初始值，然后根据 is 中 type 数据的变化，自动地加载不同的组件。
<body>
<div id="root">
<component :is="type"></component> <!-- 🚀动态组件 -->
<!--
<child-one v-if="type === 'child-one'"></child-one>
<child-two v-if="type === 'child-two'"></child-two>
-->
<button @click="handleBtnClick">change</button>
</div>
<script>
Vue.component("child-one", {
template: "<div>hello world</div>"
})
Vue.component("child-two", {
template: "<div>hi Oli</div>"
})
var vm = new Vue({
el: "#root",
data: {
type: "child-one"
},
methods: {
handleBtnClick: function() {
this.type = (this.type === "child-one" ? "child-two" : "child-one");
}
}
})
</script>
</body>
❌但以上代码有个缺点：耗费性能！！！
💡分析：
进行点击交互后则会显示 Vue 根实例中 methods 设定的交互逻辑，每一次页面切换效果时，会自动将前一个组件销毁，再创建后一个新组件，页面则相应显示该子组件的内容。这样的“销毁——重建”的过程很消耗性能！
3 对上边代码“性能上的消耗”进行优化—— v-once
✔️性能优化：在 Vue 中通过 v-once ，可有效提高静态内容的展示效率。
在子组件中分别加入 v-once ，当每次切换组件效果时，不再需要每次都经过“创建——销毁”的过程，而是在内存中直接取用上一次使用过的组件的内容。
<body>
<div id="root">
<component :is="type"></component> <!-- 🚀动态组件 -->
<!--
<child-one v-if="type === 'child-one'"></child-one>
<child-two v-if="type === 'child-two'"></child-two>
-->
<button @click="handleBtnClick">change</button>
</div>
<script>
Vue.component("child-one", {
template: "<div v-once>hello world</div>" /*
🚀在 Vue 中通过 v-once，
可有效提高静态内容的展示效率。
*/
})
Vue.component("child-two", {
template: "<div v-once>hi Oli</div>"
})
/*
Vue.component("child-one", {
template: "<div>hello world</div>"
})
Vue.component("child-two", {
template: "<div>hi Oli</div>"
})
*/
var vm = new Vue({
el: "#root",
data: {
type: "child-one"
},
methods: {
handleBtnClick: function() {
this.type = (this.type === "child-one" ? "child-two" : "child-one");
}
}
})
</script>
</body>
祝好，qdywxs ♥ you！
