• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

VUE render函数使用和详解

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

前言

在平时编程时,大部分是通过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
   }
  });
 },

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注极客世界的更多内容!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
React实现一个通用骨架屏组件示例发布时间:2022-02-05
下一篇:
JavaScript&nbsp;程序循环结构详解发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap