理解Vue中的Render渲染函数

VUE一般使用template来创建HTML，然后在有的时候，我们需要使用javascript来创建html，这时候我们需要使用render函数。
比如如下我想要实现如下html：

<div id="container">
  <h1>
    <a href="#">
      Hello world!
    </a>
  </h1>
</div>

我们会如下使用：

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
    <style>

    </style>
  </head>
  <body>
    <div id="container">
      <tb-heading :level="1">
        <a href="#">Hello world!</a>
      </tb-heading>
    </div>
  </body>
  <script src="./vue.js"></script>

  <script type="text/x-template" id="templateId">
    <h1 v-if="level === 1">
      <slot></slot>
    </h1>
    <h2 v-else-if="level === 2">
      <slot></slot>
    </h2>
  </script>

  <script>
    Vue.component(‘tb-heading‘, {
      template: ‘#templateId‘,
      props: {
        level: {
          type: Number,
          required: true
        }
      }
    });
    new Vue({
      el: ‘#container‘
    });
  </script>
</html>

查看效果

如上代码是根据参数 :level来显示不同级别的标题中插入锚点元素，我们需要重复的使用 <slot></slot>.

下面我们来尝试使用 render函数重写上面的demo；如下代码：

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
    <style>

    </style>
  </head>
  <body>
    <div id="container">
      <tb-heading :level="2">
        <a href="#">Hello world!</a>
      </tb-heading>
    </div>
  </body>
  <script src="./vue.js"></script>

  <script>
    Vue.component(‘tb-heading‘, {
      render: function(createElement) {
        return createElement(
          ‘h‘ + this.level,    // tag name 标签名称
          this.$slots.default  // 组件的子元素
        )
      },
      props: {
        level: {
          type: Number,
          required: true
        }
      }
    });
    new Vue({
      el: ‘#container‘
    });
  </script>
</html>

查看效果

如上 render函数代码看起来非常简单就实现了，组件中的子元素存储在组件实列中 $slots.default 中。

理解createElement
Vue通过建立一个虚拟DOM对真实的DOM发生变化保存追踪，如下代码：
return createElement(‘h1‘, this.title);
createElement返回的是包含的信息会告诉VUE页面上需要渲染什么样的节点及其子节点。我们称这样的节点为虚拟DOM，可以简写为VNode，

createElement 参数

// @return {VNode}
createElement(
  // {String | Object | Function}
  // 一个HTML标签字符串，组件选项对象，或者一个返回值类型为String/Object的函数。该参数是必须的
  ‘div‘,

  // {Object}
  // 一个包含模板相关属性的数据对象，这样我们可以在template中使用这些属性，该参数是可选的。
  {

  },

  // {String | Array}
  // 子节点（VNodes）由 createElement() 构建而成。可选参数
  // 或简单的使用字符串来生成的 "文本节点"。
  [
    ‘xxxx‘,
    createElement(‘h1‘, ‘一则头条‘),
    createElement(MyComponent, {
      props: {
        someProp: ‘xxx‘
      }
    })
  ]
)

理解深入data对象。
在模板语法中，我们可以使用 v-bind:class 和 v-bind:style 来绑定属性，在VNode数据对象中，下面的属性名的字段级别是最高的。
该对象允许我们绑定普通的html特性，就像DOM属性一样。如下：

