render

关于 render 的更详细的内容可以查看 Vue 官方文档

Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力，这时你可以用 render 函数，它比 template 更接近编译器。

我们先设想一下这个场景：

使用 v-bind 和 slot ，实现组件切换的功能。通过监听父组件按钮的事件，改变父组件 level 的值，然后把新的值通过 props 传递给了子组件；然后进行 v-if 判断，显示对应的组件。

使用 template 做法

<div id="app"> ?????<my-child :level=‘level‘> ?????????我是组件中内容 ?????</my-child> ?????<br> ?????<button @click=‘changeFontSize(1)‘>改变字号-大</button> ?????<button @click=‘changeFontSize(2)‘>改变字号-中</button> ?????<button @click=‘changeFontSize(3)‘>改变字号-小</button> ?????<template id=‘myTemp‘> ?????????<div> ???????????<h1 v-if=‘level==1‘><slot></slot></h1> ???????????<h2 v-if=‘level==2‘><slot></slot></h2> ???????????<h3 v-if=‘level==3‘><slot></slot></h3> ???????</div> ?????</template> ?</div>

Vue.component(‘myChild‘,{ ???props:[‘level‘], ???template:‘#myTemp‘})var app = new Vue({ ???el:‘#app‘, ???data:{ ???????level:3 ???}, ???methods:{ ???????changeFontSize:function(value){ ???????????this.level = value ???????} ???}})

demo ：JSbin

但是，如果有更多的组件需要进行判断和切换呢？

template 就会越写越长，并且我们可以看到：

每当点击按钮切换组件的时候，之前的组件移除后，他们的组件也会渲染在页面上，会堆积在 DOM 树中，导致代码变得冗余，难以维护。

通过 render

现在通过 render 函数来改写一下这个功能：

<div id="app"> ?????<my-child :level=‘level‘> ?????????我是组件中内容 ?????</my-child> ?????<br> ?????<button @click=‘changeFontSize(1)‘>改变字号-大</button> ?????<button @click=‘changeFontSize(2)‘>改变字号-中</button> ?????<button @click=‘changeFontSize(3)‘>改变字号-小</button> ?</div>

Vue.component(‘myChild‘,{ ???props:[‘level‘], ???render:function(createElement){ ???????return createElement(‘h‘+this.level,this.$slots.default) ???}})var app = new Vue({ ???el:‘#app‘, ???data:{ ???????level:3 ???}, ???methods:{ ???????changeFontSize:function(value){ ???????????this.level = value ???????} ???}})

通过 render 处理可以让结构更简洁，代码也没有冗余：

demo : JSbin

render 详解

demo : JSbin

Vue.component(‘myChild‘,{ ???props:[‘level‘], ???render:function(createElement){ ???????return createElement(‘h‘+this.level,this.$slots.default) ???}})

在 render 函数的方法中，参数必须是 createElement。,createElement 的类型是 function，他会返回一个 vnode 虚拟节点。

• createElement 的第一个参数

可以是 String | Object | Function

// String - HTML标签，会在组件所在的位置渲染一个 div 节点render:function(createElement){ ???????return createElement(‘div‘) ???}

// Object - 一个含有数据选项的对象render:function(createElement){ ???????return createElement({ ???????????template：`<div></div>` ???????}) ???}

// Function - 一个方法，返回含有数据选项的对象render:function(createElement){ ???????let createDom = function(){ ???????????return { ???????????????template:`<div></div>` ???????????} ???????} ???????return createElement(createDom) ???}

• createElement 的第二个参数(可选)

createElement 的第二个参数是数据对象，只能是 object。

// Function - 一个方法，返回含有数据选项的对象render:function(createElement){ ???return createElement({ ???????template:`<div>这里字体是红色的</div>` ???},{ ???????class:{ ???????????foo:true, ???????????bar:false ???????}, ???????style:{ ???????????color:‘red‘, ???????????fontSize:‘30px‘ ???????}, ???????attrs:{ ???????????id:‘foo‘ ???????}, ???????// 用来显示原生的 dom 属性 ???????domProps:{ ???????????innerHTML:`<span style=‘color:yellow;font-size:16px‘>这里是黄色的</span>` ???????} ???})}

可以看到，我们通过给 createElement 方法添加第二个参数，为第一个参数所创造的节点增添了不少的属性。

• createElement 的第三个参数(可选)

第三个参数也是可选，String | Array，作为我们构建函数的子节点来使用的

render:function(createElement){ ???return createElement(‘div‘,{ ???????class:{ ???????????foo:true, ???????????bar:false ???????}},[ ???????createElement(‘h1‘,‘创建子节点1‘), ???????createElement(‘h6‘,‘创建子节点2‘) ???])}

可以看到，我们通过给 createElement 方法添加第三个参数，为第一个参数所创造的节点增添了两个子节点(h1/h6)以及分别为两个子节点添加了一个子节点(‘创建子节点1‘/‘创建子节点2‘)。

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

利用 createElement 的第三个参数可以存储数组、创建子节点的特点，可以把指定的 slot (this.$slots.slotName返回的是一个 vnode 数组)存储到某个节点中。

demo : JSbin

<div id="app"> ???<child> ???????<p>正文</p> ???????<span>正文段落</span> ???????<h1 slot=‘header‘>header</h1> ???????<h2 slot=‘footer‘>footer</h2> ???</child></div>

Vue.component(‘child‘,{ ???render:function(createElement){ ???????// 注意，这里的 header 是一个 vnode 数组，所以他是 createElement 的第三个参数 ???????let header = this.$slots.header ???????let footer = this.$slots.footer ???????let main = this.$slots.default ???????return createElement(‘div‘,[ ???????????createElement(‘header‘,header), ???????????createElement(‘main‘,main), ???????????createElement(‘footer‘,footer) ???????]) ???}})var app = new Vue({ ???el:‘#app‘})

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

和之前的例子一样：

<div id="app"> ?????<my-child :level=‘level‘> ?????????我是组件中内容 ?????</my-child> ?????<br> ?????<button @click=‘changeFontSize(1)‘>改变字号-大</button> ?????<button @click=‘changeFontSize(2)‘>改变字号-中</button> ?????<button @click=‘changeFontSize(3)‘>改变字号-小</button> ?</div>

Vue.component(‘myChild‘,{ ???props:[‘level‘], ???render:function(createElement){ ???????return createElement(‘h‘+this.level,this.$slots.default) ???}})var app = new Vue({ ???el:‘#app‘, ???data:{ ???????level:3 ???}, ???methods:{ ???????changeFontSize:function(value){ ???????????this.level = value ???????} ???}})

v-model 在 render 函数中的应用

demo : JSbin

<div id="app"> ???<app-component :name=‘name‘ v-model=‘name‘></app-component> <br> ???{{ name }}</div>

Vue.component(‘app-component‘,{ ???render:function(createElement){ ???????// 这里的 this 等于子组件的this ???????let self = this ???????return createElement(‘input‘,{ ???????????domProps:{ ???????????????// 这句的作用是把父组件传递进来的值显示在输入框里 ???????????????value:self.name ???????????}, ???????????on:{ ???????????????input:function(event){ ???????????????????self.$emit(‘input‘,event.target.value) ???????????????} ???????????} ???????}) ???}, ???props:[‘name‘]})var app = new Vue({ ???el:‘#app‘, ???data:{ ???????name:‘lily‘ ???}})

首先我们注册了一个子组件，并且通过 render 函数渲染模板，其中设置了一个 value 属性和 input 的监听事件；

声明 self 是为了确定 this 的指向是子组件；

value 属性的值，是父组件通过 :name=‘name‘ 和 props 传递给子组件的；

子组件通过 v-model 绑定了父组件的数据 name，当用户在输入框中输入时，我们在子组件中设置的监听事件就会触发 $emit 事件，把输入框中的 value 传递给了 v-model，v-model 更新了 name 的值为 value，从而实现子组件传值给父组件。

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

demo : JSbin

<div id="app"> ???<app-component> ???<template scope=‘prop‘> ???????{{ prop.text}} <br> ???????{{ prop.msg}} ???</template> ???</app-component></div>

Vue.component(‘app-component‘,{ ???render:function(createElement){ ???????// 其实这句话就相当于之前的 template:`<div><slot text=‘scopeText‘ msg=‘scopeMsg‘></slot></div>` ???????return createElement(‘div‘,this.$scopedSlots.default({ ???????????text:‘scopeText‘, ???????????msg:‘scopeMsg‘ ???????})) ???}})var app = new Vue({ ???el:‘#app‘})

函数化组件的应用

之前创建的锚点标题组件是比较简单，没有管理或者监听任何传递给他的状态，也没有生命周期方法。它只是一个接收参数的函数。在这个例子中，我们标记组件为 functional，这意味它是无状态 (没有响应式数据)，无实例 (没有 this 上下文)。

组件需要的一切都是通过上下文(传入的 context)传递

在添加 functional: true 之后，锚点标题组件的 render 函数之间简单更新增加 context 参数，this.$slots.default 更新为 context.children，之后this.level 更新为 context.props.level。

demo : JSbin

<div id="app"> ???<app-component></app-component></div>

Vue.component(‘app-component‘,{ ???functional: true, ???render:function(createElement,context){ ???????return createElement(‘button‘,{ ???????????on:{ ???????????????click:function(){ ???????????????????console.log(context) ???????????????????console.log(context.parent) ???????????????} ???????????} ???????},‘点击我查看上下文‘) ???}})var app = new Vue({ ???el:‘#app‘,})

关于 render，学习就先到这儿了。

得赶紧了解完基础概念，才能更快地学到实战部分...

Vue.js 创建一个 CNODE 社区(6)

原文地址：https://www.cnblogs.com/No-harm/p/9749157.html