欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

深入理解vue Render函数

程序员文章站 2023-02-24 11:08:25
最近在学习vue,正好今日留个笔记,我自己还在摸索学习中,现整理出来以作记录。 会使用基本的render函数后,就会想,这怎么用 v-for/v-if/v-model...

最近在学习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'
                    }
                  })
              }))
<body> 
  <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', 
              array.apply(null,this.ar.map(function(item){ 
                return createelement('li', 
                  { 
                    domprops:{ 
                      innerhtml:'item' 
                    } 
                  }) 
              })) 
            ) 
        } 
      }, 
      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:2, 
        arr:[1,2,3,4,5,6,7,8] 
      } 
    }) 
  </script> 
  </body> 

v-model 使用domprops来实现双向绑定

使用对value:赋值可以将数据绑定给 input 的默认值,但是对input 的修改并不能传递给vue  这涉及到组件的通信问题,
所以想实现双向绑定,只能自己写事件来出发  vue shu'j的传递

domprops:{value:self.v }
<body> 
  <div id="app"> 
    <mycom :v="nnum" :ar="arr"> 
      <div slot="slot2">hahahhah</div> 
      <div slot="slot1">ggggggggggggg</div> 
    </mycom> 
    <div>{{nnum}}</div> 
  </div> 
  <script> 
    vue.component('mycom',{ 
      render:function(createelement){ 
        var self=this; 
        var inp=createelement('input', 
                  { 
                    domprops:{ 
                      value:self.v 
                    } 
                  }); 
          return createelement('div',[inp]) 
 
        }, 
      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:100, 
        arr:[1,2,3,4,5,6,7,8] 
      } 
    }) 
  </script> 
  </body> 

通过input触发undatevalue来更新 app中的nnum 值(差点没转过弯来,render过于复杂后,真的是自己找罪受)

<div id="app"> 
    <mycom :v="nnum" :ar="arr" @input="updatevalue"> 
 
    </mycom> 
    <div>{{nnum}}</div> 
  </div> 
  <script> 
    vue.component('mycom',{ 
      render:function(createelement){ 
        var self=this; 
        var inp=createelement('input', 
                  { 
                    domprops:{ 
                      value:self.v 
                    }, 
                    on:{ 
                     input:function(event){ 
                      self.$emit('input',event.target.value) 
 
                     } 
                    } 
                  }); 
          return createelement('div',[inp]) 
 
        }, 
      props:{ 
        v:{ 
          type:number, 
          default:0 
        }, 
        n:{ 
          default:'hello' 
        }, 
        ar:{ 
          type:array, 
          default:function(){ return [1,23,4,5,6,55,65]} 
        } 
 
      }, 
      methods:{ 
        update:function(){ 
 
        } 
      } 
    }); 
    var app=new vue({ 
      el:'#app', 
      data:{ 
        nnum:100, 
        arr:[1,2,3,4,5,6,7,8] 
      }, 
      methods:{ 
        updatevalue:function(value){ 
          this.nnum=parsefloat(value); 
        } 
      } 
    }) 
 
  </script> 
  </body> 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。