render函数是vue中生成虚拟dom的底层api,可用于在组件封装中使用js编写动态模板,实现js的完全编程能力。

vue中在一些复杂场景下使用template模板不太方便,例如需要引入大量子组件时,使用template模板会使代码重复冗余,这时用render函数就可以轻松解决问题。

一、render函数的背景

在深入渲染函数之前,建议先了解一下vue的渲染原理。

1、虚拟dom

vue通过建立一个虚拟DOM来追踪自己要如何改变真实DOM。真实DOM的属性有几百个,为了更高效的来完成dom对比及局部更新,vue引入虚拟DOM的方式来模拟真实dom节点。

通过调用createElement()方法,生成createNodeDescription,即VNode,而虚拟DOM是所有VNode建立的整个DOM数的总称。

当数据更新时,会生成新的虚拟DOM,与旧的虚拟DOM进行diff对比,本质上就是tree树形结构数据的递归遍历比对,找出不同的VNode数据;然后对变化的这部分VNode通过patch生成真实DOM渲染出来。

2、渲染过程

vue的渲染过程大致可以分成4个阶段:

  • 模板解析生辰AST数
  • AST数解析生成对应的render函数
  • 数据通过render函数解析生成VNode
  • VNode经过diff和patch后生成真实DOM展示

二、render函数的使用

1、应用场景示例

当存在大量引入不同子组件时的场景时,template只能逐个引入子组件写死,而render函数可以用js动态编写html模板。

这里举用官网的代码例子。

  • 使用template书写:
<script type="text/x-template" id="anchored-heading-template">
  <h1 v-if="level === 1">
    <slot></slot>
  </h1>
  <h2 v-else-if="level === 2">
    <slot></slot>
  </h2>
  <h3 v-else-if="level === 3">
    <slot></slot>
  </h3>
  <h4 v-else-if="level === 4">
    <slot></slot>
  </h4>
  <h5 v-else-if="level === 5">
    <slot></slot>
  </h5>
  <h6 v-else-if="level === 6">
    <slot></slot>
  </h6>
</script>
Vue.component('anchored-heading', {
  template: '#anchored-heading-template',
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})
  • 使用render书写:
Vue.component('anchored-heading', {
  render: function (createElement) {
    return createElement(
      'h' + this.level,   // 标签名称
      this.$slots.default // 子节点数组
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

2、createElement 参数

  • 第一个参数

    • 参数类型:String | Object | Function
    • 是否必填:是
    • 参数描述:参数为html标签名 或组件选项对象 或resolve了上述任何一种的async函数
    • 代码示例:
    // String
    createElement('div', 'hello world!')
    
    // Object
    createElement({
      template: `<div>hello world!</div>`
    })
    
    // Function
    createElement(async () => {
      return new Promise((resolve) => {
      	setTimeout(() => {
    	  resolve({
            template: `<div>hello world!</div>`
          })
        }, 1000)
      })
    })
    
  • 第二个参数

    • 参数类型:Object
    • 是否必填:否
    • 参数描述:参数为一个与模板中attribute对应的数据对象,用于表示节点属性
    • 代码示例:
    {
      // 与 `v-bind:class` 的 API 相同,
      // 接受一个字符串、对象或字符串和对象组成的数组
      'class': {
        foo: true,
        bar: false
      },
      
      // 与 `v-bind:style` 的 API 相同,
      // 接受一个字符串、对象,或对象组成的数组
      style: {
        color: 'red',
        fontSize: '14px'
      },
      
      // 普通的 HTML attribute
      attrs: {
        id: 'foo'
      },
      
      // 组件 prop
      props: {
        myProp: 'bar'
      },
      
      // DOM property
      domProps: {
        innerHTML: 'baz'
      },
      
      // 事件监听器在 `on` 内,
      // 但不再支持如 `v-on:keyup.enter` 这样的修饰器。
      // 需要在处理函数中手动检查 keyCode。
      on: {
        click: this.clickHandler
      },
      
      // 仅用于组件,用于监听原生事件,而不是组件内部使用
      // `vm.$emit` 触发的事件。
      nativeOn: {
        click: this.nativeClickHandler
      },
      
      // 自定义指令。注意,你无法对 `binding` 中的 `oldValue`
      // 赋值,因为 Vue 已经自动为你进行了同步。
      directives: [
        {
          name: 'my-custom-directive',
          value: '2',
          expression: '1 + 1',
          arg: 'foo',
          modifiers: {
            bar: true
          }
        }
      ],
      
      // 作用域插槽的格式为
      // { name: props => VNode | Array<VNode> }
      scopedSlots: {
        default: props => createElement('span', props.text)
      },
      
      // 如果组件是其它组件的子组件,需为插槽指定名称
      slot: 'name-of-slot',
      
      // 其它特殊顶层 property
      key: 'myKey',
      ref: 'myRef',
      
      // 如果你在渲染函数中给多个元素都应用了相同的 ref 名,
      // 那么 `$refs.myRef` 会变成一个数组。
      refInFor: true
    }
    
  • 第三个参数

    • 参数类型:String | Array
    • 是否必填:否
    • 参数描述:参数为文本虚拟节点字符串 或由 createElement() 构建而成的子级虚拟节点,用于描述子节点。
    • 代码示例:
    createElement(
      'div',
      {
          class: {
              title: true
          },
          style: {
              border: '1px solid',
              padding: '10px'
          }
      }, 
      [
          createElement('h1', 'Hello Vue!'),
          createElement('p', 'Hello world!')
      ]
    )
    
  • 注意:
    严格地说,第二个参数和第三个参数并不是绝对的第几个,如果只有两个参数,而第二个参数是字符串或数组类型,那这里第二个参数实际上会作为上述介绍中的第三种参数来使用。

    // 例如
    createElement(
      'div',
      [
         createElement('h1', 'Hello Vue!'),
         createElement('p', 'Hello world!')
      ]
    )
    
    // 这里第二个参数会作为子节点来使用,解析结果为:
    <div>
    	<h1>Hello Vue!</h1>
    	<p>Hello world!</p>
    </div>
    

三、使用JSX

使用render函数书写复杂组件时还是显得代码比较繁琐不清晰,而使用JSX就方便多了,vue中也可以配置使用JSX。

配置教程(官方文档):

  • 安装依赖:
    npm i -D @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props
    
  • 配置babel:
    babel.config.js里配置添加:
    module.exports = {
      presets: ['@vue/babel-preset-jsx'],
    }
    
  • 愉快地使用:
    render() {
      return (
        <input
          type="email"
          placeholder={this.placeholderText}
        />
      )
    }
    

参开链接:https://juejin.cn/post/6844903973502058504#heading-1

Logo

前往低代码交流专区

更多推荐