Vue render深入开发讲解

id: 3,
txt: 'React',
odd: true
}] }
});

v-model

之前的写法

//HTML
<div id="app">
  <vv-models v-model="txt" :txt="txt"></vv-models>
</div>
//js
//input
Vue.component('vv-models', {
  props: ['txt'],
  template: '<div>
         <p>看官你输入的是:{{txtcout}}</p>
         <input v-model="txtcout" type="text" />
       </div>',
  computed: {
    txtcout:{
      get(){
        return this.txt;
      },
      set(val){
        this.$emit('input', val);
      }
    }
  }
});
var vm = new Vue({
  el: "#app",
  data: {
    txt: '',
  }
});

render这样写

//HTML
<div id="app">
  <vv-models v-model="txt" :txt="txt"></vv-models>
</div>
//js
//input
Vue.component('vv-models', {
  props: {
    txt: {
      type: String,
      default: ''
    }
  },
  render: function(h) {
    var self=this;
    return h('div',[h('p','你猜我输入的是啥：'+this.txt),h('input',{
      on:{
        input(event){
          self.$emit('input', event.target.value);
        }
      }
    })] );
  },
});
var vm = new Vue({
  el: "#app",
  data: {
    txt: '',
  }
});

总结

render函数使用的是JavaScript 的完全编程的能力，在性能上是占用绝对的优势，小编只是对它进行剖析。至于实际项目你选择那种方式进行渲染依旧需要根据你的项目以及实际情况而定。