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. dea工具debug断点红色变成灰色

    没事别瞎点,禁用了断点当然不走了

  2. 手动为Android 4.x 手机加入�自己的根证书（CA 证书）

    首先看Android 4.x 系统的证书存放位置: AOSP Android系统中CA证书文件的位置在:/ system/etc/security/cacerts/一系列的以数字命名的.0文件 方法一 ...

  3. Android实例剖析笔记（二）

    摘要:用实例讲解Andriod的开发过程,以NotesList为实例介绍Android的菜单机制 简介 android提供了三种菜单类型,分别为options menu,context menu,su ...

  4. KJBitmap使用方法

    摘要 本文原创,转载请注明地址:http://kymjs.com/code/2015/03/25/01 摘要 好像最近一个月都没有写博客了,正好伴着KJFrameForAndroid 更新v2.14版 ...

  5. appium+python自动化59-appium命令行参数

    Appium服务器参数 许多Appium 1.5服务器参数已被弃用,以支持--default-capabilities标志. 用法: node . [flags] help 1.cmd端口输入,app ...

  6. Selenium2+python自动化52-unittest执行顺序

    前言 很多初学者在使用unittest框架时候,不清楚用例的执行顺序到底是怎样的.对测试类里面的类和方法分不清楚,不知道什么时候执行,什么时候不执行. 本篇通过最简单案例详细讲解unittest执行顺 ...

  7. PHP的MySQL扩展：PHP訪问MySQL的经常使用扩展函数

    来源:http://www.ido321.com/1024.html 一.PHP连接数据库及基本操作 MySQL採用的是'客户机/server'架构.使用PHP安装的MySQL扩展函数,和直接使用cl ...

  8. spring boot注解 --@spring-boot-devtools 自动加载修改的文件和类

    spriing boot中有一个注解,是自动加载修改后的类或者文件. 使用方法为: spring-boot-devtools=true 需要引入devtools包依赖: <dependency& ...

  9. 21.重入锁ReentrantLock

    ReentrantLock     重入锁,在需要进行代码同步部分上加锁,但是一定要记得解锁.     类型:公平锁(队列方式进行排队).非公平锁(按照cpu的分配),非公平锁性能要比公平锁性能高,默 ...

  10. C++ cout 格式化输出方法

    C语言里可以用printf(),%f来实现浮点数的格式化输出,用cout呢...? iomanip是I/O流控制头文件,就像printf的格式化输出一样. 以下是一些常用的: dec 置基数为10 相 ...