{
  // 和`v-bind:class`一样的 API
  ‘class‘: {
    foo: true,
    bar: false
  },
  // 和`v-bind:style`一样的 API
  style: {
    color: ‘red‘,
    fontSize: ‘14px‘
  },
  // 正常的 HTML 特性
  attrs: {
    id: ‘foo‘
  },
  // 组件 props
  props: {
    myProp: ‘bar‘
  },
  // DOM 属性
  domProps: {
    innerHTML: ‘baz‘
  },
  // 事件监听器基于 `on`
  // 所以不再支持如 `v-on:keyup.enter` 修饰器
  // 需要手动匹配 keyCode。
  on: {
    click: this.clickHandler
  },
  // 仅对于组件，用于监听原生事件，而不是组件内部使用 `vm.$emit` 触发的事件。
  nativeOn: {
    click: this.nativeClickHandler
  },
  // 自定义指令。注意事项：不能对绑定的旧值设值
  // Vue 会为您持续追踪
  directives: [
    {
      name: ‘my-custom-directive‘,
      value: ‘2‘,
      expression: ‘1 + 1‘,
      arg: ‘foo‘,
      modifiers: {
        bar: true
      }
    }
  ],
  // Scoped slots in the form of
  // { name: props => VNode | Array<VNode> }
  scopedSlots: {
    default: props => createElement(‘span‘, props.text)
  },
  // 如果组件是其他组件的子组件，需为插槽指定名称
  slot: ‘name-of-slot‘,
  // 其他特殊顶层属性
  key: ‘myKey‘,
  ref: ‘myRef‘
}

上面的data数据可能不太好理解，我们来看一个demo，就知道它是如何使用的了，如下代码：

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
    <style>

    </style>
  </head>
  <body>
    <div id="container">
      <tb-heading :level="2">
        Hello world!
      </tb-heading>
    </div>
  </body>
  <script src="./vue.js"></script>

  <script>
    var getChildrenTextContent = function(children) {
      return children.map(function(node) {
        return node.children ? getChildrenTextContent(node.children) : node.text
      }).join(‘‘)
    };
    Vue.component(‘tb-heading‘, {
      render: function(createElement) {
        var headingId = getChildrenTextContent(this.$slots.default)
          .toLowerCase()
          .replace(/\W+/g, ‘-‘)
          .replace(/(^\-|\-$)/g, ‘‘)
        return createElement(
          ‘h‘ + this.level,
          [
            createElement(‘a‘, {
              attrs: {
                name: headingId,
                href: ‘#‘ + headingId
              },
              style: {
                color: ‘red‘,
                fontSize: ‘20px‘
              },
              ‘class‘: {
                foo: true,
                bar: false
              },
              // DOM属性
              domProps: {
                innerHTML: ‘baz‘
              },
              // 组件props
              props: {
                myProp: ‘bar‘
              },
              // 事件监听基于 ‘on‘
              // 所以不再支持如 ‘v-on:keyup.enter‘ 修饰语
              // 需要手动匹配 KeyCode
              on: {
                click: function(event) {
                  event.preventDefault();
                  console.log(111);
                }
              }
            }, this.$slots.default)
          ]
        )
      },
      props: {
        level: {
          type: Number,
          required: true
        }
      }
    });
    new Vue({
      el: ‘#container‘
    });
  </script>
</html>

对应的属性使用方法和上面一样既可以了，我们可以打开页面查看下效果也是可以的。如下

查看效果

VNodes 不一定必须唯一 （文档中说要唯一）
文档中说 VNode必须唯一；说 下面的 render function 是无效的：
但是我通过测试时可以的，如下代码：

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
    <style>

    </style>
  </head>
  <body>
    <div id="container">
      <tb-heading :level="2">
        Hello world!
      </tb-heading>
    </div>
  </body>
  <script src="./vue.js"></script>

  <script>
    Vue.component(‘tb-heading‘, {
      render: function(createElement) {
        var pElem = createElement(‘p‘, ‘hello world‘);
        return createElement(‘div‘, [
          pElem, pElem
        ])
      },
      props: {
        level: {
          type: Number,
          required: true
        }
      }
    });
    new Vue({
      el: ‘#container‘
    });
  </script>
</html>

查看效果

使用Javascript代替模板功能
 v-if 和 v-for
template 中有 v-if 和 v-for， 但是vue中的render函数没有提供专用的API。
比如如下：

<ul v-if="items.length">
  <li v-for="item in items">{{ item.name }}</li>
</ul>
<p v-else>No item found.</p>

