vue中的虚拟DOM原理
1、定义:
虚拟DOM其实就是用一个原生的JS对象去描述一个DOM节点
,实际上它只是对真实 DOM 的一层抽象。最终可以通过一系列操作使这棵树映射到真实环境上。
相当于在js与DOM之间做了一个缓存,利用patch(diff算法
)对比新旧虚拟DOM记录到一个对象中按需更新, 最后创建真实的DOM
2、虚拟dom原理流程
模板 ==> 渲染函数 ==> 虚拟DOM树 ==> 真实DOM
vuejs通过编译将模板(template)转成渲染函数(render),执行渲染函数可以得到一个虚拟节点树
在对 Model 进行操作的时候,会触发对应 Dep 中的 Watcher 对象。Watcher 对象会调用对应的 update 来修改视图。
虚拟 DOM 的实现原理主要包括以下 3 部分:
- 用 JavaScript 对象模拟真实 DOM 树,对真实 DOM 进行抽象;
diff 算法
— 比较两棵虚拟 DOM 树的差异;pach 算法
— 将两个虚拟 DOM 对象的差异应用到真正的 DOM 树。
图解:![](/assets/blank.gif)
- 渲染函数: 渲染函数是用来生成
Virtual DOM
的。- VNode虚拟节点: 它可以代表一个真实的dom节点。通过
createElement
方法能将VNode
渲染成 dom 节点。简单地说,vnode可以理解成节点描述对象
,它描述了应该怎样去创建真实的DOM节点- patch(也叫做patching算法): 虚拟DOM最核心的部分,它可以将vNode渲染成真实的DOM,这个过程是
对比新旧虚拟节点
之间有哪些不同,然后根据对比结果找出需要更新的的节点进行更新
3、虚拟DOM好处
- 具备跨平台的优势–由于 Virtual DOM 是以
JavaScript 对象
为基础而不依赖真实平台环境,所以使它具有了跨平台的能力,比如说浏览器平台、Weex、Node 等。 - 操作 DOM 慢,js运行效率高。我们可以将DOM对比操作
放在JS层
,提高效率。运用patching算法来计算出真正需要更新的节点,最大限度地减少DOM操作
,从而显著提高性能。Virtual DOM 本质上就是在 JS 和 DOM 之间做了一个缓存。 - 提升渲染性能 Virtual DOM的优势不在于单次的操作,而是在大量、频繁的数据更新下,能够对视图进行合理、
高效的更新
- 虚拟DOM就是为了
解决浏览器性能问题
而被设计出来的
vue中的虚拟DOM原理相关推荐
- 浅谈Vue中的虚拟DOM
Virtual DOM 是JavaScript按照DOM的结构来创建的虚拟树型结构对象,是对DOM的抽象,比DOM更加轻量型 为啥要使用Virtual DOM 当然是前端优化方面,避免频繁操作DOM, ...
- 简单实现Vue中的虚拟dom
简单实现Vue中的虚拟dom 传送门:简单实现Vue中的插值替换(三) 前言: 要想简单实现虚拟dom,首先我们要了解虚拟dom,知道自己要实现的是个什么东西. 说起来,我刚开始学习Vue的时候对虚拟 ...
- vue 中的虚拟dom树
虚拟DOM树其实就是一个普通的js对象,它是用来描述一段HTML片段的 当页面渲染的时候Vue会创建一颗虚拟DOM树 当页面发生改变Vue会再创建一颗新的虚拟DOM树 前后两颗新旧虚拟DOM树进行对比 ...
- Vue中的虚拟DOM
文章目录 一.什么是虚拟DOM 二.虚拟DOM的作用 提高性能 三.通过模板转换成视图来理解 一.什么是虚拟DOM 我们都知道DOM是什么,它是实实在在的被渲染在页面上的,我们平时的操作都和DOM息息 ...
- Vue虚拟DOM原理及面试题(笔记)
Vue虚拟DOM原理及面试题(笔记) 面试题:请你阐述一下对vue虚拟dom的理解 什么是虚拟dom? 虚拟dom本质上就是一个普通的JS对象,用于描述视图的界面结构 在vue中,每个组件都有一个re ...
- JavaScript是如何工作的:编写自己的Web开发框架 + React及其虚拟DOM原理
摘要: 深入JS系列19. 原文:JavaScript是如何工作的:编写自己的Web开发框架 + React及其虚拟DOM原理 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是专门 ...
- 探秘vue核心之虚拟DOM与diff算法
探秘vue核心之虚拟DOM与diff 一.真实DOM和其解析流程 所有的浏览器渲染引擎工作流程大致分为5步: 创建 DOM 树 -> 创建 Style Rules -> 构建 Render ...
- vue核心之虚拟DOM(vdom)与真实DOM页面渲染过程
一.真实DOM和其解析流程? 浏览器渲染引擎工作流程都差不多,大致分为5步,创建DOM树--创建StyleRules--创建Render树--布局Layout--绘制Painting 第一步,用HTM ...
- React 中的虚拟 DOM 是什么?
虚拟 DOM 是一个基本的 React 概念.如果您在过去几年编写过 React 代码,您可能听说过它.但是,你可能不明白它是如何工作的以及 React 为何使用它. 本文将介绍什么是虚拟 DOM,它 ...
最新文章
- Symfony2 学习笔记之命令app/console
- pytorch系列 ---5以 linear_regression为例讲解神经网络实现基本步骤以及解读nn.Linear函数
- 病毒加壳技术与脱壳杀毒方法解析
- c语言 java 性能 测试_这个蓝桥杯系统的题,用c语言去评测是满分,改为Java说运行错误是0分,但是我查看输入输出,至少第...
- sqoop将hive导出到mysql_Sqoop hive导出到mysql[转]
- 用9种办法解决 JS 闭包经典面试题之 for 循环取 i
- 操作系统——文件的逻辑结构
- 电脑剪贴板在哪里打开_如何把在公司电脑上复制的内容,粘贴到家里的电脑?超好用!...
- PDE2 three fundamental examples
- [js开源组件开发]js文本框计数组件
- Autodesk 3dsMax 2019安装注册教程
- URL rewrite
- linux考试中的7654_7654支持的未启用卡指的是()
- php 将数字转为大写,将数字小写转为大写 php
- 纯干货分享,2021年阿里巴巴社招面试题总结,本人上周已成功入职!
- 【论文阅读笔记】BERT: Pre-training of Deep Bidirectional Transformers for Language Understanding
- 纽约大学Yann LeCun深度学习
- 关于功耗芯片那些事(四)
- java胶囊咖啡机_雀巢Piccolo XS小星星胶囊咖啡机详细介绍
- CSS Border (边框)