vue中的render函数介绍

逃离我推掉我的手 2022-01-27 20:47 274阅读 0赞

简介：对于不了解slot的用法（参考：[大白话vue-slot的用法][vue-slot]）又刚接触render函数的同学来说，官网的解释无疑一脸懵逼，这里就整理下个人对render函数的理解

问题：

1、render函数是什么

2、render函数怎么用

**render函数是什么**

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

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

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

vm中有一个方法\_c,也是这个函数的别名

先看官网对 createElement的介绍

![复制代码][copycode.gif]

// @returns {VNode}
    createElement(
      // {String | Object | Function}
      // 一个 HTML 标签字符串，组件选项对象，或者
      // 解析上述任何一种的一个 async 异步函数，必要参数。
      'div',
    
      // {Object}
      // 一个包含模板相关属性的数据对象
      // 这样，您可以在 template 中使用这些属性。可选参数。
      {
        // (详情见下一节)
      },
    
      // {String | Array}
      // 子节点 (VNodes)，由 `createElement()` 构建而成，
      // 或使用字符串来生成“文本节点”。可选参数。
      [
        '先写一些文字',
        createElement('h1', '一则头条'),
        createElement(MyComponent, {
          props: {
            someProp: 'foobar'
          }
        })
      ]
    )

![复制代码][copycode.gif]

就是说createElement（params1，params2，params3）接受三个参数，每个参数的类型官方介绍已经说明

**render函数怎么用**

例：

![复制代码][copycode.gif]

render:(h) => {
                                return h('div',{
    　　　　　　　　　　　　　　　　　　　//给div绑定value属性
                                    props: {
                                        value:''
                                    },
    　　　　　　　　　　　　　　　　　　　//给div绑定样式
    　　　　　　　　　　　　　　　　　　　style:{
    　　　　　　　　　　　　　　　　　　　　　　width:'30px'
    　　　　　　　　　　　　　　　　　　　},　
    　　　　　　　　　　　　　　　　　　　//给div绑定点击事件　　
                                    on: {
                                        click: () => {
                                            console.log('点击事件')
                                        }
                                    },
    
                                })
                            }

![复制代码][copycode.gif]

**深入 data 对象**

**　　**有一件事要注意：正如在模板语法中，v-bind:class 和 v-bind:style ，会被特别对待一样，在 VNode 数据对象中，下列属性名是级别最高的字段。该对象也允许你绑定普通的 HTML 特性，就像 DOM 属性一样，比如 innerHTML (这会取代 v-html 指令)。

![复制代码][copycode.gif]

1 {
     2  // 和`v-bind:class`一样的 API
     3  'class': {
     4   foo: true,
     5   bar: false
     6  },
     7  // 和`v-bind:style`一样的 API
     8  style: {
     9   color: 'red',
    10   fontSize: '14px'
    11  },
    12  // 正常的 HTML 特性
    13  attrs: {
    14   id: 'foo'
    15  },
    16  // 组件 props
    17  props: {
    18   myProp: 'bar'
    19  },
    20  // DOM 属性
    21  domProps: {
    22   innerHTML: 'baz'
    23  },
    24  // 事件监听器基于 `on`
    25  // 所以不再支持如 `v-on:keyup.enter` 修饰器
    26  // 需要手动匹配 keyCode。
    27  on: {
    28   click: this.clickHandler
    29  },
    30  // 仅对于组件，用于监听原生事件，而不是组件内部使用
    31  // `vm.$emit` 触发的事件。
    32  nativeOn: {
    33   click: this.nativeClickHandler
    34  },
    35  // 自定义指令。注意，你无法对 `binding` 中的 `oldValue`
    36  // 赋值，因为 Vue 已经自动为你进行了同步。
    37  directives: [
    38   {
    39    name: 'my-custom-directive',
    40    value: '2',
    41    expression: '1 + 1',
    42    arg: 'foo',
    43    modifiers: {
    44     bar: true
    45    }
    46   }
    47  ],
    48  // Scoped slots in the form of
    49  // { name: props => VNode | Array<VNode> }
    50  scopedSlots: {
    51   default: props => createElement('span', props.text)
    52  },
    53  // 如果组件是其他组件的子组件，需为插槽指定名称
    54  slot: 'name-of-slot',
    55  // 其他特殊顶层属性
    56  key: 'myKey',
    57  ref: 'myRef'
    58 }

![复制代码][copycode.gif]

转载：[https://www.cnblogs.com/weichen913/p/9676210.html][https_www.cnblogs.com_weichen913_p_9676210.html]

[vue-slot]: https://www.cnblogs.com/weichen913/p/9297399.html
[copycode.gif]: /images/20220128/764e4946fc7a4dc4a1e0224e019e420d.png
[https_www.cnblogs.com_weichen913_p_9676210.html]: https://www.cnblogs.com/weichen913/p/9676210.html