vue笔记 - render函数

虚拟DOM

虚拟DOM就是在js中模拟DOM对象树来优化DOM操作的一种技术和思路。可以提高DOM操作的性能。

虚拟DOM不是真正意义上的DOM，它是一个轻量级的JavaScript对象，在状态发生变化时，会进行Diff运算，仅更新发生变化的DOM，由于不完全重绘的效果，可以大大提高更新渲染性能。

当render函数描述虚拟DOM时，vue提供一个函数(createElement)，这个函数就是构建虚拟DOM所需的工具。约定简写为 h。

在vue2.x中，虚拟DOM通过一种VNode类表达，每个DOM元素或组件都对应一个VNode对象。

VNode节点：

• children 子节点，数组，也是VNode类型
• text 当前节点的文本，一本文本节点或注释节点会有该属性
• elm 当前虚拟节点对应的真实DOM节点
• ns 节点的namespace
• content 编译作用域
• functionContext 函数化组件的作用域
• key 节点的key属性，用于作为节点的标识，有利于patch的优化
• componentOptions 创建组件实例时用到的选项信息
• child 当前节点对应的组件实例
• parent 组件的占位节点
• raw 原始的html
• isStatic 静态节点那的标识
• isRootInset 是否作用根节点插入，被包裹的节点，该属性的值默认为false
• isConment 当前节点是否是注释节点
• isCloned 当前节点是否是克隆节点
• isOne 当前节点是否是v-once指令

VNode主要分类

• TextVNode 文本节点
• ElementVNode 普通元素节点
• ComponentVNode 组件节点
• EmptyVNode 没有内容的注释节点
• CLoneVNode 克隆节点，可以是以上任意类型的节点，唯一区别在于isCloned属性为true

CreateElement基本用法

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

  // 包含模板相关属性的数据对象
  // 你可以在 template 中使用这些特性。可选。
  // {Object}
  {
    // 和`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: 'bar'
    },
    // 事件监听器基于 `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'
  }

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

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

Vue2.0 render: h => (h)

new Vue({

  router,
  store,
  //components: { App }  vue1.0的写法
  render: h => h(App)    vue2.0的写法
}).$mount('#app')

render函数是渲染一个驶入，然后提供给el挂载，如果没有render那页面无法渲染

Vue2.0 渲染过程

1. render: h => h(App)是es6语法，表示Vue实例选项对象的render方法作为一个函数，接受传入的参数h函数，返回h(App)的函数调用结果.
2. Vue在创建Vue实例时，通过render方法来渲染实例DOM树
3. Vue在调用render方法时，会传入一个createElement函数作为参数，也就是这里的h的实参是createElement函数，然后createElement会以App为参数进行调用。

//官方文档
render: function (createElement) {
     return createElement(
       'h' + this.level,   // tag name 标签名称
      this.$slots.default // 子组件中的阵列
    )
  }

rander: h => h(App) 翻译一下:

render: function (createElement) {
    return createElement(App);
}