在 Vue 中创建组件有三种方式：
template- render()函数
jsx
大部分情况下我们都会使用template来创建html，开发体验会更好，但并不是每个时候使用它来创建 html 都是最佳的，所以官方提供了接近原生构建html的render()函数，让开发者能够依据自己的情况选择更好的构建方式。
有些同学会问，到底何时选择template或者render()，我的回答是，你应该两者都得掌握，template 有它的局限性，render()函数可以是对它的补充，各有优缺点，你把他们使用在正确的地方，就能更优雅、简便的解决你的问题。每一个解决方案都不可能解决所有问题，你应该去掌握尽可能多的不同解决方案。
下面来看在浏览器上显示一段简单的文本，它们分别是如何实现的：
- template
//tem.vue
<template>
<div>
<h1>我是标题一</h1>
</div>
</template>
<script>
export default {
data() {
return {}
}
}
</script>
- render()
要实现上面一模一样的效果，使用 render 是这样的：
//ren.vue
<script>
export default {
render: function(createElement) {
return createElement('h1', '我是标题一')
}
}
</script>
在 ren.vue 文件中，我们给对象添加了 render 函数，render 接收一个参数 createElement，该参数也是一个函数，它能够把 html 元素渲染到界面上，它总共接收三个参数，第一个参数为标签名(<h1></h1>)，第二个参数为数据对象（可选，稍后会说），第三个参数为子节点(我是标题一)，要么文本要么是存储着一个或一个以上的子节点数组，在这个例子中普通文本也是在 html 中也是一个节点，它为 h1 的文本内容。
在浏览器中被渲染出来是这样的：
<h1>我是标题一</h1>
render 函数创建多个子节点
实现下面的效果：
- li-1
- li-2
- li-3
我们这次需要用的是一个数组，代码如下：
<script>
export default {
render: function(createElement) {
return createElement('ul', [
createElement('li', 'li-1'),
createElement('li', 'li-2'),
createElement('li', 'li-3')
])
}
}
</script>
上面的例子非常笨重，写了 3 个createElement方法，我们来简化一下：
<script>
export default {
data() {
return {
list: ['li-1', 'li-2', 'li-3']
}
},
render: function(createElement) {
return createElement(
'ul',
this.list.map(_ => {
return createElement('li', _)
})
)
}
}
</script>
可以看到，在 render 函数里面我们一样可以使用js，再看个例子：
<script>
export default {
data() {
return {
parent: 'ul',
son: 'li',
list: ['li-1', 'li-2', 'li-3']
}
},
render: function(createElement) {
return createElement(
this.parent,
this.list.map(_ => {
return createElement(this.son, _)
})
)
}
}
</script>
看到这里你基本上会使用它来创建你想要的html了，下面我们来看看上面忽略了的第二个参数。
数据对象
数据对象，它用来操作html元素的，它拥有template中大多数的功能，比如 v-bind、on、props、插槽、指令等都可以在这里面配置。更多的配置信息可查阅官方文档，在这里只做抛砖引玉的工作。
下面的例子，使用了 v-bind、props,把文字设置为红色，斜体，Hello是从props中取到的：
效果图
//ren.vue
<script>
export default {
props: {
greet: {
type: String,
default: ''
}
},
render: function(createElement) {
return createElement(
'h1',
{
class: {
title: true
},
style: {
color: 'red'
}
},
this.greet + '我是标题一'
)
}
}
</script>
<style scoped>
.title {
font-style: italic;
}
</style>
//app.vue 在父组件中
<template>
<div>
<Ren greet="Hello " />
</div>
</template>
<script>
import Ren from '@/components/test/ren' //这是我的路径不要照搬
export default {
components: {
Ren
}
}
</script>
总结
render渲染函数的使用就讲到这里了，常常使用，你就能知道什么样的场景下更适合使用它了，光看不练假把式，动手掌握它吧。
网友评论