vue 2.0 Render函数

前言

如果你使用过React框架，相信你一定了解过JSX语法糖。在此不去长篇大论JSX语法，简单的说就是可以js和html混用，经过编译后转化为JavaScript语法。
而除了JSX之外，在react中也可以直接用js语法来书写元素，但是在JSX中html结构更加直观。

创建HTML的几种方式

• 模板语法

  在底层实现上，vue将模板编译成虚拟DOM渲染函数。结合响应系统，在应用状态改变时，vue能够智能地计算出重新渲染组件的最小代价并应用到DOM操作上。

reactivity-system.png

• Render函数
  字符串模板的代替方案。render函数接收一个createElement方法作为第一个参数用来创建VNode

createElement 参数

createElement() 有3个参数：

• 参数一
  require: true
  type: {String | Object | Function}
  meaning: {一个 HTML 标签字符串 | 组件选项对象 | 一个返回值类型为String/Object的函数}

• 参数二
  require: false
  type: { Object }
  meaning: {一个包含模板相关属性的数据对象}

• 参数三
  require: false
  type: { String | Array }
  meaning: { 子节点(VNodes)，由createElement()生成，或简单的使用字符串来生成"文本节点"}

深入data object参数

就是createElement的第二个参数。

{
  'class': {
     // 和`v-bind:class`一样的API
  },
  style: {
     // 和`v-bind:style`一样的API
  },
  attrs: {
     // 正常的 html 特性
  },
  props: {
     // 组件 props
  },
  domProps: {
    // DOM 属性
  },
  on: {
    // 事件监听器基于on
    // 不再支持如 `v-on:keyup.enter` 修饰器，需手动匹配 keyCode
  },
  nativeOn: {
    // 仅对于组件，用于监听原生组件，而不是组件内部使用`vm.$emit`触发的事件
  },
  directives: [
    {
      // 自定义指令，注意事项：不能对绑定的旧值设值
      // vue 会为您持续追踪
    }
  ],
  scopedSlots: {
  },
  slot: '', // 如果组件是其他组件的子组件，需为 slot 指定名称
  // 其他特殊顶层属性
  key: '',
  ref: ''
}

约束

就是createElement的第三个参数。
组件树中的所有 VNodes 必须是唯一的。

使用 JavaScript 代替模板功能

v-if / v-for

v-if 在render中用if / else实现；
v-for 在render中用map实现

v-model

  render: function (createElement) {
  var self = this
  return createElement('input', {
    domProps: {
      value: self.value
    },
    on: {
      input: function (event) {
        self.value = event.target.value
        self.$emit('input', event.target.value)
      }
    }
  })
}

别名

将 h 作为 createElement 的别名是 Vue 生态系统中的一个通用惯例，实际上也是 JSX 所要求的，如果在作用域中 h 失去作用， 在应用中会触发报错。

es5

new Vue({
  el: '#demo',
  render: function (h) {
    return (
      h(APP)
    )
  }
})

es6

new Vue({
  el: '#demo',
  render: h => h(APP)
})