减少组件的渲染次数，能提升 Vue App 的运行时性能。通过写法的优化，可以减少不必要的组件渲染次数。

优化写法

1. 缓存动态组件

开发中，我们会碰到用动态组件的情况。如多标签的页面，每个标签的内容是个动态组件:

  1. <component v-bind:is="currentTabComponent"></component>

标签来回切换，同一个组件会被重复渲染。用 keep-alive 包裹动态组件，可以缓存组件的渲染结果，保证同一个组件只被渲染一次。优化写法如下:

  1. <keep-alive>
  2.   <component v-bind:is="currentTabComponent"></component>
  3. </keep-alive>

2. 合理使用 v-if，v-show

v-if 有更高的切换开销。v-show 有更高的初始渲染开销，其值变化时，内容并不会重新渲染。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

3. 插槽(Slot) 改成新的写法

插槽的数据发生改变时，旧的插槽写法，会导致插槽父组件的更新，插槽组件也就更新了。新的插槽写法只会更新插槽组件，少了更新父组件这过程。

旧的插槽写法:

  1. <!-- 默认作用域插槽 (default scoped slot) -->
  2. <my-component>
  3.   <template slot-scope="{ msg }">
  4.     {{ msg }}
  5.   </template>
  6. </my-component>
  8. <!-- 具名插槽 (named slots) -->
  9. <my-component2>
  10.   <template slot="header">
  11.     <p>Header</p>
  12.   </template>
  14.   <template slot="item" slot-scope="data">
  15.     <h2>{{ data.title }}</h2>
  16.     <p>{{ data.text }}</p>
  17.   </template>
  18. </my-component2>

Vue 2.6 加了新的插槽写法: v-slot。如下:

  1. <!-- 默认作用域插槽 (default scoped slot) -->
  2. <my-component v-slot="{ msg }">
  3.   {{ msg }}
  4. </my-component>
  6. <!-- 具名插槽 (named slots) -->
  7. <my-component2>
  8.   <template v-slot:header>
  9.     <p>Header</p>
  10.   </template>
  12.   <template v-slot:item="{ data }">
  13.     <h2>{{ data.title }}</h2>
  14.     <p>{{ data.text }}</p>
  15.   </template>
  16. </my-component2>

了解更多插槽新写法的内容，见 Vue 2.6 发布了。

参考文档