完善render函数文档

Author: zepang

docs/.vuepress/public/img/new-vue.png

@@ -1,5 +1,34 @@
 # render 函数组件
 
+```html
+<!-- HTML --> 
+<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> 
+  <!-- Javascript --> 
+<script>
+  Vue.component('anchored-heading', { template: '#anchored-heading-template', props: { level: { type: Number,required: true } } })
+</script>
+```
+
+这是我从网上找的一个非常常见的案例，大部分关于渲染函数的文章可能都会使用这个案例来说明在这种场景下使用template并不是最好的选择，首先是代码冗长，其次重复使用了slot，虽然一眼看上去简单明了，但这是不是最简单的写法，下面是更加简洁的render函数的写法：
+
+```html
+<script>
+  Vue.components('anchored-heading', {
+    render: function (h) => {
+      return h(`h${this.level}`, this.slot.default)
+    },
+    props: { level: { type: Number,required: true } }
+  })
+</script>
+```
+
 ## vue组件的渲染过程
 ![](/img/vue-render-1.jpg)
 ![](/lai-ui/img/vue-render-1.jpg)
@@ -37,7 +66,6 @@ module.exports = {
 
 vue实例中有个$mount函数，通常我们在手动挂载组件的时候会用到这个方法，$mount是整个渲染过程的起始点。所谓手动挂载就是去手动让组件渲染，关于$mount的实践我在全局组件章节有提到，之后我们在vue的测试章节也会使用到。
 
-
 ![](/img/vue-render-5.png)
 ![](/lai-ui/img/vue-render-5.png)
 
@@ -129,6 +157,11 @@ new Vue({
 
 render函数默认接受一个h的参数，有的时候别人也会将h换成`createElement`，这样的话函数更加明显。
 
+我们接下来从上边这段代码出发结合部分[源代码](https://github.com/vuejs/vue/blob/2.6/dist/vue.common.dev.js)大概了解一下一个vue的实例化过程：
+
+![](/img/new-vue.png)
+![](/lai-ui/img/new-vue.png)
+
 我们回到上边的`$mount`源码的部分，在编译成render函数之后，之后调用了运行时版本的`$mount`这个函数，我们把这个代码截取出来：
 
 ```js
@@ -284,10 +317,113 @@ Vue.prototype._render = function () {
 
 `第一个参数：String | Object | function `
 
+```js
+Vue.component('custom-element', { 
+  render: function (createElement) { 
+    return createElement('div') 
+  } 
+})
+
+Vue.component('custom-element', { 
+  render: function (createElement) { 
+    return createElement({ template: `<div>Hello Vue!</div>` }) 
+  } 
+})
+
+Vue.component('custom-element', { 
+  render: function (createElement) { 
+    var eleFun = function () { 
+      return { template: `<div>Hello Vue!</div>` } 
+    } 
+    return createElement(eleFun()) 
+  } 
+})
+```
 `第二个参数是一个可选的数据对象`，这个说明还是看文档吧。
 
+```js
+{
+  // 与 `v-bind:class` 的 API 相同，
+  // 接受一个字符串、对象或字符串和对象组成的数组
+  'class': {
+    foo: true,
+    bar: false
+  },
+  // 与 `v-bind:style` 的 API 相同，
+  // 接受一个字符串、对象，或对象组成的数组
+  style: {
+    color: 'red',
+    fontSize: '14px'
+  },
+  // 普通的 HTML 特性
+  attrs: {
+    id: 'foo'
+  },
+  // 组件 prop
+  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
+      }
+    }
+  ],
+  // 作用域插槽的格式为
+  // { name: props => VNode | Array<VNode> }
+  scopedSlots: {
+    default: props => createElement('span', props.text)
+  },
+  // 如果组件是其它组件的子组件，需为插槽指定名称
+  slot: 'name-of-slot',
+  // 其它特殊顶层属性
+  key: 'myKey',
+  ref: 'myRef',
+  // 如果你在渲染函数中给多个元素都应用了相同的 ref 名，
+  // 那么 `$refs.myRef` 会变成一个数组。
+  refInFor: true
+}
+```
+
 `第三个参数是children: String | Array`
 
+```js
+Vue.component('custom-element', { 
+  render: function (createElement) { 
+    var self = this return createElement( 
+      // 第一个参数是一个简单的HTML标签字符 “必选” 
+      'div', 
+      // 第二个参数是一个包含模板相关属性的数据对象 “可选” 
+      { class: { title: true }, style: { border: '1px solid', padding: '10px' } }, 
+      // 第三个参数是传了多个子元素的一个数组 “可选” 
+      [ createElement('h1', 'Hello Vue!'), createElement('p', '开始学习Vue!') ] 
+    ) 
+  } 
+})
+```
+
 关于createElement这个函数是如何解析我们传入的内容，这部分可以在Vue源代码中搜索`createElement`这个函数自行了解，也可以去网上查阅类似专门分析的文章，我之前没有关心这部分内容，所以这里不做讲解。