深入理解vue Render函数

最近在学习vue，正好今日留个笔记，我自己还在摸索学习中，现整理出来以作记录。

会使用基本的Render函数后，就会想，这怎么用 v-for/v-if/v-model;我写个vue Render函数进阶

首先是v-if 的转化使用全局组件的v 值决定组件渲染的状态，对实例中传递的props的“nnum”值得控制可以自如的切换两种状态显示。这样就是和v-if 一样使用组件了

<div id="app">     <mycom :v="nnum">       <div slot="slot2">hahahhah</div>       <div slot="slot1">ggggggggggggg</div>     </mycom>   </div>   <script>     Vue.component('mycom',{       render:function(createElement){         var s=this;         if(this.v==1){           return createElement('div',            {             domProps:{innerHTML:'component n='+this.n}            })         }else{            return createElement('div',             [this.$slots.slot1,this.$slots.slot2])         }       },       props:{         v:{           type:Number,           default:0         },         n:{           default:'hello'         }       }     });     var app=new Vue({       el:'#app',       data:{         nnum:1       }     }) 

v-for 的使用需要需要使用到map

<div id="app">     <mycom :v="nnum" :ar="arr">       <div slot="slot2">hahahhah</div>       <div slot="slot1">ggggggggggggg</div>     </mycom>   </div>   <script>     Vue.component('mycom',{       render:function(createElement){         if(this.v==1){           return createElement('div',               this.ar.map(function(item){                 return createElement('li',                   {                     domProps:{                       innerHTML:item                     }                   })               })            )         }else{            return createElement('div',             [this.$slots.slot1,this.$slots.slot2])         }       },       props:{         v:{           type:Number,           default:0         },         n:{           default:'hello'         },         ar:{           type:Array,           default:function(){ return [1,23,4,5,6,55,65]}         }        }     });     var app=new Vue({       el:'#app',       data:{         nnum:1,         arr:[1,2,3,4,5,6,7,8]       }     })   </script>   </body> 

只有map方法才能检测改变，其他的方法不能根据数据的改变能改变相应的状态下的例子中的arr数组   依靠 apply的方法来实现的就不能够检测this.ar 的变换来重新计算

return createElement('div',              Array.apply(null,this.ar.map(function(item){                return createElement('li',                  {                    domProps:{                      innerHTML:'item'                    }                  })              }))