1、DOM 节点树

高效的更新所有这些节点会是比较困难的,因为原生的DOM节点属性很多,渲染性能差。

2、虚拟 DOM

“虚拟 DOM”是我们对由 Vue 组件树建立起来的整个 VNode 树的称呼。

Vue 的模板实际是编译成了 render 函数。

3、渲染流程

说明:

(1)模板template主要通过createElement函数编译为VNode。

https://github.com/vuejs/vue/blob/dev/src/core/vdom/create-element.js

(2)虚拟DOM变为DOM主要通过diff、patch的createElm函数。

https://github.com/vuejs/vue/blob/dev/src/core/vdom/patch.js

(3)在vue初始化时,会调用initRender方法,initRender也是调用createElement编译为VNode。

https://github.com/vuejs/vue/blob/dev/src/core/instance/render.js

vue 渲染流程的更多相关文章

  1. Vue渲染原理

    现在基本所有的框架都已经认同这个看法——DOM应尽可能是一个函数式到状态的映射.状态即是唯一的真相,而DOM状态只是数据状态的一个映射.如下图所示,所有的逻辑尽可能在状态的层面去进行,当状态改变的时候 ...

  2. NGUI渲染流程

    1 渲染流程 NGUI的渲染流程其实就是把Widget组件生成Mesh所需要的缓存数据,然后生成对应的DrallCall组合对应数据,生成渲染需要的Mesh数据,提交渲染. Widget(数据) UI ...

  3. cocos2d-x渲染流程

    Cocos2Dx之渲染流程 发表于8个月前(2014-08-08 22:46)   阅读(3762) | 评论(2) 17人收藏此文章, 我要收藏 赞2 如何快速提高你的薪资?-实力拍“跳槽吧兄弟”梦 ...

  4. NGUI 渲染流程深入研究 (UIDrawCall UIGeometry UIPanel UIWidget)

    上图是一个简要的NGUI的图形工作流程,UIGeometry被UIWidget实例化之后,通过UIWidget的子类,也就是UISprit,UILabel等,在OnFill()函数里算出所需的Geom ...

  5. webview渲染流程

    文档标记说明 ################# 消息边界 +++++++++++++++++ 区域分隔 $$$$$$$$$$$$$$$$$ 线程边界 ~~~~~~~~~~~~~~~~~ 进程边界 - ...

  6. D3D渲染流程--转载

    http://www.cnblogs.com/ixnehc/articles/1282350.html 先从最基础的写起吧,关于Device的渲染流程. D3D9的Device就是D3D给我们提供的一 ...

  7. 【Stage3D学习笔记续】山寨Starling(三):Starling核心渲染流程

    这篇文章我们剔除Starling的Touch事件体系和动画体系,专门来看看Starling中的渲染流程实现,以及其搭建的显示列表结构. 由于Starling是模仿Flash的原生显示列表,所以我们可以 ...

  8. Ogre内部渲染流程分析系列

    come from:http://blog.csdn.net/weiqubo/article/details/6956005 要理解OGRE引擎,就要理解其中占很重要位置的 Renderable接口, ...

  9. mapbox.gl源码解析——基本架构与数据渲染流程

    加载地图 Mapbox GL JS是一个JavaScript库,使用WebGL渲染交互式矢量瓦片地图和栅格瓦片地图.WebGL渲染意味着高性能,MapboxGL能够渲染大量的地图要素,拥有流畅的交互以 ...

随机推荐

  1. hadoop学习;Streaming,aggregate;combiner

    hadoop streaming同意我们使用不论什么可运行脚本来处理按行组织的数据流,数据取自UNIX的标准输入STDIN,并输出到STDOUT 我们能够用 linux命令管道查看文本有多少行,cat ...

  2. JTAG Pinouts

    http://www.jtagtest.com/pinouts/ Pinouts ARM-20 (used with almost all ARM-based microcontrollers) AR ...

  3. erlang资料

    http://www.cnblogs.com/--00/tag/Erlang/ http://blog.csdn.net/turingbooks/article/details/3247749 htt ...

  4. Linux入门基础篇

    Linux入门基础篇 Linux诞生 Linux发行版本说明 Linux官方网站 Linux内核官方网站 比较有名的Linux发行版 虚拟机(Virtual Machine),一个虚拟的系统,安装在系 ...

  5. Ext.state.Manager.setProvider(new Ext.state.CookieProvider())

    Ext.state.Manager.setProvider(new Ext.state.CookieProvider()) 初始化Ext状态管理器,在Cookie中记录用户的操作状态,如果不启用,象刷 ...

  6. Spring+Quartz实现文件中转站

    其实这个功能QQ邮箱就有,为什么还要自己开发一个呢?因为有的文件非常重要...其实是客户要求... 那么我们先来看一下QQ的界面: 我们设计的界面: 文件要到期了是否通知用户?这里我们支持邮件及短信方 ...

  7. Android之判断当前网络状态

    /** * 检测网络是否可用 * @return */ public boolean isNetworkConnected() { ConnectivityManager cm = (Connecti ...

  8. 字符串转换atof atoi atol gcvt strtod strtol strto ul toascii tolower toupper

    atof(将字符串转换成浮点型数) 相关函数 atoi,atol,strtod,strtol,strtoul 表头文件 #include <stdlib.h> 定义函数 double at ...

  9. Gedit

    Use Gedit as Remote File Editor via FTP and SSH Migrating from Windows Vista to Ubuntu 8.04 and have ...

  10. 【BZOJ】【1091】【SCOI2003】切割多边形

    计算几何+枚举 我比较傻逼……一开始想了个贪心,就是这样: