Vue 之 render 函数

一、render 函数初步了解

在使用 Vue 组件的过程中，当 template 中的内容较多时，可以在外部用 template 标签来定义，然后在组件中用 id 引入。但 template 下只允许有一个子节点，如需同时设置多个子节点，可用 div 将它们包裹起来。例：


    
        春暖花开

二、render 函数的参数

使用组件时，因为 template 中的内容会先在页面中渲染，如上例中，每个 h 标签都会被渲染，且当把模板直接写在 template 中时，会导致代码比较冗长。因此 Vue 为我们提供了 render 函数来解决这个问题。


    
        春暖花开

1. render 函数的第一个参数

在 render 函数的后面必须是 createElement 方法，createElement 的类型是 function。
render 函数的第一个参数是必选的，类型可以是 String、Object 或 Function。

String —— html标签
Object —— 一个含有数据选项的对象
Function —— 方法返回含有数据选项的对象

2. render 函数的第二个参数

render 函数的第二个参数是可选的，这个参数是数据对象，它的类型只能是 Object。

3. render 函数的第三个参数

render 函数的第三个参数也是可选的，类型可以是 String 或 Array，它是作为我们构件函数的子节点来使用的。

三、this.$slots 在 render 函数中的应用

render 函数的第三个参数存储的是 VNODE（虚拟节点）。
之前我们直接用 html 控制页面时，用 JS 来操作 DOM 树存在一些缺陷，即每次操作 DOM 所有的 html 都会进行重绘。现在由于 Vue 的数据双向绑定， Vue 检测到哪个虚拟节点发生变化，就直接更新这个 VNODE，因此效率比直接操作 DOM 元素高很多。


    
        君不见黄河之水天上来
        奔流到海不复回
        我是标题
        我是正文最后一段

var header = this.$slots.header 返回的内容就是含有 VNODE 的数组，
createElement('header', header) 返回的就是 VNODE。

四、在 render 函数中使用 props 传递数据

例：实现点击按钮切换图片：


     {{show}}

五、v-model 在 render 函数中的使用

例：将在输入框输入的内容实时显示在下方：


    
    
{{name}}

六、作用域插槽在 render 函数中的使用

作用域插槽即子组件向父组件的插槽中传递数据的一个过程，在 render 函数中我们使用 this.$scopedSlots.default() 来通过作用域插槽向父组件插槽中传递数据，传递的内容就是括号里面的对象。

七、函数化组件的应用

functional: true 表示该组件无状态无实例，无实例即组件内部没有 this 的概念，此时我们想要拿到从外部传递过来的数据，可以通过 context 进行读取。context 即上下文对象，读取父组件的内容可以用 context.parent.xxx。

使用 context 的转变：
this.text —— context.props.text
this.$slots.default —— context.children