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. 华为S5300系列升级固件S5300SI-V100R003C00SPC301.cc

    这个固件是升级V100R005的中间件,所以是必经的,注意,这个固件带有http的服务,但现在无论官网还是外面,几乎找不到这个固件的web功能,如果非要实现,可以拿V100R005的web文件改名为w ...

  2. Android开发资料

    Android      [开发环境及工具] [控件使用及示例源码] [热更新] [开源组件] [系统内核] [错误及调试]   来自  http://www.howcode.cn ,内容不错,学习中 ...

  3. cocos2d-x3.0 RichText

    .h #include "cocos2d.h" #include "cocos-ext.h" #include "ui/CocosGUI.h" ...

  4. .NET泛型02,泛型的使用

    在" .NET泛型01,为什么需要泛型,泛型基本语法"中,了解了泛型的基本概念,本篇偏重于泛型的使用.主要包括: ■ 泛型方法重载需要注意的问题■ 泛型的类型推断■ 泛型方法也可以 ...

  5. jvm执行流程

    首先给一个简单的Java示例,源代码如下: public class Main { private static int size=1; public static void main(String  ...

  6. android NDK 开发环境搭建

    基于 Android NDK 的学习之旅-----环境搭建 工欲善其事必先利其器 , 下面介绍下 Eclipse SDK NDK Cygwin CDT 集成开发环境的搭建. 1.Android 开发环 ...

  7. 算法：基于 RingBuffer 的 Queue 实现《续》

    背景 上篇实现了一个简单的队列,内部使用了 _count 计数,本文采用另外一种模式,不用 _count 计数. RingBuffer 不用 _count 计数的话,为了区分队列的满和空,需要在数组中 ...

  8. UILabel混合显示动画效果

    UILabel混合显示动画效果 效果 源码 https://github.com/YouXianMing/Animations // // MixedColorProgressViewControll ...

  9. Java发邮件带附件测试通过

    package cn.bric.crm.util; import java.util.Date; import java.util.Enumeration; import java.util.Prop ...

  10. 程序员眼中的RSA算法

    RSA算法是数学应用于实际的一项伟大发明,起数学过程相对而言还是比较专业的,有兴趣可以看看. RSA算法的证明过程,详见:http://www.ruanyifeng.com/blog/2013/06/ ...