Vue中不用 v-if 如何动态渲染组件

朝着全栈加速前进
139 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第7天，点击查看活动详情

在项目开发的过程中，v-if 是经常使用的指令。但当我们所需渲染的数据量较大，并且需要动态渲染的时候， v-if 并不是最佳解决方案。

比如下面的这段代码：

<Comp1 v-if="isShow"  />

<Comp2 v-if="isShow"  />

<Comp3 v-if="isShow"  />
…

v-if 的值在false和true互相切换的时候，会触发组件的beforeCreate、create、beforeMount、mounted、beforeDestory、destoryed生命周期钩子，也就是不断地销毁和重建，性能消耗较高（false->true的时候会进行创建和挂载，true->false的时候会进行销毁）

同样的，v-show 虽然不会像 v-if 一样不断地销毁和重建，但是初始渲染的消耗较大

实现方式

  1. <component>组件
  2. 渲染函数 render + jsx / tsx

1. component 组件

<component>组件是 Vue 内置的特殊组件，主要的功能是渲染动态组件

使用方法：

<component :is="myComp" />

data: {
     myComp: 'Component1'
},
components: {
     Component1: {
        template: `<h1>Component1</h1>`
     },
     Component2: {
        template: `<h1>Component2</h1>`
    }
}

2. 渲染函数render + JSX（或TSX）

  • JSX是一种Javascript的语法扩展，JSX = Javascript + XML

  • 关于使用 jsx（或者 tsx ）官方也提供了相关的使用方法，当组件是动态调用的形式的时候，使用render（）渲染函数进行绘制

  • render（）可以返回一个或者多个节点

  • 由于每一个需要渲染的功能都封装成了组件，所以需要使用h（）函数

  • h() 是 hyperscript 的简称——能生成 HTML 的 JavaScript，使用h（）不需要注册组件，引入后直接使用即可

代码如下：

import Comp1 from './Comp1.vue'
import Comp2 from './Comp2.jsx'

function render() {
  return h('div', [h(Comp1), h(Comp2)])
}

上面这段代码，相当于：

<div>
      <Comp1 />
      <Comp2 />
</div>

第一个参数是外层包裹的标签，第二个参数表示所需渲染的组件（组件必须唯一）。

关于组件的渲染细节可以参考cn.vuejs.org/guide/extra…

注：如果是交互和操作比较频繁、涉及组件多层嵌套的场景，这种写法可能会导致多次触发渲染，影响性能，有解决方案的同学欢迎分享✍🏻

总结

从代码的角度来说 component 的形式更简单、易上手，jsx 语法也有它的优点：既有 js 的灵活，又有 html 的直观

avatar
文章
阅读
粉丝