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. shell中set的用法(转)

    使用set命令可以设置各种shell选项或者列出shell变量.单个选项设置常用的特性. 在某些选项之后-o参数将特殊特性打开.在某些选项之后使用+o参数将关闭某些特性, 不带任何参数的set命令将显 ...

  2. windows控制台程序——关于UNICODE字符的总结(转)

    前言:从Windows NT/2000开如,Windows系统已经是一个标准的UNICODE系统,系统内部所有字符串存储及操作均使用UNICODE编码.因此Win32 API都是UNICODE版本的, ...

  3. STM32 3.3V参考电压 TL431/MC1403/LM385

    TL431作为一个高性价比的常用分流式电压基准,有很广泛的用途. 图(1)是TL431的典型接法,输出一个固定电压值,计算公式是: Vout = ( (R1+R2) / R2 ) * 2.5 V 同时 ...

  4. 点赞和吐糟Adblock Plus~进阶教程

    前言:Adblock Plus后文都简称ABP,这是一篇ABP进阶教程!用ABP实现flashBlock和NoScript.推荐有相当基础的阅读.刚開始学习的人先看懂这里:http://adblock ...

  5. idea安装Lombok及使用介绍

    原文:https://blog.csdn.net/motui/article/details/79012846 Lombok使用 介绍 在项目中使用Lombok可以减少很多重复代码的书写.比如说get ...

  6. Tomcat与Gzip与缓存

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...

  7. freecms怎样在信息列表类标签中提取info.content

    原文地址:http://javaz.cn/site/javaz/site_study/info/2015/22026.html 项目地址:http://www.freeteam.cn/ 因为info. ...

  8. cout的输出格式初探

    在C++中,cout代表的是标准输出设备,即显示器,相对于C语言中所使用的printf函数,cout显得更为灵活.下面以30.300和1024三个数为例子,简单说明cout输出时所选格式的输出.cou ...

  9. C语言的32个保留字

    auto :声明自动变量 double :声明双精度变量或函数 int: 声明整型变量或函数 struct:声明结构体变量或函数 break:跳出当前循环 else :条件语句否定分支(与 if 连用 ...

  10. Visual Studio Code 构建C/C++开发环境

    转自: https://blog.csdn.net/lidong_12664196/article/details/68928136#visual-sutdio-code%E4%BB%A5%E5%8F ...