浅析Vue 中的 render 函数


Posted in Javascript onFebruary 28, 2020

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

Javascript 相关文章推荐
一组JS创建和操作表格的函数集合
May 07 Javascript
js二维数组排序的简单示例代码
Jan 24 Javascript
js+div实现图片滚动效果代码
Feb 10 Javascript
js获取IP地址的方法小结
Jul 01 Javascript
Bootstrap每天必学之按钮(一)
Nov 24 Javascript
利用jQuery对无序列表排序的简单方法
Oct 16 Javascript
微信小程序 教程之列表渲染
Oct 18 Javascript
使用node.js对音视频文件加密的实例代码
Aug 30 Javascript
Vue-Access-Control 前端用户权限控制解决方案
Dec 01 Javascript
JS实现字符串翻转的方法分析
Aug 31 Javascript
javascript实现时间日期的格式化的方法汇总
Aug 06 Javascript
vue接口请求加密实例
Aug 11 Javascript
微信小程序实现录制、试听、上传音频功能(带波形图)
Feb 27 #Javascript
基于Element的组件改造的树形选择器(树形下拉框)
Feb 27 #Javascript
js与jquery获取input输入框中的值实例讲解
Feb 27 #jQuery
javascript将扁平的数据转为树形结构的高效率算法
Feb 27 #Javascript
js实现无限层级树形数据结构(创新算法)
Feb 27 #Javascript
js实现树形数据转成扁平数据的方法示例
Feb 27 #Javascript
vue学习笔记之给组件绑定原生事件操作示例
Feb 27 #Javascript
You might like
Apache设置虚拟WEB
2006/10/09 PHP
php+ajax实现无刷新的新闻留言系统
2020/12/21 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
PHP模版引擎原理、定义与用法实例
2019/03/29 PHP
window.open()弹出居中的窗口
2007/02/01 Javascript
js本身的局限性 别让javascript做太多事
2010/03/23 Javascript
Extjs中DisplayField的日期或者数字格式化扩展
2010/09/03 Javascript
探讨javascript是不是面向对象的语言
2013/11/21 Javascript
JavaScript中对象属性的添加和删除示例
2014/05/12 Javascript
js实现获取焦点后光标在字符串后
2014/09/17 Javascript
jQuery Masonry瀑布流插件使用详解
2014/11/17 Javascript
浅谈jQuery中的checkbox问题
2016/08/10 Javascript
微信小程序 WebSocket详解及应用
2017/01/21 Javascript
详解Angular2响应式表单
2017/06/14 Javascript
详解vue中computed 和 watch的异同
2017/06/30 Javascript
Vue实现一个返回顶部backToTop组件
2017/07/25 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
2018/06/01 Javascript
ES6 Generator函数的应用实例分析
2019/06/26 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
2020/08/28 Javascript
Openlayers+EasyUI Tree动态实现图层控制
2020/09/28 Javascript
python解析发往本机的数据包示例 (解析数据包)
2014/01/16 Python
Python中列表与元组的乘法操作示例
2018/02/10 Python
儿童编程python入门
2018/05/08 Python
python切片及sys.argv[]用法详解
2018/05/25 Python
python+splinter自动刷新抢票功能
2018/09/25 Python
python3 小数位的四舍五入(用两种方法解决round 遇5不进)
2019/04/11 Python
python关于矩阵重复赋值覆盖问题的解决方法
2019/07/19 Python
Python代码块及缓存机制原理详解
2019/12/13 Python
python实现按日期归档文件
2021/01/30 Python
adidas旗下高尔夫装备供应商:TaylorMade Golf(泰勒梅高尔夫)
2016/08/28 全球购物
小狗电器官方商城:中国高端吸尘器品牌
2017/03/29 全球购物
StringBuilder和String的区别
2015/05/18 面试题
硕士毕业答辩开场白
2015/05/27 职场文书
教师节晚会主持词
2015/06/30 职场文书
《清澈的湖水》教学反思
2016/02/17 职场文书
css样式important规则的正确使用方式
2022/06/10 HTML / CSS