前言
如果你使用过
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)
})
