浅析Vue 中的 render 函数

 更新时间:2020年02月28日 08:35:23   作者:前端小智  
在vue中我们使用模板HTML语法组建页面的,使用render函数我们可以用js语言来构建DOM,今天小编就通过本文给大家简单介绍下Vue 中 render 函数,需要的朋友可以参考下

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 函数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 使用webpack搭建vue项目及注意事项

    使用webpack搭建vue项目及注意事项

    这篇文章主要介绍了使用webpack搭建vue项目的方法,本文以开发环境为例,通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-06-06
  • vue插件vue-resource的使用笔记(小结)

    vue插件vue-resource的使用笔记(小结)

    本篇文章主要介绍了vue插件vue-resource的使用笔记(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • vue实现商城购物车功能

    vue实现商城购物车功能

    这篇文章主要为大家详细介绍了vue实现商城购物车功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • vue @input和@click的区别及说明

    vue @input和@click的区别及说明

    这篇文章主要介绍了vue @input和@click的区别及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • 关于Vue 监控数组的问题

    关于Vue 监控数组的问题

    这篇文章主要介绍了Vue 监控数组的示例,主要包括Vue 是如何追踪数据发生变化,Vue 如何更新数组以及为什么有些数组的数据变更不能被 Vue 监测到,对vue监控数组知识是面试比较常见的问题,感兴趣的朋友一起看看吧
    2022-05-05
  • vue组件编写之todolist组件实例详解

    vue组件编写之todolist组件实例详解

    这篇文章主要介绍了vue组件编写之todolist组件的实例讲解,本文给大家介绍的非常详细,需要的朋友可以参考下
    2018-01-01
  • vue项目实现设置根据路由高亮对应的菜单项操作

    vue项目实现设置根据路由高亮对应的菜单项操作

    这篇文章主要介绍了vue项目实现设置根据路由高亮对应的菜单项操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • ElementUI select弹窗在特定场合错位问题解决方案

    ElementUI select弹窗在特定场合错位问题解决方案

    这篇文章主要介绍了ElementUI select弹窗在特定场合错位问题解决方案,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-01-01
  • vue动态添加路由addRoutes之不能将动态路由存入缓存的解决

    vue动态添加路由addRoutes之不能将动态路由存入缓存的解决

    这篇文章主要介绍了vue动态添加路由addRoutes之不能将动态路由存入缓存的解决方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新

    vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新

    这篇文章主要介绍了vue实现歌手列表字母排序,下拉滚动条侧栏排序实时更新,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05

最新评论