Vue随笔：Render()函数&JSX

1. 前言

1.1 HTML DOM树与和Vue的virtual DOM

• 我们知道，浏览器在解析HTML文件时，会将HTML标签解析成一个DOM树（tree of DOM nodes） 。通过结构化的组织节点元素，浏览器可以很方便的跟踪整个页面的情况，但频繁的局部更新节点代价很高。
• 为了更高效的渲染HTML，Vue.js和React以及Ember.js一样，根据真实DOM的映射构建对应的JS对象，也就是虚拟DOM（Virtual DOM）。在数据和DOM之间创建一个缓冲地带，不用每次都更新DOM，详情见下面React Virtual DOM的示意图：

React Virtual DOM示意图

1.2 Vue组件中的Slot

• Vue.js的Slot机制是指，父组件在嵌套使用子组件时，可以传递HTML代码片段给子组件渲染，但完全不用关心这段HTML应该放在子组件什么位置。
• 是不是很懵逼，没看懂？举个例子吧：

  

    

        vue.js Render()函数&JSX
    
    
    分享到新浪微博
    
    分享到微信

• 我们开始用Vvue.jsSlot机制来实现

1. 定义article.vue组件

    

        

            {{title}}
        
        
        
    

2. main.vue使用标题组件

• 再说slot，顾名思义，Vue.js通过给程序设置一个类似插槽/投币口的机制，实现内容分发：

1. 子组件定义好插槽位置；
2. 父组件可以插入任何，符合Slot规范的代码片段；

• 如此一来，既实现了程序的解耦，使用又很方便。
• 当然啦，Vue.js还支持具名插槽，也就是通过定义key名来区分不同的slot代码片段，这里就不展开讨论了。

2. render()函数

2.1 为什么要使用render()函数

• 使用过Vue.js的朋友都知道，好像大部分时间都在使用template的方式来创建HTML，因为vue提供了v-if、v-for等一系列的控制指令，让我们开发体验轻松又愉悦。
• 但除此之外，其实Vue.js还提供了render()函数来创建HTML。让我们可以通过JS逻辑代码，更灵活的创建HTML。
• 如同vue官网的例子所说：在封装文章标题的