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. window server 2012 更改密钥 更改系统序列号

    由于在window server 2012当中,好像更改密钥的方法,给隐藏了,没办法激活,这里记录一下在网上查找到的一个命令行,如何在window server 2012 更改密钥 更改系统序列号 在 ...

  2. Linux新内核：提升系统性能 --Linux运维的博客

    http://blog.csdn.net/linuxnews/article/details/52864182

  3. C#程序集系列02,使用记事本查看可执行程序集的IL代码

    继续上一篇"C#程序集系列01,用记事本编写C#,IL代码,用DOS命令编译程序集,运行程序",在F盘的as文件夹中已经有了若干程序集.本篇体验使用记事本查看可执行程序集的IL代码 ...

  4. use of undeclared identifier 'xxxxxxx方法名'

    在*.m文件中,编写一个方法,出现了 use of undeclared identifier 'xxxx方法名'.   遇到这种情况: 首先要看,*.h 文件是否定义了该方法. 其次,要检查一下,方 ...

  5. ConcurrentBag扩展 批量加入

    public static void AddRange<T>(this ConcurrentBag<T> @this, IEnumerable<T> toAdd) ...

  6. unity 质量设置 Quality Settings

    Unity allows you to set the level of graphical quality it will attempt to render. Generally speaking ...

  7. Asp.Net MVC 3.0 使用Gzip压缩

    前言 Gzip最早由Jean-loup Gailly和Mark Adler创建,用于Unix系统的文件压缩.我们在Linux中经常会用到后缀为.gz的文件,它们就是Gzip格式的.现今已经成为Inte ...

  8. TR069协议小结

        也称为CWMP,是在Internet网上通过wan口控制通信终端设备的协议.其协议流程如下图所示: 具体网上有很多资料.其主要的两个内容是:HTTP Client模型.DATA模型.      ...

  9. OpenCV学习(31) 基于defects的简单手势

    前几年在做毕业设计时候曾用opencv1.0中defects做过简单的手势识别,这几天看OpenCV2.46中的轮廓函数,发现和以前差别挺大,函数调用完全不一样,重新实现了简单手势的代码. 1.首先用 ...

  10. pytorch 学习问题

    https://pytorch.org/tutorials/beginner/blitz/neural_networks_tutorial.html#sphx-glr-beginner-blitz-n ...