Vue render 函数浅析Vue 中的 render 函数

时间:2021-04-21 前端小智人气:1

render函数是什么

　　简单的说，在vue中我们使用模板HTML语法组建页面的，使用render函数我们可以用js语言来构建DOM

　　因为vue是虚拟DOM，所以在拿到template模板时也要转译成VNode的函数，而用render函数构建DOM，vue就免去了转译的过程。

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

　　vm中有一个方法_c,也是这个函数的别名

　　先看官网对 createElement的介绍

// @returns {VNode}
createElement(
 // {String | Object | Function}
 // 一个 HTML 标签字符串，组件选项对象，或者
 // 解析上述任何一种的一个 async 异步函数，必要参数。
 'div',

 // {Object}
 // 一个包含模板相关属性的数据对象
 // 这样，您可以在 template 中使用这些属性。可选参数。
 {
  // (详情见下一节)
 },

 // {String | Array}
 // 子节点 (VNodes)，由 `createElement()` 构建而成，
 // 或使用字符串来生成“文本节点”。可选参数。
 [
  '先写一些文字',
  createElement('h1', '一则头条'),
  createElement(MyComponent, {
   props: {
    someProp: 'foobar'
   }
  })
 ]
)

就是说createElement（params1，params2，params3）接受三个参数，每个参数的类型官方介绍已经说明

好了，开始今天的正文。

本文 GitHub https://github.com/qq44924588... 上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎Star和完善，大家面试可以参照考点复习，希望我们一起有点东西。

我们知道 Vue 模板是非常强大的，基本可以完成我们日常开发的所有任务。但是，有一些用例，如基于输入或插槽值创建动态组件方式， render 函数会比模板完成的更好也更出色。

用过 React 开发的人对 render 函数应该非常熟悉，因为React组件通过 JSX和 render 函数来构建的。尽管Vue render 函数也可以用JSX编写，但在这里我们使用原生 JS方式，因为这样，我们可以更轻松地了解Vue组件系统的一些基础。

值得注意的是，Vue 的模板实际上在编译时也是会先解析成 render 函数表示方式。模板只是在 render 函数之上提供了一个方便且熟悉的语法糖。尽管 render 函数更强大，但 render 函数可读性很差，相对用的也比较少了。

创建组件

带有 render 函数的组件没有 template 标记或属性。相反，该组件定义了一个了名为 render 的函数，该函数接收一个 reateElement(renderElement: String | Component, definition: Object, children: String | Array) 参数（由于某种原因，通常别名为 h ，归咎于JSX）并返回使用该函数创建的元素，其他一切保持不变，来看看事例：

export default {
 data() {
  return {
   isRed: true
  }
 },

 /*
  * <template>
  *  <div :class="{'is-red': isRed}">
  *   <p>这是一个 render 事例</p>
  *  </div>
  * </template>
  */
 // render 中的渲染结果与上面等价
 render(h) {
  return h('div', {
   'class': {
    'is-red': this.isRed
   }
  }, [
   h('p', '这是一个 render 事例')
  ])
 }
}

render 函数中如何表示指令

Vue 模板具有各种便捷功能，以便向模板添加基本逻辑和绑定功能，如 v-if 、 v-for 、 v-moel 指令等。在 render 函数中是无法使用这些指令的。取而代之的是以纯 JS 来实现，对于大多数指令而言，这也是比较简单的。

v-if

v-if 用纯 JS 实现很简单，只需围绕 createElement 调用使用 if(expr) 语句即可。

v-for

v-for 可以使用 for-of ， Array.map ， Array.filter 等的JS方法中的任何一种来实现。我们可以通过非常有趣的方式将它们组合在一起，以实现过滤或状态切片，而无需计算属性。

例如，有以下 Vue 的模板代码

<template>
 <ul>
  <li v-for="pea of pod">
   
  </li>
 </ul>
</template>

可以用下面的 render 函数来实现上面的效果：

render(h) {
 return h('ul', this.pod.map(pea => h('li', pea.name)));
}

v-model

我们知道， v-model 只是 bind 属性与 value 的语法糖，并在触发 input 事件时设置数据属性。但是，在 render 函数没有这样的简写，我们需要自己实现。

假设，在 Vue 中，我们有如下的结构：

<template>
 <input v-model='myBoundProperty'/>
</template>

上面代码等价于：

<template>
 <input :value="myBoundProperty" @input="myBoundProperty = $event.target.value"/>
</template>

在 render 函数中可以用下面方式来实现上面的代码：

render(h) {
 return h('input', {
  domProps: {
   value: this.myBoundProperty
  },
  on: {
   input: e => {
    this.myBoundProperty = e.target.value
   }
  }
 })
}

v-bind

attribute 和 property 这两种类型的绑定被放在元素定义中，如 arttrs 、 props 和 domProps ( value 和 innerHTML 之类的东西)。

render(h) {
 return h('div', {
  attrs: {
   // <div :id="myCustomId">
   id: this.myCustomId
  },

  props: {
   // <div :someProp="someonePutSomethingHere">
   someProp: this.someonePutSomethingHere
  },

  domProps: {
    // <div :value="somethingElse">
   value: this.somethingElse
  }
 });
}

需要注意的是，对于 class 和 style 的绑定是直接在定义的根进行处理，而不是作为 attrs ， props 或 domProps 处理。

render(h) {
 return h('div', {
  // “类”是JS中的保留关键字，因此必须引用它。
  'class': {
   myClass: true,
   theirClass: false
  },

  style: {
   backgroundColor: 'green'
  }
 });
}

v-on

对事件处理程也是直接添加到元素定义中 on 定义

render(h) {
 return h('div', {
  on: {
   click(e) {
    console.log('I got clickeded!')
   }
  }
 });
}

事件的修饰符可以在处理程序内部实现：

.stop -> e.stopPropagation()
.prevent -> e.preventDefault()
.self -> if (e.target !== e.currentTarget) return

键盘修饰符

.[TARGET_KEY_CODE] -> if (event.keyCode !== TARGET_KEY_CODE) return
.[MODIFIER] -> if (!event.MODIFIERKey) return

特殊属性

Slots 可以通过 this.$slots 作为 createElement（）节点的数组来访问插槽。

作用域插槽存储在 this.$scopedSlots[scope](props：object) 中，作为返回 createElement() 节点数组的函数。

代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug 。

总结

加载全部内容

Vue render 函数 浅析Vue 中的 render 函数

Vue render 函数浅析Vue 中的 render 函数