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. 丢失或损坏NDF文件如何附加数据库

    在论坛看到有人遇到 NDF文件丢失并且没有备份,所以无法成功附加数据库.在网上也看到过很多回答是如果没有NDF就无法附加成功. 其实我自己测试下来即使没有NDF也是可以成功附加的.但是有条件,丢失的N ...

  2. 使用Django来处理对于静态文件的请求

    引言 本方法适用于linux+python2.7+django1.2,使用django自带的web服务. 同样也适用于sina app engine. 1.准备工作 准备css文件,准备js文件,准备 ...

  3. Aptana studio 3配色方案的修改方法

    http://www.weste.net/2013/1-29/88614.html Aptana studio 3的确是一个不错的IDE,但是默认的黑底白色代码样式看时间长了有点审美疲劳了,如何能够更 ...

  4. Android音效SoundPool问题：soundpool 1 not retry

    Android音效SoundPool问题:soundpool 1 not retry 今天开发中要用到SoundPool,遇到soundpool 1 not retry无法播放声音,MediaPlay ...

  5. C++回调函数(callback)的使用

    什么是回调函数(callback)    模块A有一个函数foo,他向模块B传递foo的地址,然后在B里面发生某种事件(event)时,通过从A里面传递过来的foo的地址调用foo,通知A发生了什么事 ...

  6. web开发常见bug汇总

    1.在做使用struts2进行文件上传时总是出现 java.lang.NoClassDefFoundError: org/apache/commons/io/output/DeferredFileOu ...

  7. Java 8 中 HashMap 的性能提升

    HashMap是一个高效通用的数据结构,它在每一个Java程序中都随处可见.先来介绍些基础知识.你可能也知 道,HashMap使用key的hashCode()和equals()方法来将值划分到不同的桶 ...

  8. 一款DIY移动电源的性能

    文波很大 就这款产品,质量非常一般后面拿品胜的做个对比

  9. 利用Mircosoft URLRewriter.dll实现页面伪静态

    一,获得Mircosoft URLRewriter.dll: 获得Mircosoft URLRewriter.dll可以到http://www.microsoft.com/china/msdn/lib ...

  10. connection to sys should be as sysdba or sysoper 解决的方法

    连接时提示: 出现了例如以下的情况:EXP-00056;遇到ORACLE错误28009. ORA-28009:connection   to   sys   should   be   as   sy ...