Vue.js入门 0xD Render函数（3）函数化组件、JSX

函数化组件 

    Vue.js提供了一个functional的布尔值选项，设置为true可以使组件无状态和无实例，也就是没有data和this上下文。这样用render函数返回虚拟节点可以更容易渲染，因为函数化组件只是一个函数，渲染开销要小很多。

    
        
        
    
    
        

            
            切换为图片组件
            切换为视频组件
            切换为文本组件
        
        
        
    

     函数化组件主要适用于以下两个场景：
    • 程序化地在多个组件 中 选择一个．
    • 在将 children, props, data 传递给子组件之前操作它们． 

JSX

     为了让Render函数更好地书写和阅读，Vue.js提供了插件babel-plugin-transform-vue-jsx来支持JSX语法。
    JSX是一种看起来像HTML，但实际是JavaScript的语法扩展，它用更接近DOM结构的形式来描述一个组件的UI和状态信息，最早在React.js里大量应用。

    代码无法直接运行 ， 需要在 webpack 里配置插件 babel-plugin-transform-vue才SX 编译后才可以。