vue中对虚拟dom的理解知识点总结

本质是一个普通的js对象，用于描述视图界面结构的，

在mouted的回调中，可以输出_vnode，

通过图可以知道，_vnode中有以下几个主要的属性：

  • tag：组件的标签名，
  • data: 组件的属性，
  • children: 组件的子标签
  • parent: 父级元素

render函数：

作用：创建虚拟dom，

每个组件都有虚拟dom，并且虚拟dom都是由render函数创建的；

使用虚拟dom树的目的：提高渲染效率

在vue中，当渲染视图时候会调用render函数。这种渲染不仅发生在组件创建时候，还会发生在视图所依赖的数据更新时；

由于真实dom的创建、更新。插入等操作带来大量的性能消耗，从而降低渲染效率，所以使用虚拟dom树来代替真实dom。

虚拟dom如何转换成真实dom

组件实例首次渲染：生成虚拟dom树，根据虚拟dom树创建真实dom，并把真实dom挂载到页面合适位置，此时每个虚拟dom对应一个真实dom；

备注：在虚拟dom中，都由elm属性，就是真实dom，也就是说，生成的虚拟dom同时，都创出了真实dom，也就是说，第一次的渲染，vue比单纯创建dom元素要效率低，vue的高效体现在响应式数据变化的虚拟dom对比

组件依赖的数据收到响应式数据的影响时：重新调用render函数创建虚拟dom树，用新旧虚拟dom树比较，vue会找到最小更新量，然后更新必要的虚拟dom节点，最后修改对应的真实dom。这样就保证了对真实dom达到最小的变动。

真实dom的属性的数量要远远大于虚拟dom属性，并且任意的对真实dom的添加删除都会导致重排重绘问题。这非常消耗性能。

备注：真实dom和普通对象创建的耗时比较

可以看出，dom对象创建是普通对象耗时20多倍。

模板和虚拟dom的关系

vue框架中有一个compile模板，它主要负责将模板转换成为render函数，而render函数调用后将得到虚拟dom

编译过程分为两步

1.将模板字符串转换成为AST（抽象语法树，用js树形结构描述原始代码,下图通过AST在线转换可以看出结构。

2.将AST转换成为render函数

运行时编译和模板预编译

当采用传统引入方式，则编译发生的时间为组件第一次加载时，成为运行时编译

如果在vue-cli的默认情况下，编译发生在打包时（npm run build / serve），成为模板预编译。

编译是一个极其消耗性能的操作，预编译可以有效提高运行时的性能，而且由于运行的时候已经不需要编译，vue-cli在打包时会排除掉vue中的compile模块，以减少打包体积。模板的存在，仅仅是为了让开发人员更方便的写代码。

知识点扩展：

虚拟 dom 的作用

现在主流的框架都是声明式操作 dom 的框架。我们只需要描述状态与 dom 之间的映射关系即可，状态到视图（真实的 dom）的转换，框架会帮我们做。

最粗暴的做法是将状态渲染成视图，每次更新状态，都重新更新整个视图。

这种做法的性能可想而知。比较好的想法是：状态改变，只更新与状态相关的 dom 节点。虚拟 dom 只是实现这个想法的其中一种方法而已。

具体做法：

状态 -> 真实 dom（最初）

状态 -> 虚拟 dom -> 真实 dom（使用虚拟 dom）

状态改变，重新生成一份虚拟 dom，将上一份和这一份虚拟 dom 进行对比，找出需要更新的部分，更新真实 dom。

vue 中的虚拟 dom

真实的 dom 是由 节点（Node）组成，虚拟 dom 则是由虚拟节点（vNode）组成。

虚拟 dom 在 vue 中主要做两件事：

提供与真实节点（Node）对应的虚拟节点（vNode）

将新的虚拟节点与旧的虚拟节点进行对比，找出需要差异，然后更新视图

