Vue2.x中的Render函数详解


Posted in Javascript onMay 30, 2017

Render函数是Vue2.x版本新增的一个函数;使用虚拟dom来渲染节点提升性能,因为它是基于JavaScript计算。通过使用createElement(h)来创建dom节点。createElement是render的核心方法。其Vue编译的时候会把template里面的节点解析成虚拟dom;

什么是虚拟dom?

虚拟dom不同于真正的dom,它是一个JavaScript对象。当状态发生变化的时候虚拟dom会进行一个diff判断/运算;然后判断哪些dom是需要被替换的而不是全部重绘,所以性能会比dom操作高很多。

下面看一张Aresn大神总结的一张图:

Vue2.x中的Render函数详解

Vue2.x版本中VNode属性:

tag:当前节点标签名,

data:当前节点数据对象,

children:子节点数组,

text:当前节点文本,

elm:当前虚拟节点对应的真实dom节点,

ns:节点的namespace( 名称空间),

content:编译作用域,

functionalContext:函数化组件的作用域,即全局上下文,

key:节点标识,有利于patch优化,

componentOptions:创建组件实例时的options,

child:当前节点对应的组件实例,

parent:组件的占位节点,

raw:原始html,

isStatic:是否是静态节点,

isRootInsert:是否作为跟节点插入,若被<transition>包裹的节点,该属性值为false,

isComment:是否为注释节点,

isCloned:是否为克隆节点,

isOnce:是否只改变(渲染)一次,或是否有v-once指令;

其中这里面又有几种VNode类型:

Aresn大神总结的很好:

Vue2.x中的Render函数详解

TextVNode:文本节点,

ElementVNode:普通元素节点,

ComponentVNode:组件节点,

EmptyVNode:空节点,或者说是没有内容的注释节点,

CloneVNode:克隆节点,可以是以上任意类型节点

说了那么多;到底什么时候用虚拟dom才比较好呢?其实 我们使用的单文件组件就已经够好了。但是当某些代码冗余的时候如果写单文件组件的话会有好多重复的内容;

接下来介绍其核心函数;

createElement:

createElement接收3个参数:

第一个参数可以是HTML标签名,组件或者函数都可以;此参数是必须的;

第二个为数据对象(可选);

第三个为子节点(可选)。

附上一个非常简单的createElement函数demo;

var app = new Vue({
   el:"#app",
   render:createElement => {
     eturn createElement(
       'h2',
       [
         createElement(
           'a',
           {
             domProps:{
               href:"#biaoti"
             }
           },
           "标题"
         )
        ]      
       );
 
     }
 });

这只是一个createElement函数的使用,而Vue2中VNodeData

class: v-bind/:class

style:v-bind/:style

attrs:dom属性,如id

props:props,

on:自定义事件等,

 nativeOn:原生事件

像这些也可以在render函数中实现,若VNode是组件或含有组件的slot,那么VNode必须是唯一。

像平常开发过程中单文件组件中template写法更为简单,可读性也高。如果是webpack进行打包的话template也会预编译成render函数。

这里demo栗子暂时还没写那么多。这里只是一个简单的介绍。若有更好的欢迎大家一起学习讨论。

Javascript 相关文章推荐
XmlUtils JS操作XML工具类
Oct 01 Javascript
js格式化时间和js格式化时间戳示例
Feb 10 Javascript
jQuery实现点击图片翻页展示效果的方法
Feb 16 Javascript
JavaScript实现文字与图片拖拽效果的方法
Feb 16 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
Jun 07 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
Nov 30 Javascript
Bootstrap栅格系统的使用和理解2
Dec 14 Javascript
easyui简介_动力节点Java学院整理
Jul 14 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
Mar 18 Javascript
vue利用axios来完成数据的交互
Mar 23 Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
Vue中div contenteditable 的光标定位方法
Aug 25 Javascript
jQuery实现动态删除LI的方法
May 30 #jQuery
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
May 30 #Javascript
JS给按钮添加跳转功能类似a标签
May 30 #Javascript
jQuery异步提交表单实例
May 30 #jQuery
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
May 30 #Javascript
Angularjs中使用轮播图指令swiper
May 30 #Javascript
AngularJS路由Ui-router模块用法示例
May 29 #Javascript
You might like
php预定义常量
2006/12/25 PHP
php防注入及开发安全详细解析
2013/08/09 PHP
php使用ffmpeg获取视频信息并截图的实现方法
2016/05/03 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
表单填写时用回车代替TAB的实现方法
2007/10/09 Javascript
js函数中onmousedown和onclick的区别和联系探讨
2013/05/19 Javascript
Javascript实现重力弹跳拖拽运动效果示例
2013/06/28 Javascript
javascript scrollTop正解使用方法
2013/11/14 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
2013/12/26 Javascript
jquery教程ajax请求json数据示例
2014/01/13 Javascript
文本框文本自动补全效果示例分享
2014/01/19 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
2015/07/27 Javascript
跟我学习javascript的函数和函数表达式
2015/11/16 Javascript
javascript 数组的定义和数组的长度
2016/06/07 Javascript
JavaScript中Form表单技术汇总(推荐)
2016/06/26 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
2016/10/10 Javascript
原生js实现放大镜特效
2017/03/08 Javascript
Angularjs的启动过程分析
2017/07/18 Javascript
vue实现某元素吸顶或固定位置显示(监听滚动事件)
2017/12/13 Javascript
JS实现全屏预览F11功能的示例代码
2018/07/23 Javascript
详解mpvue开发小程序小总结
2018/07/25 Javascript
vue ajax 拦截原理与实现方法示例
2019/11/29 Javascript
python使用百度翻译进行中翻英示例
2014/04/14 Python
github配置使用指南
2014/11/18 Python
Django中传递参数到URLconf的视图函数中的方法
2015/07/18 Python
python魔法方法-属性访问控制详解
2016/07/25 Python
python入门前的第一课 python怎样入门
2018/03/06 Python
wxPython绘图模块wxPyPlot实现数据可视化
2019/11/19 Python
Django数据库迁移常见使用方法
2020/11/12 Python
canvas探照灯效果的示例代码
2018/11/30 HTML / CSS
2014年社区植树节活动方案
2014/02/28 职场文书
学校领导班子四风问题整改意见
2014/10/02 职场文书
2015年食品安全宣传周活动总结
2015/07/09 职场文书
2015年财务人员个人工作总结
2015/07/27 职场文书
使用golang编写一个并发工作队列
2021/05/08 Golang
如何让你的Nginx支持分布式追踪详解
2022/07/07 Servers