Virtual DOM-渲染函数render -vue

1、Virtual DOM：

1）构建一个浏览器DOM的拷贝树，包含DOM树的所有拷贝节点VNode，通过创建VNode更新到真实DOM

2）VNode创建：

createElement(tag,{ },[ ])         // tag：元素标签名，{ }：元素属性集合，[ ]：子元素列表

或

createElement(tag,{ },String)  // String： 元素文本

3）同一个地方只能有一个VNode

2、模板<template> 与 render 比较：

1）模板写法更简单，大部分用模板，性能方面其实模板最终也会被编译器译为render函数

2）有些场景用 render会更简单

3、渲染函数render ： 

1）render(createElement) { } 

2）render函数中还可以使用if/else和map来实现模板中的v-if和v-for

《vue.js前端开发技术》 p236

createElement第一个参数使用：

export default {
   render(createElement) {
     return createElement({
         template:'<div></div>'
     });
 　  或者
     return createElement('div');
     或者
     return createElement(function(){
         return {
             template:'<div></div>'
         }
     });
   }
 }

4、应用场景：

1） render: h => h(App);

2） 与slot结合使用

没有使用render时，需要重复多个solt
父组件引用：<x-header :level="2"> 哈哈哈哈 </x-header>
子组件内容：
<template>
   <h1 v-if="level === 1">
     <slot></slot>
   </h1>
   <h2 v-else-if="level === 2">
     <slot></slot>
   </h2>
    <h3 v-else="level === 3">
     <slot></slot>
   </h3>
</template>
<script>
 export default {
   props:['level']
 }
</script>
-----------------------------------------
用render：
父组件引用：<x-header :level="2"> 哈哈哈哈 </x-header>
子组件内容：
<script>
 export default {
   props:['level'],
   render(createElement) {
     let that = this;
     return createElement('h'+ this.level,this.$slots.default)
   }
 }
</script>