vue 理解&使用render函数

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: `
  hello world!`
  })
  
  // Function
  createElement(async () => {
    return new Promise((resolve) => {
    	setTimeout(() => {
  	  resolve({
          template: `
  hello world!`
        })
      }, 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 }
    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