在render函数中会被javascript的 if/else 和map重新实现。如下代码：

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
    <style>

    </style>
  </head>
  <body>
    <div id="container">
      <tb-heading>
        Hello world!
      </tb-heading>
    </div>
  </body>
  <script src="./vue.js"></script>

  <script>
    Vue.component(‘tb-heading‘, {
      render: function(createElement) {
        console.log(this)
        if (this.items.length) {
          return createElement(‘ul‘, this.items.map(function(item){
            return createElement(‘li‘, item.name);
          }))
        } else {
          return createElement(‘p‘, ‘No items found.‘);
        }
      },

      props: {
        items: {
          type: Array,
          default: function() {
            return [
              {
                name: ‘kongzhi1‘
              },
              {
                name: ‘kongzhi2‘
              }
            ]
          }
        }
      }
    });
    new Vue({
      el: ‘#container‘
    });
  </script>
</html>

查看效果

v-model

render函数中没有 与 v-model相应的api，我们必须自己来实现相应的逻辑。如下代码可以实现：

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
    <style>

    </style>
  </head>
  <body>
    <div id="container">
      <tb-heading @input="inputFunc">
        Hello world!
      </tb-heading>
    </div>
  </body>
  <script src="./vue.js"></script>

  <script>
    Vue.component(‘tb-heading‘, {
      render: function(createElement) {
        var self = this;
        return createElement(‘input‘, {
          domProps: {
            value: ‘11‘
          },
          on: {
            input: function(event) {
              self.value = event.target.value;
              self.$emit(‘input‘, self.value);
            }
          }
        })
      },
      props: {

      }
    });
    new Vue({
      el: ‘#container‘,
      methods: {
        inputFunc: function(value) {
          console.log(value)
        }
      }
    });
  </script>
</html>

查看效果

理解插槽

可以从 this.$slots 获取VNodes列表中的静态内容：如下代码：

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
    <style>

    </style>
  </head>
  <body>
    <div id="container">
      <tb-heading :level="2">
        <a href="#">Hello world!</a>
      </tb-heading>
    </div>
  </body>
  <script src="./vue.js"></script>

  <script>
    Vue.component(‘tb-heading‘, {
      render: function(createElement) {
        return createElement(
          ‘h‘ + this.level,    // tag name 标签名称
          this.$slots.default  // 子组件
        )
      },
      props: {
        level: {
          type: Number,
          required: true
        }
      }
    });
    new Vue({
      el: ‘#container‘
    });
  </script>
</html>

查看效果

理解函数式组件

函数式组件我们标记组件为 functional, 意味着它无状态(没有data), 无实列(没有this上下文)。
一个函数式组件像下面这样的：

Vue.component(‘my-component‘, {
  functional: true,
  // 为了弥补缺少的实列
  // 提供第二个参数作为上下文
  render: function(createElement, context) {

  },
  // Props 可选
  props: {

  }
})

组件需要的一切通过上下文传递，包括如下：
props: 提供props对象
children: VNode子节点的数组
slots: slots对象
data: 传递给组件的data对象
parent： 对父组件的引用
listeners: (2.3.0+) 一个包含了组件上所注册的 v-on 侦听器的对象。这只是一个指向 data.on 的别名。
injections: (2.3.0+) 如果使用了 inject 选项，则该对象包含了应当被注入的属性。

在添加 functional: true 之后，组件的 render 函数之间简单更新增加 context 参数，this.$slots.default 更新为 context.children，之后this.level 更新为 context.props.level。
如下代码演示：

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
    <style>

    </style>
  </head>
  <body>

    <div id="container">
      {{msg}}
      <choice>
        <item value="1">test</item>
      </choice>
    </div>

  </body>
  <script src="./vue.js"></script>

  <script>
    Vue.component(‘choice‘, {
      template: ‘<div><ul><slot></slot></ul></div>‘
    });

    Vue.component(‘item‘, {
      functional: true,
      render: function(h, context) {
        return h(‘li‘, {
          on: {
            click: function() {
              console.log(context);
              console.log(context.parent);
              console.log(context.props)
            }
          }
        }, context.children)
      },
      props: [‘value‘]
    })

    new Vue({
      el: ‘#container‘,
      data: {
        msg: ‘hello‘
      }
    });
  </script>
</html>

