渲染函数&JSX

1.基础

render函数提供javascript完全编程能力

<!--h1>Hello world!</h1-->
<my-header level="1">Hello world!</my-header>
<!--h2>Hello world!</h2-->
<my-header level="2">Hello world!</my-header>

Vue.component('myHeader', {
    props: ["level"],
    render: function (createElement) {
        return createElement(
                //html
                'h' + this.level,
                //slot
                this.$slots.default
        );
    }
});

2.节点，树以及虚拟DOM

虚拟DOM：vue通过建立一个虚拟DOM对真实DOM发生的变化保持追踪，createElement返回虚拟节点(VNode)

<!--<div id="foo" class="foo" style="color: red; font-size: 14px;">文本<h1>2</h1></div>-->
<my-component></my-component>

Vue.component('myComponent', {
    render: function (createElement) {
        return createElement(
                // {String | Object | Function} 必须
                'div',
                // {Object} 可选 包含模板相关属性的数据对象
                {
                    'class': {
                        foo: true,
                        bar: false
                    },
                    style: {
                        color: 'red',
                        fontSize: '14px'
                    },
                    attrs: {
                        id: 'foo'
                    },
                    props: {
                        myProp: 'bar'
                    }
//                  domProps: {
//                       innerHTML: 'baz'
//                  }
                },
                // {String | Array} 子节点(VNodes)
                [
                    '文本',
                    createElement('h1', '2')
//                  createElement(myComponent, {
//                       props: {
//                           someProp: 'foobar'
//                       }
//                   })
                ]
        );
    }
});

组件树中所有VNodes必须唯一

3.JSX

Vue支持JSX语法(通过Babel插件编译)

new Vue({
    el:'#demo',
    render (h){
        return (
            <div></div>
        )
    }
});

h作为createElement别名是Vue惯例

4.函数式组件

标记组件为functional，意味它是无状态(没有data)，无实例(没有this上下文)

Vue模板实际编译成了render函数