Vue-render 函数

vue文件中的template内部的html 在编译的时候发生了什么？

比如

<template>
<div>
    <h1>我是首页</h1>
</div>
</template>

template里面使用的模板是HTML语法组件，其实在vue中都会被编译为render函数，因为vue中采用的是虚拟的dom进行页面组件，优点是优化页面的加载重绘性能

render函数基本使用

例：创建Render.vue组件，注意如果要使用render函数编译模板，一定不要有<template></template>

Render.vue

<script>
export default {
    render(createElement) {
        return createElement('h1', {}, '你好')
    }
}
</script>

<style scoped>

</style>

app.vue

<template>
<div>
    <Render></Render>
</div>
</template>
<script>
import Render from './views/Render'
export default {
    components: {
        Render
    }
}
</script>
<style  scoped></style>

render函数的参数

1、动态参数

例：通过render函数动态的修改当前组件的节点渲染

componentsType.vue

<script>
export default {
    props: {
        tag: {
            type: String,
            required: true
        },
        data: {
            type: String
        }
    },
    render(createElement) {
        return createElement(this.tag, {}, this.data)
    }
}
</script>

props有两个值，第一个值为tag，指的是传入的节点名称

第二个值data，就是要渲染的节点内容

App.vue

<componentsType :tag="'p'" :data="'我是一个通过render函数插入的p节点'"></componentsType>

这样做有一个好处，就是如果我们的节点是一个ui元素名称，或者是自定义组件，都会被识别

比如我们引入的是element-ui

<componentsType :tag="'el-button'" :data="'我是button'"></componentsType>

2、组件做为参数进行渲染

创建组件 sonCom'.vue

render.vue

<script>
import sonCom from './sonCom'
export default {
    props: {
        tag: {
            type: String,
            required: true
        },
        data: {
            type: String
        }
    },
    render(createElement) {
        return createElement(sonCom, {}, this.data)
    }
}
</script>

createdElement函数一共有三个参数，第一个参数我们已经知道如何使用，第二个参数其实就是对当前的节点（组件）的属性描述

3、第二个参数

render(createElement) {
        return createElement(this.tag, {
            class: 'color-red'
        }, this.data)
   }

设置class、style、value.......等等

4、第三个参数

最重要的是第三个参数，第三个参数如果不是数组，则表示渲染内容，否则，如果设置了数组，内部必须是createElement函数，代表的是当前的元素再进行嵌套

render(createElement) {
    return createElement(this.tag, {
        // class: 'color-red',
        // Dom.prototype
        domProps: {
            className: 'color-red',
        }
    }, [createElement('p', [createElement('span', '我是p元素内部的span元素')]), createElement('p', '我是p元素')])
}

真正createElement方法的核心其实就是第三个参数，因为这个参数最大的魔力就是能够嵌套，由于之前我们能够通过第二个参数设置当前元素的相关属性，所以如果一旦第三个参数实现了嵌套元素的功能，此时我们就可以实现通过js设置HTML模板

render函数解析模板

render函数还有一个最大的功能就是解析模板

render(createElement) {
        return (
            <div>
                <h2>四大名著</h2>
                <ul>
                    <li>西游记</li>
                    <li>红楼梦</li>
                    <li>水浒传</li>
                    <li>三国演义</li>
                </ul>
            </div>
        )
   }

页面中同样进行了识别和解析