Render渲染函数-深入应用

雨点打透心脏的1/2处 2021-10-15 12:21 307阅读 0赞

渲染函数是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)
              ]
            )
    }