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 相关文章推荐
javascript web对话框与弹出窗口
Feb 22 Javascript
javascript中的关于类型转换的性能优化
Dec 14 Javascript
Webkit的跨域安全问题说明
Sep 13 Javascript
关于JAVASCRIPT urldecode URL解码的问题
Jan 08 Javascript
js函数内变量的作用域分析
Jan 12 Javascript
js实现文字垂直滚动和鼠标悬停效果
Dec 31 Javascript
JS解决iframe之间通信和自适应高度的问题
Aug 24 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
Dec 22 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
JavaScript时间日期操作实例小结【5个示例】
Dec 22 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
Nov 19 Javascript
cypress测试本地web应用
Jun 01 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
虹吸式咖啡壶操作
2021/03/03 冲泡冲煮
使用PHP生成二维码的两种方法(带logo图像)
2014/03/14 PHP
php操作xml入门之xml标签的属性分析
2015/01/23 PHP
PHP SplObjectStorage使用实例
2015/05/12 PHP
laravel model 两表联查示例
2019/10/24 PHP
jquery 1.4.2发布!主要是性能与API
2010/02/25 Javascript
JavaScript实现按照指定长度为数字前面补零输出的方法
2015/03/19 Javascript
jQuery实现文件上传进度条特效
2015/08/12 Javascript
jquery实现(textarea)placeholder自动换行
2016/12/22 Javascript
JS触摸事件、手势事件详解
2017/05/04 Javascript
基于JavaScript实现无缝滚动效果
2017/07/21 Javascript
微信小程序实现tab和swiper切换结合效果
2020/07/17 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
2019/06/06 jQuery
微信小程序嵌入腾讯视频源过程详解
2019/08/08 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
2020/07/20 Javascript
vue界面发送表情的实现代码
2020/09/11 Javascript
python使用mysqldb连接数据库操作方法示例详解
2013/12/03 Python
python如何在循环引用中管理内存
2018/03/20 Python
python如何为被装饰的函数保留元数据
2018/03/21 Python
详解Python发送email的三种方式
2018/10/18 Python
python装饰器简介---这一篇也许就够了(推荐)
2019/04/01 Python
python 在右键菜单中加入复制目标文件的有效存放路径(单斜杠或者双反斜杠)
2020/04/08 Python
HTML5对手机页面长按会粘贴复制禁用的解决方法
2016/07/19 HTML / CSS
阿玛尼美妆加拿大官方商城:Giorgio Armani Beauty加拿大
2017/10/24 全球购物
德国游戏机商店:Konsolenkost
2019/12/08 全球购物
施工资料员岗位职责
2014/01/06 职场文书
安全生产目标责任书
2014/04/14 职场文书
股票投资建议书
2014/05/19 职场文书
爱耳日宣传活动总结
2014/07/05 职场文书
安全生产目标管理责任书
2014/07/25 职场文书
2014年惩防体系建设工作总结
2014/12/01 职场文书
政协工作总结2015
2015/05/20 职场文书
2016元旦晚会主持词开场白和结束语
2015/12/04 职场文书
2019已经过半,你知道年中工作总结该怎么写吗?
2019/07/03 职场文书
Mysql 如何批量插入数据
2021/04/06 MySQL
分析SQL窗口函数之取值窗口函数
2022/04/21 Oracle