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 相关文章推荐
js下用eval生成JSON对象
Sep 17 Javascript
常用的jQuery前端技巧收集
Dec 24 Javascript
javascript中FOREACH数组方法使用示例
Mar 01 Javascript
数据结构中的各种排序方法小结(JS实现)
Jul 23 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
Sep 05 Javascript
微信小程序 animation API详解及实例代码
Oct 08 Javascript
bootstrap table 多选框分页保留示例代码
Mar 08 Javascript
Vue.js进阶知识点总结
Apr 01 Javascript
react实现换肤功能的示例代码
Aug 14 Javascript
关于Vue项目跨平台运行问题的解决方法
Sep 18 Javascript
浅谈JavaScript中的“!!”作用
Aug 03 Javascript
vue项目多环境配置(.env)的实现
Jul 21 Vue.js
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利用header函数实现文件下载时直接提示保存
2009/11/12 PHP
兼容firefox,chrome的网页灰度效果
2011/08/08 PHP
Drupal简体中文语言包安装教程
2014/09/27 PHP
PHP实现简单的新闻发布系统实例
2015/07/28 PHP
PHP url的pathinfo模式加载不同控制器的简单实现
2016/08/12 PHP
浅谈mysql_query()函数的返回值问题
2016/09/05 PHP
php有效防止图片盗用、盗链的两种方法
2016/11/01 PHP
PHP判断文件是否被引入的方法get_included_files用法示例
2016/11/29 PHP
基于JQuery框架的AJAX实例代码
2009/11/03 Javascript
AlertBox 弹出层信息提示框效果实现步骤
2010/10/11 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
2015/11/19 Javascript
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
2017/01/05 Javascript
详解Vue自定义过滤器的实现
2017/01/10 Javascript
VueJS组件之间通过props交互及验证的方式
2017/09/04 Javascript
Electron-vue脚手架改造vue项目的方法
2018/10/22 Javascript
JavaScript实现无限级递归树的示例代码
2019/03/29 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
2019/04/30 Javascript
Python中的进程分支fork和exec详解
2015/04/11 Python
Python3实现发送QQ邮件功能(附件)
2020/12/23 Python
Python中列表与元组的乘法操作示例
2018/02/10 Python
Python利用splinter实现浏览器自动化操作方法
2018/05/11 Python
Python爬虫之正则表达式基本用法实例分析
2018/08/08 Python
Python 中 function(#) (X)格式 和 (#)在Python3.*中的注意事项
2018/11/30 Python
Python Selenium 之关闭窗口close与quit的方法
2019/02/13 Python
pd.DataFrame统计各列数值多少的实例
2019/12/05 Python
Dodax奥地利:音乐、电影、书籍、玩具、电子产品等
2019/08/31 全球购物
教育科研先进个人材料
2014/01/26 职场文书
大学毕业自我评价
2014/02/02 职场文书
党员先锋岗事迹材料
2014/05/08 职场文书
美丽的大脚观后感
2015/06/03 职场文书
建国70周年的心得体会(2篇)
2019/09/20 职场文书
导游词之海南天涯海角
2019/12/05 职场文书
解决python存数据库速度太慢的问题
2021/04/23 Python
浅谈Redis主从复制以及主从复制原理
2021/05/29 Redis
python ConfigParser库的使用及遇到的坑
2022/02/12 Python
无线电通信名词解释
2022/02/18 无线电