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

简单的说,在vue中我们使用模板HTML语法组建页面的,使用render函数我们可以用js语言来构建DOM

因为vue是虚拟DOM,所以在拿到template模板时也要转译成VNode的函数,而用render函数构建DOM,vue就免去了转译的过程。

当使用render函数描述虚拟DOM时,vue提供一个函数,这个函数是就构建虚拟DOM所需要的工具。官网上给他起了个名字叫createElement。还有约定的简写叫h

虽然在render里使用createElement函数创建DOM节点不是很直观,但是在部分独立组件的设计中还是可以满足一些特殊需求的。一个简单的render示例如下:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <my-component :list="list"></my-component>
  </div>
  <script src="vue.js"></script>
  <script>
    Vue.component('my-component', {
      props: {
        list: {
          type: Array,
          default: () => []
        }
      },
      render(createElement) {
        if (this.list.length) {
          return createElement('ul', this.list.map(item => createElement('li', item)))
        } else {
          return createElement('p', 'Empty list')
        }
      }
    })
    new Vue({
      el: '#app',
      data: {
        list: ['html', 'css', 'javascript']
      }
    })
  </script>
</body>
</html>

另外,由于v-if,v-else,v-show等指令都无法在render里使用,需要自己手动实现,拿常用的v-model举个栗子:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

Vue.component('my-component', {
  data() {
    return {
      message: ''
    }
  },
  render(createElement) {
    return createElement(
      'div',
      [
        createElement(
          'input',
          {
            on: {
              input: e => this.message = e.target.value
            }
          }
        ),
        createElement('p', this.message)
      ]
    )
  }
})
时间: 2020-07-30

Vue2.x中的Render函数详解

Render函数是Vue2.x版本新增的一个函数:使用虚拟dom来渲染节点提升性能,因为它是基于JavaScript计算.通过使用createElement(h)来创建dom节点.createElement是render的核心方法.其Vue编译的时候会把template里面的节点解析成虚拟dom: 什么是虚拟dom? 虚拟dom不同于真正的dom,它是一个JavaScript对象.当状态发生变化的时候虚拟dom会进行一个diff判断/运算:然后判断哪些dom是需要被替换的而不是全部重绘,所以性能

vue中render函数的使用详解

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

详解vue渲染函数render的使用

1.什么是render函数? vue通过 template 来创建你的 HTML.但是,在特殊情况下,这种写死的模式无法满足需求,必须需要js的编程能力.此时,需要用render来创建HTML. 比如如下我想要实现如下html: <div id="container"> <h1> <a href="#" rel="external nofollow" rel="external nofollow"

Vue中render函数的使用方法

render函数 vue通过 template 来创建你的 HTML.但是,在特殊情况下,这种写死的模式无法满足需求,必须需要js的编程能力.此时,需要用render来创建HTML. 什么情况下适合使用render函数 在一次封装一套通用按钮组件的工作中,按钮有四个样式(default success error ).首先,你可能会想到如下实现 <div v-if="type === 'success'">success</div> <div v-else

浅谈vue的iview列表table render函数设置DOM属性值的方法

如下所示: { title: '负责人社保照片', key: 'leaderIdNumber', render: (h, params) => { return h('img',{domProps:{ src:params.row.leaderIdNumber }}) } }, 找了好多,终于找到了原因,如果想要让列表返回的是一个img标签,并且设置img的src,这里不能用props,而是要用domProps就ok了. 以上这篇浅谈vue的iview列表table render函数设置DOM属

浅谈Vue render函数在ElementUi中的应用

vue的render函数在日常开发中被广泛应用,今天以ElementUI中的table表头重构为引,实际应用一下借助render函数实现表头搜索,不足之处请多多指教! 首先引入官方demo <el-table :data="tableData" style="width: 100%" :border="true"> <el-table-column prop="date" label="日期&quo

vue iview组件表格 render函数的使用方法详解

如果要在标签中加入属性,例如img 中src属性   a标签中href属性  此时需要用到 attrs 来加入而不是props { title: '操作', key: 'action', align: 'center', render: function (h, params) { return h('div', [ h('Button', { props: { type: 'primary', size: 'small' }, style: { marginRight: '8px' }, on

如何理解Vue的render函数的具体用法

本文介绍了如何理解Vue的render函数的具体用法,分享给大家,具体如下: 第一个参数(必须) - {String | Object | Function} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>render</title> <script src="https://cdn.b

了解VUE的render函数的使用

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

深入理解Vue 的钩子函数

前言 说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子( created , mounted ),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比较高频的考点,那么该如何回答这类问题,让人有眼前一亮的感觉呢... Vue-Router导航守卫 有的时候,我们需要通过路由来进行一些操作,比如最常见的登录权限验证,当用户满足条件时,才让其进入导航,否则就取消跳转,并跳到登录页面让其登录. 为此我们有很多种方法可以植入路由的导航过程: 全局

vue 中的 render 函数作用详解

render 函数作用 vue渲染函数文档第一遍看的晕晕乎乎的,再看看写写终于清晰了.建议配合文档阅读,本文也是根据文档加上自己的理解. 注:本文代码都是在单文件组件中编写.代码地址 render 函数作用 render 函数 跟 template 一样都是创建 html 模板的,但是有些场景中用 template 实现起来代码冗长繁琐而且有大量重复,这时候就可以用 render 函数. 官网例子:子组件想要根据父组件传递的 level 值(1-6)来决定渲染标签 h 几.具体代码可以看文档.

深入理解vue Render函数

最近在学习vue,正好今日留个笔记,我自己还在摸索学习中,现整理出来以作记录. 会使用基本的Render函数后,就会想,这怎么用 v-for/v-if/v-model;我写个vue Render函数进阶 首先是v-if 的转化使用全局组件的v 值决定组件渲染的状态,对实例中传递的props的"nnum"值得控制可以自如的切换两种状态显示.这样就是和v-if 一样使用组件了 <div id="app"> <mycom :v="nnum&qu

深入理解Vue父子组件生命周期执行顺序及钩子函数

先附一张官网上的vue实例的生命周期图,每个Vue实例在被创建的时候都需要经过一系列的初始化过程,例如需要设置数据监听,编译模板,将实例挂载到DOM并在数据变化时更新DOM等.同时在这个过程中也会运行一些叫做生命周期钩子的函数(回调函数),这给了用户在不同阶段添加自己代码的机会. 1.vue的生命周期图 在vue实例的整个生命周期的各个阶段,会提供不同的钩子函数以供我们进行不同的操作.先列出vue官网上对各个钩子函数的详细解析. 生命周期钩子 生命周期钩子 详细 beforeCreate 在实例