Vue - 渲染函数render
一、render函数是什么
简单的说，在vue中我们使用模板HTML语法来组建页面的，使用render函数我们可以用js语言来构建DOM。因为vue是虚拟DOM，所以在拿到template模板时也要转译成VNode的函数，而用render函数构建DOM，vue就免去了转译的过程。
当使用render函数描述虚拟DOM时，vue提供一个函数，这个函数是就构建虚拟DOM所需要的工具。官网上给他起了个名字叫createElement。还有约定它的简写叫h
示例： 分别使用html语法和render函数来实现根据传入的 level （h1-h6）页面渲染不同的标题格式
【1】使用组件的形式
// 父组件
<template>
<div>
<child1 :level='level'>我是标题</child1>
</div>
</template>
<script>
const child1 = () => import("./child1.vue");
export default {
components: { child1 },
data() {
return {
level: 1
};
},
};
</script>
// 子组件 child1.vue
<template>
<div>
<h1 v-if="level == 1">
<slot></slot>
</h1>
<h2 v-if="level == 2">
<slot></slot>
</h2>
<h3 v-if="level == 3">
<slot></slot>
</h3>
<h4 v-if="level == 4">
<slot></slot>
</h4>
<h5 v-if="level == 5">
<slot></slot>
</h5>
<h6 v-if="level == 6">
<slot></slot>
</h6>
</div>
</template>
<script>
export default {
props: {
level: {
require: true,
type: Number,
}
}
};
</script>
【2】使用render函数的形式（修改child1子组件）
<script>
export default {
props: {
level: {
require: true,
type: Number,
}
},
render(createElement) {
return createElement('h' + this.level, this.$slots.default);
}
};
</script>
对比两种实现方式，我们发现这里用模板并不是最好的选择，不但代码冗长，而且在每一个级别的标题中重复书写了<slot></slot>。 使用render函数实现看起来简单多了，这样代码精简很多，但是需要非常熟悉 Vue 的实例属性。在这个例子中，你需要知道，向组件中传递不带v-slot指令的子节点时，比如child1中的“我是标题”，这些子节点被存储在组件实例中的this.$slots.default中。
二、render函数的参数
render 函数即渲染函数，它是个函数，render 函数的返回值是VNode（即：虚拟节点，也就是我们要渲染的节点）
createElement 是 render 函数的参数，它本身也是个函数，并且有三个参数。接来下我们重点介绍这三个参数
【1】createElement 第一个参数是必填的，可以是String | Object | Function
- String，表示的是HTML 标签名
- Object ，一个含有数据的组件选项对象
- Function ，返回了一个含有标签名或者组件选项对象的async 函数
示例：
render: function (createElement) {
// String
return createElement('h1');
//Object
return createElement({
template: " <div>锄禾日当午</div> "
})
// Function
let domFun = function () {
return {
template: " <div> 锄禾日当午</div> "
}
}
return createElement(domFun())
}
【2】createElement 第二个参数是选填的，一个与模板中属性对应的数据对象 ****常用的有class | style | attrs | domProps | on
- class：控制类名
- style ：样式
- attrs ：用来写正常的 html 属性 id src 等等
- domProps :用来写原生的dom 属性
- on:：用来写原生方法
return createElement('div', {
// 与 `v-bind:class` 的 API 相同，
// 接受一个字符串、对象或字符串和对象组成的数组
'class': {
foo: true,
bar: false
},
// 与 `v-bind:style` 的 API 相同，
// 接受一个字符串、对象，或对象组成的数组
style: {
color: 'red',
fontSize: '14px'
},
// 普通的 HTML 特性
attrs: {
id: 'foo'
},
// 组件 prop
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',
// 如果你在渲染函数中给多个元素都应用了相同的 ref 名，
// 那么 `$refs.myRef` 会变成一个数组。
refInFor: true
})
【3】createElement 第三个参数是选填的，代表子级虚拟节点 (VNodes)，由 createElement() 构建而成，正常来讲接收的是一个字符串或者一个数组，一般数组用的是比较多的
return createElement('div', {
attrs: {
id: "content"
}
}, [
createElement('h1', '我是H1标题'),
createElement('h6', '我是H6标题')
]
)
三、v-model在render函数中的使用
在render函数中，没有提供v-model的实现，所以你必须自己实现相应的逻辑。这就是深入底层的代价，但与v-model相比，这可以让你更好地控制交互细节。
<template>
<div>
<child1 :name='name' v-model="name"></child1>
<p>{{name}}</p>
</div>
</template>
<script>
const child1 = () => import("./child1.vue");
export default {
components: { child1 },
data() {
return {
name: 'Demi'
};
},
};
</script>
<script>
export default {
props: {
name: {
require: true,
}
},
render(createElement) {
let self = this
return createElement('input', {
domProps: {
value: self.name
},
on: {
input(event) {
self.$emit('input', event.target.value)
}
}
})
}
};
</script>
结果如下：
image
render函数通过input方法实现数据双向绑定，当子组件name改变，父组件也随着更新
四、render函数中的事件修饰符
对于.passive，.capture， .once 这些事件修饰符, Vue 提供了相应的前缀可以用于 on
| 修饰符 | 前缀 |
|---|---|
.passive |
& |
.capture |
! |
.once |
~ |
.capture.once 或.once.capture
|
~! |
on: {
'!click': this.doThisInCapturingMode,
'~keyup': this.doThisOnce,
'~!mouseover': this.doThisOnceInCapturingMode
}
五、JSX语法糖
JSX就是Javascript和XML结合的一种格式。React发明了JSX，利用HTML语法来创建虚拟DOM。当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析。
复杂的render函数书写异常痛苦，这就是为什么会有一个Babel插件，用于在 Vue 中使用 JSX 语法，它可以让我们回到更接近于模板的语法上。
render(h) {
return (
<Child1 level={1}>
<span>Hello</span> world!
</Child1>
)
}
将h作为createElement的别名是 Vue 生态系统中的一个通用惯例，实际上也是 JSX 所要求的。从 Vue 的 Babel 插件的3.4.0版本开始，我们会在以 ES2015 语法声明的含有 JSX 的任何方法和 getter 中 (不是函数或箭头函数中) 自动注入const h = this.$createElement，这样你就可以去掉(h)参数了。对于更早版本的插件，如果h在当前作用域中不可用，应用会抛错。
作者：dingFY
链接：https://www.jianshu.com/p/fd62147ab67c
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
