14-Vue的render函数

一、render函数是什么

简单的说，在vue中我们使用模板HTML语法来组建页面的，使用render函数我们可以用js语言来构建DOM。因为vue是虚拟DOM，所以在拿到template模板时也要转译成VNode的函数，而用render函数构建DOM，vue就免去了转译的过程。

当使用render函数描述虚拟DOM时，vue提供一个函数，这个函数是就构建虚拟DOM所需要的工具。
官网上给他起了个名字叫createElement。还有约定它的简写叫h

二、render函数的基本使用

• 先定义注册组件

<div id="app">

</div>
<template id="one">
    <div>
        <p>我是组件</p>
    </div>
</template>

<script>
    Vue.component('one',{
        template: '#one',
    });
    new Vue({
        el: '#app',
    });
</script>

• 通过Vue实例的render方法来渲染
  createElement 是 render 函数的参数，它本身也是个函数。

    new Vue({
        el: '#app',
        render: function (createElement) {
            let html = createElement('one');
            return html;
        }
    });

三、Vue渲染组件的方式

在Vue中渲染组件的方式有两种

• 先定义注册组件, 然后在Vue实例中当做标签来使用
• 先定义注册组件, 然后通过Vue实例的render方法来渲染

两种渲染方法的区别

• 当做标签来渲染, 不会覆盖Vue实例控制区域

image

<div id="app">
    <one></one>
</div>
<template id="one">
    <div>
        <p>我是组件</p>
    </div>
</template>

<script>
    Vue.component('one',{
        template: '#one'
    });
    new Vue({
        el: '#app'
    });
</script>

• 通过render方法来渲染, 会覆盖Vue实例控制区域

image

<div id="app">

</div>
<template id="one">
    <div>
        <p>我是组件</p>
    </div>
</template>

<script>
    Vue.component('one',{
        template: '#one',
    });
    new Vue({
        el: '#app',
        render: function (createElement) {
            let html = createElement('one');
            return html;
        }
    });
</script>