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. 在WPF中使用全局快捷键

    今天写一个小程序中使用到了全局快捷键,找到了我之前写的文章在c#中使用全局快捷键翻了一下,发现它是WinForm版本的,而我现在大部分写WPF程序了,便将其翻译了为WPF版本的了. static cl ...

  2. Tasker to answer incoming call by pressing power button

    nowadays, the smartphone is getting bigger in size, eg. samsung galaxy note and note 2, sorta big in ...

  3. DotNet_Performance_Tuning_ANTS_Performance_Profiler

    http://www.cnblogs.com/parry/archive/2013/01/04/DotNet_Performance_Tuning_ANTS_Performance_Profiler. ...

  4. Python机器学习实战&lt;一&gt;：环境的配置

    详细要学习的书籍就是<机器学习实战>Machine Learning in Action,Peter Harrington Windows下要安装3个文件,各自是; 1.Python(因为 ...

  5. 使用DataGridView进行增删改查，并同步到数据库

    DataGridView控件具有极高的可配置性和可扩展性.它提供有大量的属性.方法和事件,能够用来对该控件的外观和行为进行自己定义.以下通过一个小样例来展示DataGridView进行增删改查,并同步 ...

  6. go test

    testing 是go中自动测试的包, 直接import就可以使用, 使用时需要注意以下规范 执行测试函数的文件必须以 _test.go 结尾, 注意下划线 单元测试函数名必须以 Test 开头, 并 ...

  7. 深入理解 Java中的 流 (Stream)

    首先,流是什么? 流是个抽象的概念.是对输入输出设备的抽象,Java程序中,对于数据的输入/输出操作都是以"流"的方式进行.设备能够是文件,网络,内存等. 流具有方向性,至于是输入 ...

  8. 转 Objective-C中不同方式实现锁(二)

    在上一文中,我们已经讨论过用Objective-C锁几种实现(跳转地址),也用代码实际的演示了如何通过构建一个互斥锁来实现多线程的资源共享及线程安全,今天我们继续讨论锁的一些高级用法. .NSRecu ...

  9. Unity知识结构总结

    前言 本篇以知识结构图的形式对Unity引擎的常用基础知识内容进行了总结和梳理. 如果你学了一点关于Unity引擎的知识,又觉得太杂乱,那么希望本篇会给你一些帮助. 对应引擎版本:Unity  4.6 ...

  10. DevExpress RichEditControl 上下翻页功能 z

    /// <summary> /// 翻页 /// </summary> /// <param name="isPre"></param&g ...