關於Vue的Render的講解

首先我們傳統的對於DOM的操作基本上都是通過js直接的獲取一個節點，然后對DOM進行增加或者是刪除。而Vue的Render這個函數是通過js虛擬的添加dom節點，然后虛擬的添加到html節點上去。

算了感念的東西不知道是怎么回事，大概意思就是 用Render函數的話比正常我們通過傳統方式要節省時間和消耗就可以了。下面介紹用法。本人也不明白怎么回事，反正性能方面要比傳統的方式要好，如果想要詳細的查看的話，自己去百度vue的官方的文檔。

Render最經典的就是createElement方法。下面介紹。

createElement 構成了Vue Virtual Dom的魔板，它有三個參數：

createElement (
    // {String | Object | Function}
    // 一個  HTMl標簽，轉件選項，或者一個函數
    // 必須return 上述中最少一個
    'div',
    // {Object}
    // 一個對應屬性的數據對象，可選
    // 您可以在template中使用
    {
    // 稍后詳細的介紹   
    },
    // {String | Array}
    // 子節點（vnodes），可選
    [
    createElement('h1','hello world'),
    createElement(MyComponent,{
        props:{
            someProp : 'foo'
        }
    }),
    'bar'
    ]
)

下面粘貼一個我的事例

props:{
    level:{
        type:Number,
        required:true
    },
    title:{
        type:String,
        default:'url傳參'
    }
},
render:function(createElement) {
    return createElement(
        'h' + this.level,
        [
            createElement(
                'a',
                {
                    domProps:{
                        href: '#' + this.title
                    }
                },
                this.$slots.default
            )
        ]
    )
}

效果為：

這里用到了一個組件，url-render這個組件，這是自定義的組件，不要想多了。