Vue全家桶实践（五）---渲染函数&JSX

最近公司要重写运营管理系统，不想再维护之前的backbone了，赶紧要求前端整个重写。重开新坑，用了两周多撸出了第一版，收获很大。在实践中学习永远都是最高效的。趁热把学到的东西都记录总结下来，也算简单梳理一下思路。

相关博客：

1. Vue全家桶实践（一）—vue-cli
2. Vue全家桶实践（二）—iView
3. Vue全家桶实践（三）—axios
4. Vue全家桶实践（四）—vue-router
5. Vue全家桶实践（五）—渲染函数&JSX
6. Vue全家桶实践（六）—自定义指令（directive）

渲染函数&JSX

参考资料：文档

使用vue进行开发的时候，绝大部分情况下直接使用template来创建html，但在某些情况下，使用js会更有效。官方文档中就举了生成h标签的例子。
html的DOM树种，每个元素都是一个节点，比如html标签，文本，注释等。
Vue通过建立虚拟DOM，对真实DOM的变化进行追踪，通过createElement函数，返回一个虚拟节点（VNode），它包含的信息会告诉Vue页面上需要渲染出什么元素。而虚拟DOM就是由这些VNode组成的树。
实际上，我们在vue单文件组件中写的template，也会先被解析为VNode进行操作，然后再变成html在浏览器中渲染。

createElement参数

官网上有详细的createElement用例。使用js替代template时，v-if使用if/else代替，v-for使用map代替即可。而v-model就要自己实现。
但是可以看到，实际上要使用createElement函数来生成一个VNode是很麻烦的，比如：

//template
<div id="container" @click="clickHandler"