编程 Javascript

深入理解vue Render函数

Posted in Javascript onJuly 19, 2017

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

- Author -

v折耳

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javaScript对象和属性的创建方法

Jan 15 Javascript

JS Loading功能的简单实现

Nov 29 Javascript

捕获和分析JavaScript Error的方法

Mar 25 Javascript

jquery的checkbox,radio,select等方法小结

Aug 30 Javascript

Bootstrap实现圆角、圆形头像和响应式图片

Dec 14 Javascript

JS实现的驼峰式和连字符式转换功能分析

Dec 21 Javascript

jQuery实现验证码功能

Mar 17 Javascript

create-react-app构建项目慢的解决方法

Mar 14 Javascript

vue 微信授权登录解决方案

Apr 10 Javascript

如何使用electron-builder及electron-updater给项目配置自动更新

Dec 24 Javascript

layui 阻止图片上传的实例(before方法)

Sep 26 Javascript

Javascript 关于基本类型和引用类型的个人理解

Nov 01 Javascript

Vue AST源码解析第一篇

Jul 19 #Javascript

Vue之Watcher源码解析（1）

Jul 19 #Javascript

angular.js + require.js构建模块化单页面应用的方法步骤

Jul 19 #Javascript

Vue学习笔记进阶篇之多元素及多组件过渡

Jul 19 #Javascript

vue中的非父子间的通讯问题简单的实例代码

Jul 19 #Javascript

Vue之Watcher源码解析（2）

Jul 19 #Javascript

Angular.js项目中使用gulp实现自动化构建以及压缩打包详解

Jul 19 #Javascript