Vue render深入开发讲解


Posted in Javascript onApril 13, 2018

简介

在使用Vue进行开发的时候,大多数情况下都是使用template进行开发,使用template简单、方便、快捷,可是有时候需要特殊的场景使用template就不是很适合。因此为了很好使用render函数,我决定深入窥探一下。各位看官如果觉得下面写的有不正确之处还望看官指出,你们与我的互动就是写作的最大动力。

场景

官网描述的场景当我们开始写一个通过 level prop 动态生成 heading 标签的组件,你可能很快想到这样实现:

<script type="text/x-template" id="anchored-heading-template">
 <h1 v-if="level === 1">
  <slot></slot>
 </h1>
 <h2 v-else-if="level === 2">
  <slot></slot>
 </h2>
 <h3 v-else-if="level === 3">
  <slot></slot>
 </h3>
 <h4 v-else-if="level === 4">
  <slot></slot>
 </h4>
 <h5 v-else-if="level === 5">
  <slot></slot>
 </h5>
 <h6 v-else-if="level === 6">
  <slot></slot>
 </h6>
</script>
Vue.component('anchored-heading', {
 template: '#anchored-heading-template',
 props: {
  level: {
   type: Number,
   required: true
  }
 }
})

在这种场景中使用 template 并不是最好的选择:首先代码冗长,为了在不同级别的标题中插入锚点元素,我们需要重复地使用 <slot></slot>。

虽然模板在大多数组件中都非常好用,但是在这里它就不是很简洁的了。那么,我们来尝试使用 render 函数重写上面的例子:

Vue.component('anchored-heading', {
 render: function (createElement) {
  return createElement(
   'h' + this.level,  // tag name 标签名称
   this.$slots.default // 子组件中的阵列
  )
 },
 props: {
  level: {
   type: Number,
   required: true
  }
 }
})

简单清晰很多!简单来说,这样代码精简很多,但是需要非常熟悉 Vue 的实例属性。在这个例子中,你需要知道当你不使用 slot 属性向组件中传递内容时,比如 anchored-heading 中的 Hello world!,这些子元素被存储在组件实例中的 $slots.default中。

createElement参数介绍

接下来你需要熟悉的是如何在 createElement 函数中生成模板。这里是 createElement 接受的参数:

createElement(
 // {String | Object | Function}
 // 一个 HTML 标签字符串,组件选项对象,或者
 // 解析上述任何一种的一个 async 异步函数,必要参数。
 'div',

 // {Object}
 // 一个包含模板相关属性的数据对象
 // 这样,您可以在 template 中使用这些属性。可选参数。
 {
  // (详情见下一节)
 },

 // {String | Array}
 // 子节点 (VNodes),由 `createElement()` 构建而成,
 // 或使用字符串来生成“文本节点”。可选参数。
 [
  '先写一些文字',
  createElement('h1', '一则头条'),
  createElement(MyComponent, {
   props: {
    someProp: 'foobar'
   }
  })
 ]
)

深入 data 对象

有一件事要注意:正如在模板语法中,v-bind:class 和 v-bind:style ,会被特别对待一样,在 VNode 数据对象中,下列属性名是级别最高的字段。该对象也允许你绑定普通的 HTML 特性,就像 DOM 属性一样,比如 innerHTML (这会取代 v-html 指令)。

{
 // 和`v-bind:class`一样的 API
 'class': {
  foo: true,
  bar: false
 },
 // 和`v-bind:style`一样的 API
 style: {
  color: 'red',
  fontSize: '14px'
 },
 // 正常的 HTML 特性
 attrs: {
  id: 'foo'
 },
 // 组件 props
 props: {
  myProp: 'bar'
 },
 // DOM 属性
 domProps: {
  innerHTML: 'baz'
 },
 // 事件监听器基于 `on`
 // 所以不再支持如 `v-on:keyup.enter` 修饰器
 // 需要手动匹配 keyCode。
 on: {
  click: this.clickHandler
 },
 // 仅对于组件,用于监听原生事件,而不是组件内部使用
 // `vm.$emit` 触发的事件。
 nativeOn: {
  click: this.nativeClickHandler
 },
 // 自定义指令。注意,你无法对 `binding` 中的 `oldValue`
 // 赋值,因为 Vue 已经自动为你进行了同步。
 directives: [
  {
   name: 'my-custom-directive',
   value: '2',
   expression: '1 + 1',
   arg: 'foo',
   modifiers: {
    bar: true
   }
  }
 ],
 // Scoped slots in the form of
 // { name: props => VNode | Array<VNode> }
 scopedSlots: {
  default: props => createElement('span', props.text)
 },
 // 如果组件是其他组件的子组件,需为插槽指定名称
 slot: 'name-of-slot',
 // 其他特殊顶层属性
 key: 'myKey',
 ref: 'myRef'
}

条件渲染

既然熟读以上api接下来咱们就来点实战。

之前这样写

//HTML
<div id="app">
  <div v-if="isShow">我被你发现啦!!!</div>
</div>
<vv-isshow :show="isShow"></vv-isshow>
//js
//组件形式      
Vue.component('vv-isshow', {
  props:['show'],
  template:'<div v-if="show">我被你发现啦2!!!</div>',
});
var vm = new Vue({
  el: "#app",
  data: {
    isShow:true
  }
});

render这样写

//HTML
<div id="app">
  <vv-isshow :show="isShow"><slot>我被你发现啦3!!!</slot></vv-isshow>
</div>
//js
//组件形式      
Vue.component('vv-isshow', {
  props:{
    show:{
      type: Boolean,
      default: true
    }
  },
  render:function(h){  
    if(this.show ) return h('div',this.$slots.default);
  },
});
var vm = new Vue({
  el: "#app",
  data: {
    isShow:true
  }
});

