Vue中render函数调用时机与执行细节源码分析

Vue中的render函数是用来生成虚拟DOM（Virtual DOM）的函数。当组件的状态发生改变时，Vue会重新执行render函数，生成新的虚拟DOM，并通过比对新旧虚拟DOM的差异，最终更新视图。在Vue的生命周期中，render函数执行的时机与执行细节如下：

执行时机

初始化时执行

组件的render函数在组件初始化时执行一次，用来生成组件的初始虚拟DOM。简单示例代码如下：

Vue.component('my-component', {
  render: function (createElement) {
    return createElement('div', 'hello world')
  }
})

数据更新时执行

当组件依赖的数据发生改变时，Vue会触发重新执行组件的render函数，生成新的虚拟DOM。代码示例如下：

Vue.component('my-component', {
  props: ['text'],
  render: function (createElement) {
    return createElement('div', this.text)
  }
})

上述组件会根据props传入的text值生成虚拟DOM，在text属性变化时，会重新执行渲染函数。

watch监听函数中执行

除了数据更新时执行，还有一种情况是在watch监听函数中执行。简单示例代码如下：

Vue.component('my-component', {
  props: ['text'],
  watch: {
    text: function (newVal, oldVal) {
      console.log('text changed')
    }
  },
  render: function (createElement) {
    return createElement('div', this.text)
  }
})

上述代码中，当text属性变化时，监听函数会被调用，这时会重新执行组件的render函数。

执行细节

createElement参数

调用渲染函数时，Vue会将createElement函数作为参数传入。createElement是Vue提供的用来生成虚拟DOM的函数，它的第一个参数是标签名或组件构造函数，第二个参数是一个对象类型的数据，包含了该虚拟DOM节点的各种属性和事件等信息。第三个参数以及以后的参数是该节点的子节点。示例代码如下：

Vue.component('my-component', {
  render: function (createElement) {
    return createElement('div', { class: 'container' }, [
      createElement('h1', 'Hello world'),
      createElement('p', 'This is a paragraph')
    ])
  }
})

上述代码中，createElement函数会生成一个div节点，它的class属性为container，子节点是一个h1和一个p节点。

JSX语法

除了调用createElement函数，还可以使用JSX语法来生成虚拟DOM。在Vue中，支持使用babel-plugin-transform-vue-jsx插件来解析JSX语法。需要在项目中安装并配置该插件后方可使用。示例代码如下：

Vue.component('my-component', {
  render() {
    return (
      <div class="container">
        <h1>Hello world</h1>
        <p>This is a paragraph</p>
      </div>
    )
  }
})

上述代码中，使用了JSX语法来生成虚拟DOM，其实际效果与前面的例子相同。需注意的是，使用JSX语法需要额外配置babel插件，并且将render函数改为箭头函数以正确执行this指向。