https://segmentfault.com/a/1190000008291645

一个VNode的实例对象包含了以下属性

  • tag: 当前节点的标签名

  • data: 当前节点的数据对象

VNode可以理解为vue框架的虚拟dom的基类，通过new实例化的VNode大致可以分为几类

  • EmptyVNode: 没有内容的注释节点

  • TextVNode: 文本节点

  • ElementVNode: 普通元素节点

  • ComponentVNode: 组件节点

  • CloneVNode: 克隆节点，可以是以上任意类型的节点，唯一的区别在于isCloned属性为true

webpack编译模板之后，会把这些模板编译成一个渲染函数（包含虚拟dom） 。

虚拟dom渲染更快的原因是：

VNode 只是用来映射到真实 DOM 的渲染，不需要包含操作 DOM 的方法，DOM属性值也少，因此它是非常轻量和简单的。

vue 虚拟dom的更多相关文章

  1. Vue 虚拟Dom 及 部分生命周期初探

    踏入前端,步入玄学 17年底至18年初附带做了vue的一些框架搭建,中途断断续续用了部分vue,时隔几个月后的工作又拾起vue,对于一些原理性的知识淡忘了,正值这段时间使用中遇到了一些坑,又拨了部分代 ...

  2. Es6语法+v-on参数相关+vue虚拟dom

    Es6的语法 Es5:if和for 都没有块级作用域,函数function有作用域. Es6:加入let使得if和for有作用域 .建议: 在Es6中优先使用const,只有需要改变某一个标识符的时候 ...

  3. vue虚拟DOM源码学习-vnode的挂载和更新流程

    代码如下: <div id="app"> {{someVar}} </div> <script type="text/javascript& ...

  4. vue虚拟dom原理

    Virual DOM是用JS对象记录一个dom节点的副本,当dom发生更改时候,先用虚拟dom进行diff,算出最小差异,然后再修改真实dom. vue的virtual dom的diff算法是基于sn ...

  5. 对vue虚拟dom的研究

    Vue.js通过编译将template 模板转换成渲染函数(render ) ,执行渲染函数就可以得到一个虚拟节点树 在对 Model 进行操作的时候,会触发对应 Dep 中的 Watcher 对象. ...

  6. vue虚拟dom和diff算法

    vue的虚拟dom和diff算法 1.虚拟dom 虚拟dom,我的理解就是通过js对象的方式来具体化每一个节点,把dom树上面的每个节点都变为对象里的一个元素,元素的子元素变为子节点,节点上面的cla ...

  7. vue 源码学习三 vue中如何生成虚拟DOM

    vm._render 生成虚拟dom 我们知道在挂载过程中, $mount 会调用 vm._update和vm._render 方法,vm._updata是负责把VNode渲染成真正的DOM,vm._ ...

  8. Vue之虚拟DOM

    一.真实DOM和其解析流程? 浏览器渲染引擎工作流程都差不多,大致分为5步,创建DOM树——创建StyleRules——创建Render树——布局Layout——绘制Painting 第一步,用HTM ...

  9. 从虚拟dom了解vue渲染函数

    vue渲染函数就是render函数,他会返回一个VNode,VNode是一个js对象,是dom的映射 vue在介绍渲染函数那个章节看的不是很懂,所以想要彻底的理解渲染函数,首先需要了解vue的虚拟do ...

随机推荐

  1. flash从数据流判断图片格式防止xss攻击

    前段时间测试人员报了一个flash的xss bug,经分析用了Loader.loadBytes且没做数据流格式校验的程序都会中招,自测方法只需一行代码: ExternalInterface.call( ...

  2. .Net 中DataTable和 DataRow的 区别与联系

    1.简要说明二者关系 DataRow 和 DataColumn 对象是 DataTable 的主要组件.使用 DataRow 对象及其属性和方法检索.评估.插入.删除和更新 DataTable 中的值 ...

  3. JAVA基础知识要点

    MQ.dubbo.SpringCloud 1) 集合框架 2)线程 3)IO流 4)类和对象生命周期 5)JAVA的反射机制 6) JVM 7)数据结构和常用算法 8)设计模式 9)网络编程

  4. 【linux】centos7终端中文显示乱码，命令返回中文乱码

    centos7终端中文显示乱码,命令返回中文乱码 1.查看服务器编码的命令 1.1 echo $LANG 1.2 locale 1.3 查看终端xshell编码 如果以上的三点依旧保持一致,而依旧乱码 ...

  5. Rete算法

    RETE算法介绍一. rete概述Rete算法是一种前向规则快速匹配算法,其匹配速度与规则数目无关.Rete是拉丁文,对应英文是net,也就是网络.Rete算法通过形成一个rete网络进行模式匹配,利 ...

  6. Oracle WIHT AS 用法

    1.with table as 相当于建个临时表(用于一个语句中某些中间结果放在临时表空间的SQL语句),Oracle 9i 新增WITH语法,可以将查询中的子查询命名,放到SELECT语句的最前面. ...

  7. 【BZOJ】【3239】Discrete Logging

    BSGS BSGS裸题,嗯题目中也有提示:求a^m (mod p)的逆元可用快速幂,即 pow(a,P-m-1,P) * (a^m) = 1 (mod p) /******************** ...

  8. OpenCV学习(27) 直方图(4)

    我们可以利用OpenCV的直方图,backproject直方图和meanshift算法来跟踪物体.下面通过简单的例子来说明如何实现跟踪算法,我们有两幅狒狒的图片,如下图所示:我们首先在左图中框选狒狒的 ...

  9. Python操作Excel表格，xlwt模块的使用

    Python可以操作Excel的模块不止一种,我习惯使用的写入模块是xlwt(一般都是读写模块分开的) 按照模块使用pip install xlwt 就行了,很常规的方式 直接进代码解析,本文源码 w ...

  10. JSON学习资料整理

    1.什么是JSON JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于JavaScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使 ...