列表渲染

之前是这样写的,而且v-for 时template内必须被一个标签包裹

//HTML
<div id="app">
  <vv-aside v-bind:list="list"></vv-aside>
</div>
//js
//组件形式      
Vue.component('vv-aside', {
  props:['list'],
  methods:{
    handelClick(item){
      console.log(item);
    }
  },
  template:'<div>\
         <div v-for="item in list" @click="handelClick(item)" :class="{odd:item.odd}">{{item.txt}}</div>\
       </div>',
  //template:'<div v-for="item in list" @click="handelClick(item)" :class="{odd:item.odd}">{{item.txt}}</div>',错误     
});
var vm = new Vue({
  el: "#app",
  data: {
    list: [{
      id: 1,
      txt: 'javaScript',
      odd: true
    }, {
      id: 2,
      txt: 'Vue',
      odd: false
    }, {
      id: 3,
      txt: 'React',
      odd: true
    }]
  }
});

render这样写

//HTML
<div id="app">
  <vv-aside v-bind:list="list"></vv-aside>
</div>
//js
//侧边栏
Vue.component('vv-aside', {
  render: function(h) {
    var _this = this,
      ayy = this.list.map((v) => {
        return h('div', {
          'class': {
            odd: v.odd
          },
          attrs: {
            title: v.txt
          },
          on: {
            click: function() {
              return _this.handelClick(v);
            }
          }
        }, v.txt);
      });
    return h('div', ayy);

  },
  props: {
    list: {
      type: Array,
      default: () => {
        return this.list || [];
      }
    }
  },
  methods: {
    handelClick: function(item) {
      console.log(item, "item");
    }
  }
});
var vm = new Vue({
  el: "#app",
  data: {
    list: [{
      id: 1,
      txt: 'javaScript',
      odd: true
    }, {
      id: 2,
      txt: 'Vue',
      odd: false
    }, {
      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 的完全编程的能力,在性能上是占用绝对的优势,小编只是对它进行剖析。至于实际项目你选择那种方式进行渲染依旧需要根据你的项目以及实际情况而定。

Javascript 相关文章推荐
JavaScript实现动态增加文件域表单
Feb 12 Javascript
jQuery 注意事项 与原因分析
Apr 24 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
Jun 24 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
Mar 21 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
Jul 28 Javascript
jQuery源码分析之init的详细介绍
Feb 13 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
Sep 04 Javascript
微信小程序实现tab左右切换效果
Nov 15 Javascript
浅谈vux之x-input使用以及源码解读
Nov 04 Javascript
vuex + keep-alive实现tab标签页面缓存功能
Oct 17 Javascript
Vue2.0 ES6语法降级ES5的操作
Oct 30 Javascript
TS 类型收窄教程示例详解
Sep 23 Javascript
用vue2.0实现点击选中active其他选项互斥的效果
Apr 12 #Javascript
vue组件的写法汇总
Apr 12 #Javascript
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 #jQuery
基于vue-simplemde实现图片拖拽、粘贴功能
Apr 12 #Javascript
基于angular6.0实现的一个组件懒加载功能示例
Apr 12 #Javascript
JavaScript实现简单的文本逐字打印效果示例
Apr 12 #Javascript
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 #jQuery
You might like
php自动适应范围的分页代码
2008/08/05 PHP
详解WordPress中的头像缓存和代理中的缓存更新方法
2016/03/01 PHP
PHP实现的DES加密解密实例代码
2016/04/06 PHP
PHP实现移除数组中为空或为某值元素的方法
2017/01/07 PHP
地址栏上的一段语句,改变页面的风格。(教程)
2008/04/02 Javascript
基于jQuery的自动完成插件
2011/02/03 Javascript
javascript编码的几个方法详细介绍
2013/01/06 Javascript
Jquery对select的增、删、改、查操作
2015/02/06 Javascript
javascript实时显示北京时间的方法
2015/03/12 Javascript
JavaScript实现MIPS乘法模拟的方法
2015/04/17 Javascript
jQuery往textarea中光标所在位置插入文本的方法
2015/06/26 Javascript
AngularJs基本特性解析(一)
2016/07/21 Javascript
JSON与js对象序列化实例详解
2017/03/16 Javascript
js随机生成一个验证码
2017/06/01 Javascript
vue-cli之router基本使用方法详解
2017/10/17 Javascript
详解node.js中的npm和webpack配置方法
2018/01/21 Javascript
Vue中div contenteditable 的光标定位方法
2018/08/25 Javascript
解决layui的input独占一行的问题
2019/09/10 Javascript
基于ts的动态接口数据配置的详解
2019/12/18 Javascript
vue-cli4项目开启eslint保存时自动格式问题
2020/07/13 Javascript
js和jquery判断数据类型的4种方法总结
2020/08/28 jQuery
Python使用wxPython实现计算器
2018/01/30 Python
python保存网页图片到本地的方法
2018/07/24 Python
ansible动态Inventory主机清单配置遇到的坑
2020/01/19 Python
Java多线程实现四种方式原理详解
2020/06/02 Python
2020年10款优秀的Python第三方库,看看有你中意的吗?
2021/01/12 Python
Html5实现二维码扫描并解析
2016/01/20 HTML / CSS
friso美素佳儿官方海外旗舰店:荷兰原产原罐
2017/07/03 全球购物
应届实习生的自我评价范文
2014/01/05 职场文书
机关班子查摆问题及整改措施
2014/10/28 职场文书
中标通知书
2015/04/17 职场文书
赤壁观后感(2)
2015/06/15 职场文书
运动员加油词
2015/07/18 职场文书
Python源码解析之List
2021/05/21 Python
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
2021/08/23 HTML / CSS
vue修饰符.capture和.self的区别
2022/04/22 Vue.js