摘要：用函数化组件展示一个根据数据智能选择不同组件的场景函数化组件根据数据选择组件函数化组件根据数据选择组件函数化组件主要适用于以下两个场景程序化地在多个组件中选择一个。
函数化组件
Vue提供了一个functional的布尔值选项，设置为true可以使组件无状态和无实例，也就是没有data和this上下文。这样用render函数返回虚拟节点可以更容易渲染，因为函数化组件只是一个函数，渲染开销要小很多。
使用函数化组件时，Render函数提供了第二个参数context来提供临时上下文。组件需要的data、prop、slots、children、parent都是通过这个上下文来传递。比如this.level要改写为context.props.level，this.$slots.default改变为context.children。
用函数化组件展示一个根据数据智能选择不同组件的场景：
See the Pen Vue-函数化组件-根据数据选择组件 by whjin (@whjin) on CodePen.
JSX写法：
See the Pen Vue-JSX by whjin (@whjin) on CodePen.
发布一条留言，需要的数据有昵称和留言内容，发布操作应该在根实例app内完成。留言列表的数据也是从app获取。
数组list存储了所有的留言内容，通过函数handleSend给list添加一项留言数据，添加成后把texrarea文本框置空。
Render函数内的节点使用v-model：动态绑定value，并且监听input事件，把输入的内容通过$emit("input")派发给父组件。
列表数据list为空时，渲染一个“列表为空”的信息提示节点；不为空时，每个list-item赢包含昵称、留言内容和回复按钮3个子节点。
this.list.forEach相当于template里的v-for指令，遍历出每条留言。句柄handleReply直接向父组件派发一个事件reply，父组件(app)接收后，将当前list-item的昵称提取，并设置到v-textarea内。
See the Pen Vue-留言列表 by whjin (@whjin) on CodePen.