vue中Render函数使用介绍

最新推荐文章于 2024-10-24 21:41:03 发布

原创

最新推荐文章于 2024-10-24 21:41:03 发布 · 1.3k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

本文介绍了Vue中Render函数的使用，相较于template，Render函数在处理复杂场景时能减少代码冗余，提高效率。通过createElement函数，可以动态生成标签并添加属性。Vue的模板实际上是被编译成AST语法树，进而转换为render函数生成虚拟DOM节点。尽管render函数使用较复杂，但结合jsx可以简化这一过程。

一、前言

我刚在官网上研究了半天有关render的文档，我总结一下我个人的理解。 render 函数跟 template 一样都是创建 html 模板的，但是有些场景中用 template 实现起来代码冗长繁琐而且有大量重复，这时候就可以用 render 函数，render函数更接近编译器。

配合官方文档，总结一下我的心得

二、render

拿官网的例子为例，通过父传子level，动态生成标题

<template>  
<div>
  <h1 v-if="level === 1">
    <slot></slot>
  </h1>
  <h2 v-else-if="level === 2">
    <slot></slot>
  </h2>
  <h3 v-else-if="level === 3">
    <slot></slot>
  </h3>
  <h4 v-else-if="level === 4">
    <slot></slot>
  </h4>
  <h5 v-else-if="level === 5">
    <slot></slot>
  </h5>
  <h6 v-else-if="level === 6">
    <slot></slot>
  </h6>
</div>
</template>
 
<script>
export defalut {