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. 图解vim常用命令

    VI 即 Visual Interface,可视化接口,VIM是VI的增强版 (improved),两张图总结vim常用命令. 图片来自 https://www.cnblogs.com/yangjig ...

  2. Android 通话记录分析

    http://stackoverflow.com/questions/6786666/how-do-i-access-call-log-for-android http://android2011de ...

  3. Short Circuit Protection Circuit

    http://www.daycounter.com/Circuits/Short-Circuit-Protection/Short-Circuit-Protection.phtml Short cir ...

  4. systemtap 探针定制

    http://blog.163.com/digoal@126/blog/static/163877040201391123645546/

  5. Error : The specified component was not reported by the VSS writer (Error 517) in Windows Server 2012 Backup

    Error : The specified component was not reported by the VSS writer (Error 517) in Windows Server 201 ...

  6. MVC日期格式化,后台使用Newtonsoft.Json序列化日期,前端使用”f”格式化日期

    MVC控制器中,经常使用Newtonsoft.Json把对象序列化成json字符串传递到前端视图.当对象中有DateTime类型的属性时,前后台如何处理才能把DateTime类型转换成想要的格式呢? ...

  7. ztree使用系列三（ztree与springmvc+spring+mybatis整合实现增删改查）

    在springmvc+spring+mybatis里整合ztree实现增删改查,上一篇已经写了demo,以下就仅仅贴出各层实现功能的代码: Jsp页面实现功能的js代码例如以下: <script ...

  8. 3种方式实现KVO并进行对比

    KVO KVO属于设计模式中的观察者模式,在观察者模式中,一个对象任何状态的变更都会通知另外的对改变感兴趣的对象.这些对象之间不需要知道彼此的存在,这其实是一种松耦合的设计.当某个属性变化的时候,我们 ...

  9. Linux 系统分析命令图

    sar命令: 编辑 /etc/default/sysstat 设置为true sudo /etc/init.d/sysstat restart

  10. 【PPT详解】曹欢欢：今日头条算法原理

    [PPT详解]曹欢欢:今日头条算法原理 悟空智能科技 4月8日 公众号后台回复:“区块链”,获取区块链报告 公众号后台回复:“sq”,进入区块链分享社群 热文推荐: 1000位专家推荐,20本区块链必 ...