深入理解vue Render函数

网络编程 2025/10/25 佚名

3 2 1

最近在学习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>

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

vue,Render函数

标签：

vue,Render函数

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

白云城资源网 Copyright www.dyhadc.com

评论“深入理解vue Render函数”

深入理解vue Render函数

暂无“深入理解vue Render函数”评论...

www.dyhadc.com 白云城资源网

129,905影音资源

244,626技术资源

111,817软件资源

578,645站长资源

深入理解vue Render函数

vue,Render函数

解决vue router使用 history 模式刷新后404问题

Vue AST源码解析第一篇

评论“深入理解vue Render函数”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

深入理解vue Render函数

vue,Render函数

解决vue router使用 history 模式刷新后404问题

Vue AST源码解析第一篇

评论“深入理解vue Render函数”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存