关于javascript:VUE-render函数使用和详解

VUE render 函数应用和详解

前言

在平时编程时，大部分是通过 template 来创立 html。然而在一些非凡的状况下，应用 template 形式时，就无奈很好的满足需要，在这个时候就须要 通过 JavaScript 的编程能力来进行操作。此时，就到了 render 函数展现拳脚去时候了。

render 的作用

官网示例入口

在官网的这里示例中，应用组件，将雷同的内容通过 solt 放进 h1-h6 的标签中，在应用传统形式时，代码不仅简短，而且在每一个级别的题目中反复书写了 <slot></slot>，在要插入锚点元素时还要再次反复。而应用 render 函数后，代码就精简了很多。

Vue.component('anchored-heading', {render: function (createElement) {
    return createElement(
      'h' + this.level,   // 标签名称
      this.$slots.default // 子节点数组
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

render 函数的作用是，当场景中用 template 实现起来代码简短繁琐而且有大量反复，这个时候应用就能够极大的简化代码。

render 函数解说

在应用 render 函数中，会应用到一个参数 createElement，而这个 createElement 参数，实质上，也是一个函数，是 vue 中构建虚构 dom 所应用的工具。上面就围绕着这个 createElement 来看一下。

在 createelement 办法，有三个参数：

return createEement(, {}, [])

1. 第一个参数（必要参数）：次要是用于提供 dom 中的 html 内容，类型能够是字符串、对象或函数。
2. 第二个参数（对象类型，可选）：用于设置这个 dom 中的一些款式、属性、传的组件的参数、绑定事件之类的。
3. 第三个参数（类型是数组，数组元素类型是 VNode, 可选）：次要用于设置散发的内容，如新增的其余组件。

留神：组件树中的所有 vnode 必须是惟一的

通过传入 createElement 参数，创立虚构节点，而后再将节点返回给 render 返回进来。

总的来说，render 函数的实质就是创立一个虚构节点。

render 和 template 的区别

相同之处：

render 函数 跟 template 一样都是创立 html 模板

不同之处：

• Template 适宜逻辑简略，render 适宜简单逻辑。
• 使用者 template 了解起来绝对容易，但灵活性有余；自定义 render 函数灵活性高，但对使用者要求较高。
• render 的性能较高，template 性能较低。
• 应用 render 函数渲染没有编译过程，相当于使用者间接将代码给程序。所以，应用它对使用者要求高，且易呈现谬误
• Render 函数的优先级要比 template 的级别要高，然而要留神的是 Mustache(双花括号) 语法就不能再次应用

留神：template 和 render 不能一起应用，否则有效

render 举例

如一次封装一套通用按钮组件，按钮有四个款式 (success、error、warning、default)。

template 形式是如下：

 <div class="btn btn-success" v-if="type ==='success'">{{text}}</div>
 <div class="btn btn-danger" v-else-if="type ==='danger'">{{text}}</div>
 <div class="btn btn-warning" v-else-if="type ==='warning'">{{text}}</div>

这样写在按钮少的时候没有问题，然而一旦按钮数量变多，这样写就会显得特地简短，在这个时候，就须要 render 函数。

依据状况生成按钮 DOM

在应用 render 函数前，须要先把 template 标签去掉，只保留逻辑层。

通过传入的 type 动静填入 class，通过 inderText 将内容增加入 DOM 中。

render(h) {
  return h('div', {
   class: {
    btn: true,
    'btn-success': this.type === 'success',
    'btn-danger': this.type === 'danger',
    'btn-warning': this.type === 'warning'
   },
   domProps: {innerText: this.text},
   on: {click: this.handleClick}
  });
 },