Render渲染函数-深入应用-蒲公英云

Render渲染函数-深入应用

渲染函数是vue中的一个非常重要的功能。基本在个性化的展示上都会使用到。所以需要对其有较为深入的理解才行。

之前写过一篇关于渲染的，算是基础。在随后的使用过程中，发现还需要更深入的理解。所以又做了新的总结。

渲染函数的作用：VUE一般使用template来创建HTML，然后在有的时候，我们需要使用javascript来创建html，这时候我们需要使用render函数。

关键点一：理解createElement：

Vue通过建立一个虚拟DOM对真实的DOM发生变化保存追踪。

createElement返回的是包含的信息会告诉VUE页面上需要渲染什么样的节点及其子节点。我们称这样的节点为虚拟DOM，可以简写为VNode

createElement 参数
// @return {VNode}
createElement(
  // {String | Object | Function}
  // 1.一个HTML标签字符串，组件选项对象，或者一个返回值类型为String/Object的函数。该参数是必须的
  'div',
  // {Object}
  // 2.一个包含模板相关属性的数据对象，这样我们可以在template中使用这些属性，该参数是可选的。
  { },
  // {String | Array}
  // 3.子节点（VNodes），由 createElement() 构建而成。或简单的使用字符串来生成的 "文本节点"。可选参数
)

关键点二：理解data对象：

{
  // 和`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'
}

对应理解的实例

render: (h,params)=>
{    
    //  可以组织一些下面需要使用的参数
    return createElement(
           //参数一：标签字符串-必选
          'h' + this.level,
           //参数三：子节点（VNodes）由 createElement() 构建而成-可选参数
          [
            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)
          ]
        )
}