VUE render函数使用和详解

目录
  • 前言
  • render的作用
    • render函数讲解
  • render和template的区别
    • 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
   }
  });
 },

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

赞 (0)

相关推荐

  • Vue Render函数原理及代码实例解析

    简单的说,在vue中我们使用模板HTML语法组建页面的,使用render函数我们可以用js语言来构建DOM 因为vue是虚拟DOM,所以在拿到template模板时也要转译成VNode的函数,而用render函数构建DOM,vue就免去了转译的过程. 当使用render函数描述虚拟DOM时,vue提供一个函数,这个函数是就构建虚拟DOM所需要的工具.官网上给他起了个名字叫createElement.还有约定的简写叫h 虽然在render里使用createElement函数创建DOM节点不是很直观

  • 何时/使用 Vue3 render 函数的教程详解

    什么是 DOM? 如果我们把这个 HTML 加载到浏览器中,浏览器创建这些节点,用来显示网页.所以这个HTML映射到一系列DOM节点,然后我们可以使用JavaScript进行操作.例如: let item = document.getElementByTagName('h1')[0] item.textContent = "New Heading" VDOM 网页可以有很多DOM节点,这意味着DOM树可以有数千个节点.这就是为什么我们有像Vue这样的框架,帮我们干这些重活儿,并进行大量

  • 在vue中通过render函数给子组件设置ref操作

    正常我们的写法是,这样ref不会生效,h是作用在渲染的时候的,而ref是渲染之后才创建的,因此在h函数中使用ref是无效的. render: (h, params) => { return h(expandRow, { ref:'child', props: { row: params.row } }) } 我们常见h函数的用法是: render: (h) => { return h(ele) } => 是es6的用法,相当于 (h) => {} 相当于 function(){},

  • Vue.js之render函数使用详解

    Vue.js之render函数使用详解

    Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript的完全编程的能力,这就是 render 函数,它比 template 更接近编译器. 在 HTML 层, 我们决定这样定义组件接口:通过传入不同的level 1-6 生成h1-h6标签,和使用slot生成内容 <div id="div1"> <child :level="1">Hello world!</child

  • Vue Render函数创建DOM节点代码实例

    虽然在render里使用createElement函数创建DOM节点不是很直观,但是在部分独立组件的设计中还是可以满足一些特殊需求的.一个简单的render示例如下: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device

  • vue render函数动态加载img的src路径操作

    分享一下我去如何解决vue render 中 如何正确配置img的src 路径? 一.我的项目中有俩层组件, 第一层父组件,第二层是render函数封装的组件,父组件调用render函数组件 二.render函数中需要创建<img>标签,img中的src是父组件传进来的: src正确传进来,图片却不不显示. 三.解决办法: 首先在父组件中将图片import进来, import empty from "./img/empty.png"; 在父组件的data中声明一个变量,将e

  • vue 的 Render 函数

    vue 的 Render 函数

    目录 一.节点.树以及虚拟 DOM 二.虚拟 DOM 2.1 深入数据对象 2.2 约束 三.在Render函数中的模板功能 3.1 v-if 和 v-for 3.2 v-model 3.3 事件 & 按键修饰符 3.4 插槽 3.5 例子 一.节点.树以及虚拟 DOM <div> <h1>My title</h1> Some text content <!-- TODO: Add tagline --> </div> 每个元素都是一个节

  • VUE render函数使用和详解

    目录 前言 render的作用 render函数讲解 render和template的区别 render举例 总结 前言 在平时编程时,大部分是通过template来创建html.但是在一些特殊的情况下,使用template方式时,就无法很好的满足需求,在这个时候就需要 通过JavaScript 的编程能力来进行操作.此时,就到了render函数展示拳脚去时候了. render的作用 官网示例入口 在官网的这里示例中,使用组件,将相同的内容通过solt放进h1-h6的标签中,在使用传统方式时,代

  • Vue h函数的使用详解

    Vue h函数的使用详解

    目录 一.认识 二.使用 1.h() 参数 2.简单的使用 3.实现一个计数器案例 4.函数组件和插槽的使用 三.jsx的使用 1.jsx的认识 2.下载Babel插件支持vue(现在貌似脚手架直接支持) 3.配置babel 4.简单的使用 5.计数器案例 6.组件和插槽的使用 一.认识 文档:https://v3.cn.vuejs.org/guide/render-function.html#dom-%E6%A0%91 ​ h() 到底会返回什么呢?其实不是一个实际的 DOM 元素.它更准确的

  • Vue reactive函数实现流程详解

    目录 1.Reflect 2.Proxy的工作原理 3.代理Object 4.合理的触发响应 5.深响应和浅响应 6.只读和浅只读 7.代理数组 1.Reflect   Proxy有着可以拦截对对象各种操作的能力,比如最基本的get和set操作,而Reflect也有与这些操作同名的方法,像Reflect.set().Reflect.get(),这些方法和它们所对应的对象基本操作完全一致. const data = { value: '1', get fn() { console.log(this

  • vue中render函数的使用详解

    render函数 vue通过 template 来创建你的 HTML.但是,在特殊情况下,这种写死的模式无法满足需求,必须需要js的编程能力.此时,需要用render来创建HTML. render方法的实质就是生成template模板: 通过调用一个方法来生成,而这个方法是通过render方法的参数传递给他的: 通过这三个参数,可以生成一个完整的模板 官网实例 //未使用render函数 Vue.component('anchored-heading', { template: '#anchor

  • vue中各选项及钩子函数执行顺序详解

    在vue中,实例选项和钩子函数和{{}}表达式都是不需要手动调用就可以直接执行的. vue的生命周期如下图: 在页面首次加载执行顺序有如下: beforeCreate //在实例初始化之后.创建之前执行 created //实例创建后执行 beforeMounted //在挂载开始之前调用 filters //挂载前加载过滤器 computed //计算属性 directives-bind //只调用一次,在指令第一次绑定到元素时调用 directives-inserted //被绑定元素插入父

  • vue双向绑定及观察者模式详解

    vue双向绑定及观察者模式详解

    在Vue中,使用了Object.defineProterty()这个函数来实现双向绑定,这也就是为什么Vue不兼容IE8 1 响应式原理 让我们先从相应式原理开始.我们可以通过Object.defineProterty()来自定义Object的getter和setter 从而达到我们的目的. 代码如下 function observe(value, cb) { Object.keys(value).forEach((key) => defineReactive(value, key, value

  • vue总线机制(bus)知识点详解

    vue中非父子组件之间通信除了使用vuex,也可以通过bus总线,两者适用场景不同. bus适合小项目.数据被更少组件使用的项目,对于中大型项目 数据在很多组件之间使用的情况 bus就不太适用了.bus其实就是一个发布订阅模式,利用vue的自定义事件机制,在触发的地方通过$emit向外发布一个事件,在需要监听的页面,通过$on监听事件. vuex适用中大型项目.数据在多组件之间公用的情况. 简单介绍两者的区别之后,就要介绍下我在一个项目中遇到的一个场景了,这个场景使用bus可能更加适合些: //

  • VUE生命周期全面系统详解

    VUE生命周期全面系统详解

    目录 什么是生命周期 生命周期的作用 vue生命周期有哪些 Vue 生命周期总共分为几个阶段 1)beforeCreate创建前 2)created创建后 3)beforeMounte挂载前 4)mounted挂载后 5)beforeUpdate更新前 6)updated更新后 7)beforeDestroy销毁前 8)destroyed销毁后 问题 什么是生命周期 每个组件在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM

  • vue2从template到render模板编译入口详解

    目录 正文 1.template:模板获取 2.createCompiler:核心参数 3.createCompileToFunctionFn:缓存处理 4.compile:参数合并 小结 正文 在vue的渲染过程中,渲染核心逻辑是vm._update(vm._render(), hydrating),通过vm._render的执行获取到vNode,再通过vm._update的执行来将vNode渲染成真实视图. 其中,render函数的来源是: (1)用户手写: (2)通过vue-loader引

随机推荐