一,虚拟dom

DOM是文档对象模型(Document Object Model)的简写，在浏览器中通过js来操作DOM的操作性能很差，于是虚拟Dom应运而生。虚拟Dom就是在js中模拟DOM对象树来优化DOM操作的一种技术或思路。React和Vue2都使用了虚拟DOM技术，虚拟DOM并不是真正意义上的DOM，它作为一个轻量级的JavaScript对象，在状态发生变化时，会进行Diff运算，来更新发生变化的DOM，对于未发生变化的DOM节点，不予操作，由于不是全部重绘，大大提高更新渲染性能。当使用render函数描述虚拟DOM时，vue提供一个函数，这个函数是就构建虚拟DOM所需要的工具。官网上给他起了个名字叫 createElement。还有约定的简写叫 h, vm中有一个方法 _c, 也是这个函数的别名。

return createElement('h1', this.blogTitle)
复制代码

createElement返回的并不是一个实际的DOM元素，它更准确的名字可能是createNodeDescription(创建描述Node)，因为它所包含的信息会告诉 Vue 页面上需要渲染什么样的节点，及其子节点。我们把这样的节点描述为“虚拟节点 (Virtual Node)”，也常简写它为“VNode”。“虚拟 DOM”是我们对由 Vue 组件树建立起来的整个 VNode 树的称呼。

render方法会传入一个createElement函数，它是一个用于创建DOM元素或者用于实例化其他组件的构造方法。render方法必须返回一个createElement函数的调用结果，也就是模版内的顶层元素（这个方法在vue2的习惯性使用中经常用h来命名）。

二，CreateElement基本用法

1.基本参数

createElement构成了Vue虚拟DOM的模板，它有3个参数：

// @returns {VNode}
createElement(
  // {String | Object | Function}
  // 一个 HTML 标签字符串，组件选项对象，或者
  // 解析上述任何一种的一个 async 异步函数。必需参数。
  'div',

  // {Object}
  // 一个包含模板相关属性的数据对象
  // 你可以在 template 中使用这些特性。可选参数。
  {
    // (详情见下一节)
  },

  // {String | Array}
  // 子虚拟节点 (VNodes)，由 `createElement()` 构建而成，
  // 也可以使用字符串来生成“文本虚拟节点”。可选参数。
  [
    '创建h1标签',
    createElement('h1', 'Render函数'),
    createElement(MyComponent, {
      props: {
        someProp: 'foobar'
      }
    })
  ]
)
复制代码

2.函数模板各部分含义

a.'div':html节点

{String | Object | Function} -必要参数
HTML标签字符串 | 组件选项对象 | 解析上述任何一种的一个 async 异步函数 示例代码：

<script>
    var app = new Vue({
      el: "#app",
      // 使用render函数来创建DOM
      render: function (createElement) {
        // createElement 是一个方法
        alert(typeof createElement);
        //render 第一个参数必选，{String | Object | Function}
        //String--html标签
        //Object--一个含有数据选项的对象
        //Function--方法返回一个含有数据选项的对象
        //①当参数为String时
        return createElement('div', 'hello world');
        //②当参数为Object时
        // return createElement({
        //   template: '<div>hello world</div>'
        // })
        //③当参数为Function时
        // var domFun = function () {
        //   return {
        //     template: "<div>hello world</div>"
        //   };
        // };
        // return createElement(domFun());
      }
    });
</script>
复制代码

b.{}:节点属性

{Object} -可选参数
一个包含模板相关属性的数据对象,这样，您可以在 template 中使用这些属性 示例代码：

<script>
    var app = new Vue({
      el: "#app",
      // 使用render函数来创建DOM
      render: function (createElement) {
        return createElement({
          template: '<div>hello world</div>'
        }, {
          'class': {
            foo: true,
            bar: false
          },
          style: {
            color: 'red',
            fontSize: '16px'
          },
          //正常的html特性
          attrs: { // 也就是除了class,style之外的属性可以写在这
            id: 'foo',
            src: 'http://baidu.com'
          },
          //用来写原生的dom属性
          domProps: {
            innerHTML: '<span style="color:pink;font-size:18px">Hello Word</span>'
          }
        })
      }
    });
</script>
复制代码

{
  // 和`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
  },
  // 自定义指令。注意，你无法对 `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',
  // 其他特殊顶层属性
  key: 'myKey',
  ref: 'myRef'
}
复制代码

详细demo参考网址：www.jianshu.com/p/b019d4858…

c.[ ]:html节点的子节点

{String | Array} -可选参数
子节点 (VNodes)，由 createElement() 构建而成，或使用字符串来生成“文本节点”

<script>
    var app = new Vue({
      el: "#app",
      data() {
        return {
          list: ['li-1', 'li-2', 'li-3']
        }
      },
      // 使用render函数来创建DOM
      render: function (createElement) {
        return createElement(
          'ul',
          this.list.map(item => {
            return createElement('li', item)
          })
        )
      }
    });
</script>
复制代码

3.使用JavaScript代替模板功能

在Render函数中，不再需要Vue内置的指令，比如v-if、v-for。无论要实现什么功能，都可以使用原生JavaScript。render函数里没有与v-model对应的API，需要自己来实现逻辑。
对于事件修饰符和按键修饰符，基本需要自己实现：

对于事件修饰符.capture和.once，Vue提供了特殊的前缀，可以直接写在on的配置里。

写法如下:

on: {
    '!click': this.doThisInCapturingMode,
    '~keyup': this.doThisOnce,
    '~!mouseover': this.doThisOnceInCapturingMode
}
复制代码

参考网址：

• www.cnblogs.com/yubin-/p/11…

• www.cnblogs.com/qdcnbj/p/83…

• www.jianshu.com/p/a788305a6…

• www.jianshu.com/p/b019d4858…

有需要更正的地方各位看官可以在评论里面指出！