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. JS仿淘宝左侧菜单

    http://www.webdm.cn/webcode/1c724a06-06f4-4c4f-931a-c683285fa700.html

  2. Tasker to create toggle widget for ES ftp service -- Send Intent

    To perform this mission, Tap the tab "tasks" of Tasker, create a task as below.Task: (ES F ...

  3. Redhat Enterprise Linux 7.4/CentOS 7.4 安装后初始化配置

    由于我是最小化安装,需要在安装后进行一些配置 1. 设定启动级别 [root@home ~]# systemctl set-default multi-user.target 2. 设定网络 [roo ...

  4. .NET的堆和栈03,引用类型对象拷贝以及内存分配

    在" .NET的堆和栈01,基本概念.值类型内存分配"中,了解了"堆"和"栈"的基本概念,以及值类型的内存分配.我们知道:当执行一个方法的时 ...

  5. 【docker】 docker容器内部安装vi命令

    有时会需要在docker容器内使用vi命令,但是新启动的docker容器内并没有vi命令,那就需要自己安装一个 1.使用命令 apt-get update 2.进行安装 apt-get install ...

  6. nginx配置location总结

    location匹配顺序 "="前缀指令匹配,如果匹配成功,则停止其他匹配 普通字符串指令匹配,顺序是从长到短,匹配成功的location如果使用^~,则停止其他匹配(正则匹配) ...

  7. Sublimetext3将空格转换为Tab

    最近在学习Python,从网上粘贴的代码很多缩进都是空格,这样就会导致代码执行的时候报错,因为Python是依靠缩进来判断代码层次的.我的编辑器是Sublime Text 3看了一下,原来转换成Tab ...

  8. 再有人问你synchronized是什么，就把这篇文章发给他

    在再有人问你Java内存模型是什么,就把这篇文章发给他.中我们曾经介绍过,Java语言为了解决并发编程中存在的原子性.可见性和有序性问题,提供了一系列和并发处理相关的关键字,比如synchronize ...

  9. spark读取 kafka nginx网站日志消息 并写入HDFS中（转）

    原文链接:spark读取 kafka nginx网站日志消息 并写入HDFS中 spark 版本为1.0 kafka 版本为0.8 首先来看看kafka的架构图 详细了解请参考官方 我这边有三台机器用 ...

  10. OpenCV学习(35) OpenCV中的PCA算法

    PCA算法的基本原理可以参考:http://www.cnblogs.com/mikewolf2002/p/3429711.html     对一副宽p.高q的二维灰度图,要完整表示该图像,需要m = ...