首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >第 005 期 Vue 运行时性能优化之减少渲染组件的次数

第 005 期 Vue 运行时性能优化之减少渲染组件的次数

原创
作者头像
前端GoGoGo
修改2021-04-03 10:06:18
1.2K0
修改2021-04-03 10:06:18
举报

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

优化写法

1. 缓存动态组件

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

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

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

<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>

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

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

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

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

旧的插槽写法:

<!-- 默认作用域插槽 (default scoped slot) -->
<my-component>
  <template slot-scope="{ msg }">
    {{ msg }}
  </template>
</my-component>

<!-- 具名插槽 (named slots) -->
<my-component2>
  <template slot="header">
    <p>Header</p>
  </template>
  
  <template slot="item" slot-scope="data">
    <h2>{{ data.title }}</h2>
    <p>{{ data.text }}</p>
  </template>
</my-component2>

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

<!-- 默认作用域插槽 (default scoped slot) -->
<my-component v-slot="{ msg }">
  {{ msg }}
</my-component>

<!-- 具名插槽 (named slots) -->
<my-component2>
  <template v-slot:header>
    <p>Header</p>
  </template>
  
  <template v-slot:item="{ data }">
    <h2>{{ data.title }}</h2>
    <p>{{ data.text }}</p>
  </template>
</my-component2>

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

参考文档

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 优化写法
    • 1. 缓存动态组件
      • 2. 合理使用 v-if,v-show
        • 3. 插槽(Slot) 改成新的写法
        • 参考文档
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档