三十、Vue之动态组件与 v-once 指令

一、动态组件

<component :is="type"></component>

<script>
Vue.component('child-one', {
  template: '<div>child-one</div>'
});
Vue.component('child-two', {
  template: '<div>child-two</div>'
});
。。。。。
</script>

  这段代码的核心就是 “​​:is​​​”，根据组件的 ​​name​​ 的不同，显示不同的组件。

二、问题

  在我们动态切换组件时，其背后就是框架将当前显示的组件销毁，在2创建待显示的组件，这样就会导致每次都在重复创建销毁，浪费性能。

三、解决办法

  在子组件中加上 v-once，例：

<script>
Vue.component('child-one', {
  template: '<div v-once>child-one</div>'
});
Vue.component('child-two', {
  template: '<div v-once>child-two</div>'
});
。。。。。
</script>

  这样，框架会将创建的组件实例缓存在内存中，而不是销毁，极大的提高性能！