查看效果

时间： 2024-10-02 16:15:13

理解Vue中的Render渲染函数的相关文章

【Vue】彻底理解Vue中render函数与template的区别

一.render函数与template对比 VUE一般使用template来创建HTML,然后在有的时候,我们需要使用javascript来创建html,这时候我们需要使用render函数. 以下我们来做一个需求跟根据level等级来编写对应等级的标题 template解析 <body>   <divid="app">       <h-titlelevel=1>           <p>li</p>       </

vue03----生命周期、nextTick()、ref、filter、computed、vue中异步请求渲染问题（swiper不轮播）（在开发过程中遇到什么问题、踩过的坑）

### 1.vue的组件和实例都有生命周期,而且是一样的 生命周期:(组件从创建到销毁的过程) 创建 挂载 更新 销毁 组件到达某一个阶段就会自动触发某一些函数,这个函数就叫生命周期的钩子函数. 创建:组件创建的时候触发 beforeCreate created     组件刚创建的数据请求 挂载:创建完成挂载前后触发 beforeMount mounted     DOM的初始化操作 更新:数据发生改变的时候触发 beforeUpdate updated     数据的变化监听,尽量不要在这里

深入理解javascript中的立即执行函数(function(){…})()

这篇文章主要介绍了深入理解javascript中的立即执行函数,立即执行函数也叫立即调用函数,通常它的写法是用(function(){-})()包住业务代码,使用jquery时比较常见,需要的朋友可以参考下http://www.jb51.net/article/50967.htm javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花,当然,能理解各型各色的写法也是对javascript语言特性更进一步的深入理解. ( function()

关于Vue中的 render: h =&gt; h(App) 具体是什么含义？

render: h => h(App) 是下面内容的缩写: render: function (createElement) { return createElement(App); } 进一步缩写为(ES6 语法): render (createElement) { return createElement(App); } 再进一步缩写为: render (h){ return h(App); } 按照 ES6 箭头函数的写法,就得到了: render: h => h(App); 其中 根据

Render渲染函数和JSX

1.Render函数 官网API地址:https://cn.vuejs.org/v2/guide/render-function.html 通常写的h为createElement的缩写,createElement 会返回虚拟节点 (virtual node)”,也常简写它为“VNode,因为它所包含的信息会告诉 Vue 页面上需要渲染什么样的节点,包括及其子节点的描述信息. 第一个参数为一个 HTML 标签名.组件选项对象,为必选项. 第二个参数为 {Object},是一个与模板中属性对应的数据

理解Underscore中的_.template函数

Underscore中提供了_.template函数实现模板引擎功能,它可以将JSON数据源中的数据对应的填充到提供的字符串中去,类似于服务端渲染的模板引擎.接下来看一下Underscore是如何实现模板引擎的. 工具准备 首先是_.template函数的配置项,Underscore源码中配置了默认的配置项: _.templateSettings = { // 执行JavaScript语句,并将结果插入. evaluate: /<%([\s\S]+?)%>/g, // 插入变量的值. inte

怎样理解 Vue 中的计算属性 computed 和 methods ?

需求: 在 Vue 中, 我们可以像下面这样通过在 引号 或 双花括号 内写 js 表达式去做一些简单运算, 这是可以的, 不过这样写是不直观的, 而且在 html 中 夹杂 一些运算逻辑这种做法其实并不好. 最理想的情况是: html 只负责展示, 绑定的数据都是 赤裸裸 的 变量, 而非 表达式 , 这样就会比较人性化. 想要达到这种效果可以有两种方法: computed 和 methods. 1. 使用 methods 相当于是为这个 字符串倒序 的功能单独写了一个函数, 这个函数在 Vu

深入理解vue中的slot与slot-scope

<template> <div class="father"> <h3>这里是父组件</h3> <child> <div class="tmpl"> <span>菜单1</span> <span>菜单2</span> <span>菜单3</span> <span>菜单4</span> <span

vue中的列表渲染

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue中列表渲染</title> <script src="./vue.js"></script> </head> <body> <div id="app">