一、什么是虚拟DOM

我们都知道DOM是什么，它是实实在在的被渲染在页面上的，我们平时的操作都和DOM息息相关。那什么是虚拟DOM？首先，虚拟DOM一定是我们看不见的，我们看得见的都叫做真实DOM。
虚拟DOM其实是Vue创建的抽象的DOM，是以一颗以JavaScript对象(VNode)节点为基础，用对象属性来描述节点的树。简单来说，就是一个js对象，至少包含了（tag）标签名、（attrs）属性名、（children）子元素对象三个属性。

二、虚拟DOM的作用

提高性能

当我们更改某个节点时，往往是直接覆盖了原来的节点，当其是一个拥有多个子节点时的DOM时，如果只改了其中一个子节点，就需要重新覆盖整个节点，会造成不必要的性能浪费。

虚拟DOM在其中起到的作用简单来说就是：通过对比新旧虚拟DOM，来判断哪些节点是需要改的，哪些节点是不需要改的，这一步是diff算法实现的，所以可以智能地计算出重新渲染组件的最小代价。之后会通过patch算法将虚拟DOM转换为真实DOM。然后展现到视图上

三、通过模板转换成视图来理解

Vue.js是通过编译将template模板转换成渲染函数render的，执行渲染函数就可以得到一个虚拟节点树。之后通过对比新旧虚拟DOM的差异得出最优解，渲染到视图上。

其中patch算法可以将虚拟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原理
1.定义: 虚拟DOM其实就是用一个原生的JS对象去描述一个DOM节点,实际上它只是对真实 DOM 的一层抽象.最终可以通过一系列操作使这棵树映射到真实环境上. 相当于在js与DOM之间做了一个缓存, ...
vue核心之虚拟DOM(vdom)与真实DOM页面渲染过程
一.真实DOM和其解析流程? 浏览器渲染引擎工作流程都差不多,大致分为5步,创建DOM树--创建StyleRules--创建Render树--布局Layout--绘制Painting 第一步,用HTM ...
探秘vue核心之虚拟DOM与diff算法
探秘vue核心之虚拟DOM与diff 一.真实DOM和其解析流程所有的浏览器渲染引擎工作流程大致分为5步: 创建 DOM 树 -> 创建 Style Rules -> 构建 Render ...
React 中的虚拟 DOM 是什么？
虚拟 DOM 是一个基本的 React 概念.如果您在过去几年编写过 React 代码,您可能听说过它.但是,你可能不明白它是如何工作的以及 React 为何使用它. 本文将介绍什么是虚拟 DOM,它 ...
面试准备—vue核心之虚拟DOM(vdom)
vue核心之虚拟DOM 一.真实DOM和其解析流程? 二.JS操作真实DOM的代价! 三.为什么需要虚拟DOM,它有什么好处? 四.实现虚拟DOM 一.真实DOM和其解析流程? 浏览器渲染引擎工作流程 ...
[vue] 什么是虚拟DOM？
[vue] 什么是虚拟DOM? 虚拟 dom 是相对于浏览器所渲染出来的真实 dom 的,在react,vue等技术出现之前,我们要改变页面展示的内容只能通过遍历查询 dom 树的方式找到需要修改的 ...

Vue中的虚拟DOM

文章目录

一、什么是虚拟DOM

二、虚拟DOM的作用

提高性能

三、通过模板转换成视图来理解

Vue中的虚拟DOM相关推荐

最新文章

热门文章