render函数

render函数的作用:

render函数跟template一样都是创建html模板的,但是有时候用template,代码复杂,可以使用render函数.(返回一个虚拟dom,将该虚拟dom渲染成真实dom)

render函数参数

render函数即渲染函数,返会的参数是Vnode(即虚拟节点,也就是我们要渲染的节点)
createElement函数 (返回值是VNode)

第一个参数（必填）：可以为String|Object|Function

String：表示的是HTML 标签名；
Object ：一个含有数据的组件选项对象；
Function ：返回了一个含有标签名或者组件选项对象的async函数。

第二个参数（选填）：可为Class|Style|attrs|domProps|on

class：控制类名；
style ：样式；
attrs ：用来写正常的 html 属性 id src 等；
domProps ：用来写原生的dom 属性；
on：用来写原生方法；

第三个参数（选填）：代表子级虚拟节点，由 createElement() 构建而成，正常来讲接收的是一个字符串或者一个数组，一般数组用的是比较多的

参数二详细:

{
    // 与 `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<VNode> }
    scopedSlots: {
        default: props => createElement('span', props.text)
    },
    // 如果组件是其它组件的子组件，需为插槽指定名称
    slot: 'name-of-slot',
    // 其它特殊顶层 property
    key: 'myKey',
    ref: 'myRef',
    // 如果你在渲染函数中给多个元素都应用了相同的 ref 名，
    // 那么 `$refs.myRef` 会变成一个数组。
    refInFor: true
}

约束

VNodes必须唯一:
组件树中的所有 VNode 必须是唯一的。

使用js代替模板

v-if和v-for

这些可以在渲染函数中用 JavaScript 的 if/else 和 map() 来重写：

//示例一
props: ['items'],
render() {
	if (this.items.length) {
		return Vue.h('ul', this.items.map((item) => {
			return Vue.h('li', item.name)
		}))
	} else {
		return Vue.h('p', 'No items found.')
	}
}
//示例二
render: function (createElement) {
  return createElement('div',
    Array.apply(null, { length: 20 }).map(function () {
      return createElement('p', 'hi')
    })
  )
}

v-model

//示例一
props: ['modelValue'],
render() {
	return Vue.h(SomeComponent, {
		modelValue: this.modelValue,
		'onUpdate:modelValue': value => this.$emit('update:modelValue', value)
	})
}

//示例二
props: ['value'],
render: function (createElement) {
  var self = this
  return createElement('input', {
    domProps: {
      value: self.value
    },
    on: {
      input: function (event) {
        self.$emit('input', event.target.value)
      }
    }
  })
}

v-on

render() {
	return Vue.h('div', {
		onClick: $event => console.log('clicked', $event.target)
	})
}

事件修饰符

修饰符	处理函数中的等价操作
.stop	event.stopPropagation()
.prevent	event.preventDefault()
.self	if (event.target !== event.currentTarget) return
按键：.enter, .13	if (event.keyCode !== 13) return (对于别的按键修饰符来说，可将 13 改为另一个按键码)
修饰键：.ctrl, .alt, .shift, .meta	if (!event.ctrlKey) return (将 ctrlKey 分别修改为 altKey、shiftKey 或者 metaKey)

修饰符	前缀
.passive	&
.capture	!
.once	~
.capture.once 或 .once.capture	~!

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

插槽

• 可以使用this.$slots访问静态插槽的内容,每个插槽都是一个VNode数组

  render: function(createElement){
      // `<div><slot></slot></div>`
      return createElement('div', this.$slots.default)
  }
  

• 也可以通过this.$scopedSlots访问作用域插槽,每个作用域插槽都是一个返回若干VNode的函数

  props: ['message'],
  render: function (createElement) {
      // `<div><slot :text="message"></slot></div>`
      return createElement('div', [
          this.$scopedSlots.default({
              text: this.message
          })
      ])
  }