到此这篇关于vue中对虚拟dom的理解知识点总结的文章就介绍到这了,更多相关vue中对虚拟dom的理解内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue 虚拟DOM的原理

    为什么需要虚拟DOM? 如果对前端工作进行抽象的话,主要就是维护状态和更新视图,而更新视图和维护状态都需要DOM操作.其实近年来,前端的框架主要发展方向就是解放DOM操作的复杂性. 运行js的速度是很快的,大量的操作DOM就会很慢,时常在更新数据后会重新渲染页面,这样造成在没有改变数据的地方也重新渲染了DOM 节点,这样就造成了很大程度上的资源浪费. 在jQuery出现以前,我们直接操作DOM结构,这种方法复杂度高,兼容性也较差.有了jQuery强大的选择器以及高度封装的API,我们可以更方便的

  • 一篇文章带你搞懂Vue虚拟Dom与diff算法

    前言 使用过Vue和React的小伙伴肯定对虚拟Dom和diff算法很熟悉,它扮演着很重要的角色.由于小编接触Vue比较多,React只是浅学,所以本篇主要针对Vue来展开介绍,带你一步一步搞懂它. 虚拟DOM 什么是虚拟DOM? 虚拟DOM(Virtual   Dom),也就是我们常说的虚拟节点,是用JS对象来模拟真实DOM中的节点,该对象包含了真实DOM的结构及其属性,用于对比虚拟DOM和真实DOM的差异,从而进行局部渲染来达到优化性能的目的. 真实的元素节点: <div id="wr

  • vue 虚拟DOM快速入门

    虚拟 DOM 什么是虚拟 dom dom 是文档对象模型,以节点树的形式来表现文档. 虚拟 dom 不是真正意义上的 dom.而是一个 javascript 对象. 正常的 dom 节点在 html 中是这样表示: <div class='testId'> <p>你好</p> <p>欢迎光临</p> </div> 而在虚拟 dom 中大概是这样: { tag: 'div', attributes:{ class: ['testId']

  • Vue源码分析之虚拟DOM详解

    为什么需要虚拟dom? 虚拟DOM就是为了解决浏览器性能问题而被设计出来的.例如,若一次操作中有10次更新DOM的动作,虚拟DOM不会立即操作DOM,而是将这10次更新的diff内容保存到本地一个JS对象中,最终将这个JS对象一次性attch到DOM树上,再进行后续操作,避免大量无谓的计算量.简单来说,可以把Virtual DOM 理解为一个简单的JS对象,并且最少包含标签名( tag).属性(attrs)和子元素对象( children)三个属性. ----- 元素节点: 元素节点更贴近于我们

  • 关于Vue虚拟dom问题

    关于Vue虚拟dom问题

    一.什么是虚拟dom? 虚拟dom本质上就是一个普通的JS对象,用于描述视图的界面结构 在vue中,每个组件都有一个render函数, 没有render找template,没有template找el,有el就会把el.outHTML作为template,然后把这串字符串编译成render函数. 有template就不往下找了.有render同理. 每个render 函数都会返回一个虚拟dom树,这也就意味着每个组件都对应一棵虚拟DOM树. 也就是说render目的就是创建虚拟dom,这个组件到底

  • Vue使用虚拟dom进行渲染view的方法

    前提 vue版本:v2.5.17-beta.0 触发render vue在数据更新后会自动触发view的render工作,其依赖于数据驱动:在数据驱动的工作下,每一个vue的data属性都被监听,并且在set触发时,派发事件,通知收集到的依赖,从而触发对应的操作,render工作就是其中的一个依赖,并且被每一个data属性所收集,因此每一个data属性改变后,都会触发render. vue更新监听 看一段代码 // 来自mountComponent函数 updateComponent = fun

  • vue中对虚拟dom的理解知识点总结

    vue中对虚拟dom的理解知识点总结

    本质是一个普通的js对象,用于描述视图界面结构的, 在mouted的回调中,可以输出_vnode, 通过图可以知道,_vnode中有以下几个主要的属性: tag:组件的标签名, data: 组件的属性, children: 组件的子标签 parent: 父级元素 render函数: 作用:创建虚拟dom, 每个组件都有虚拟dom,并且虚拟dom都是由render函数创建的: 使用虚拟dom树的目的:提高渲染效率 在vue中,当渲染视图时候会调用render函数.这种渲染不仅发生在组件创建时候,还

  • vue中的虚拟dom知识点总结

    vue中的虚拟dom知识点总结

    目录 一.简介 二.为什么VUE引入了虚拟DOM? 三.vnode 1.vnode的类型 四.虚拟dom的核心——patch 1.patch的过程 新增节点 删除节点 更新节点 静态节点 新虚拟节点有文本属性 新虚拟节点无文本属性 五.更新子节点的优化策略 一.简介 虚拟dom是随着时代发展而诞生的产物. 命令式操作dom: 简单易用 程序中的状态很难管理,代码中的逻辑也很混乱. 现在三大主流框架都是声明式操作DOM.通过描述状态和DOM之间的映射关系,就可以将状态渲染成视图.状态可以是JS 中

  • Vue中函数防抖节流的理解及应用实现

    防抖和节流的目的都是为了减少不必要的计算,不浪费资源,只在适合的时候再进行触发计算. 一.函数防抖 定义 在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时:典型的案例就是输入搜索:输入结束后n秒才进行搜索请求,n秒内又输入的内容,就重新计时. 实现原理 函数防抖的基本思想是设置一个定时器,在指定时间间隔内运行代码时清楚上一次的定时器,并设置另一个定时器,知道函数请求停止并超过时间间隔才会执行. 使用场景 文本框输入搜索(连续输入时避免多次请求接口) 代码实现 /** * 函数防抖

  • Vue中keep-alive组件的深入理解

    前言 最近在写Vue项目的时候,遇到了一个问题,我从A路由使用parmas方式传参跳转到B路由,然后从B路由跳转到C路由,再从C路由返回B路由的时候,发现从A路由传到B路由的参数已经不存在了. 正文 我们都知道,vue组件进行路由跳转时,会销毁当前组件.所以从其他路由返回当前路由时,当前路由会重新执行生命周期钩子函数.这就导致了上述问题,A路由传到B路由的参数没了. 当遇到这种问题的时候,我们会首先想到,我们能不能让B路由的数据保存下来呢?这就不得不提到Vue的一个组件了,它就是keep-ali

  • react中的虚拟dom和diff算法详解

    虚拟DOM的作用 首先我们要知道虚拟dom的出现是为了解决什么问题的,他解决我们平时频繁的直接操作DOM效率低下的问题.那么为什么我们直接操作DOM效率会低下呢? 比如我们创建一个div,我们可以在控制台查看一下这个div上自带或者继承了很多属性,尤其是我们使用js操作DOM的时候,我们的DOM本身就很复杂,js的操作也会占用很多时间,但是我们控制不了DOM元素本身,因此虚拟DOM解决的是js操作DOM这一层面,其实解决的是减少了操作dom的次数 简单实现虚拟DOM 虚拟DOM,见名知意,就是假

  • Vue中的Object.defineProperty全面理解

    目录 Object.defineProperty理解 一.直接添加 二.使用getter.setter 需要Object.defineProperty()注意点 Object.defineProperty理解 定义:Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象. 一.直接添加 let person = {     name:'张三',     sex:'男', } Object.defineProperty(per

  • Vue中简单的虚拟DOM是什么样

    目录 1. 一个简单的虚拟DOM长什么样 2. Vue中的虚拟DOM长什么样 3. Vue中的虚拟DOM实现 4. createTextVNode 1. 一个简单的虚拟DOM长什么样 其实当今前端框架不少用到了虚拟DOM的技术,但各家有各家的实现.这里我们先看下比较简单的虚拟DOM库snabbdom的虚拟DOM长什么样 我们假设有html如下,其实也就是所谓的真实DOM <div class="message">Hello World</div> 那么snabb

  • Vue 中为什么不推荐用index 做 key属性值

    Vue 中为什么不推荐用index 做 key属性值

    目录 前言 key 的作用 key 在 diff 算法中的角色 同步头部节点 同步尾部节点 添加新的节点 删除多余节点 最长递增子序列 为什么不要用 index 性能消耗 数据错位 解决方案 总结 前言 前端开发中,只要涉及到列表渲染,那么无论是 React 还是 Vue 框架,都会提示或要求每个列表项使用唯一的 key,那很多开发者就会直接使用数组的 index 作为 key 的值,而并不知道 key 的原理.那么这篇文章就会讲解 key 的作用以及为什么最好不要使用 index 作为 key

随机推荐