Vue render深刻窥探之谜

时间 2019-11-16

标签 vue render 深刻窥探繁體版

原文原文链接

简介

在使用Vue进行开发的时候，大多数状况下都是使用template进行开发，使用template简单、方便、快捷，但是有时候须要特殊的场景使用template就不是很适合。所以为了很好使用render函数，我决定深刻窥探一下。各位看官若是以为下面写的有不正确之处还望看官指出，大家与个人互动就是写做的最大动力。首发于：Vue render深刻窥探之谜html

场景

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

<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 并非最好的选择：首先代码冗长，为了在不一样级别的标题中插入锚点元素，咱们须要重复地使用。express

虽然模板在大多数组件中都很是好用，可是在这里它就不是很简洁的了。那么，咱们来尝试使用 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中。api

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 指令)。bash

{
  // 和`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接下来我们就来点实战。以前这样写app

//HTML
<div id="app">
   <vv-isshow :show="isShow"></vv-isshow>
</div>

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

render这样写dom

//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内必须被一个标签包裹ssh

//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 的彻底编程的能力，在性能上是占用绝对的优点，小编只是对它进行剖析。至于实际项目你选择那种方式进行渲染依旧须要根据你的项目以及实际状况而定。