美文网首页
vue的虚拟dom

vue的虚拟dom

作者: 苏本的书柜 | 来源:发表于2018-08-21 22:47 被阅读265次

为什么用vue

1.操作dom元素需要把html结构销毁之后,然后再进行重新生成,十分消耗性能

2.虚拟dom,通过diff算法,减少性能的消耗
vue通过建立一个虚拟DOM树对真实DOM发生的变化保持追踪。

一棵真实DOM树的渲染需要先解析CSS样式和DOM树,然后将其整合成一棵渲染树,再通过布局算法去计算每个节点在浏览器中的位置,最终输出到显示器上,
而虚拟DOM则可以理解为保存了一棵DOM树被渲染之前所包含的所有信息,而这些信息可以通过对象的形式一直保存在内存中,并通过JavaScript的操作进行维护。

用传统jquery操作dom的思想,可以先删除,然后再插入新的标签

虚拟dom会如何处理上述问题呢?

第一步:通过树的形式保存旧的dom信息,这些信息可能在页面第一次加载的时候被渲染到浏览器中,但仍是通过虚拟dom的方式创建的

第二步:检测到数据更新,需要更新dom,先在JavaScript中将需要修改的节点全部修改完成(这个步骤可以进行算法上的优化,会在后面的原理中详细说明)

第三步:将最终生成的虚拟DOM更新到视图中去。

需要付出的代价付出的只是在你的内存中需要保存一份可供维护的数据信息

相关文章

  • 学习笔记(十六)Vue.js源码剖析 - 虚拟DOM

    Vue.js源码剖析 - 虚拟DOM 虚拟DOM概念回顾 什么是虚拟DOM? 虚拟DOM(Virtual DOM)...

  • 2019-11-23

    vue虚拟DOM是什么?vue的虚拟DOM的用法 1、为什么需要虚拟DOM 前面我们从零开始写了一个简单的类Vue...

  • 【Vue】基础(虚拟DOM & 响应式原理)

    虚拟 DOM Vue 通过建立一个虚拟 DOM 来追踪自己要如何改变真实 DOM 在Vue中定义虚拟节点(VNod...

  • vue render函数

    render 函数 虚拟 DOM Vue 通过建立一个虚拟 DOM对真实 DOM 发生的变化保持追踪 Vue.js...

  • Vue 基础回顾

    Vue 基础结构 h函数:创建虚拟dom render:把h函数创建的虚拟dom返回 $mount:把虚拟dom转...

  • 【vue3源码】十二、认识虚拟DOM

    【vue3源码】十二、认识虚拟DOM 什么是虚拟DOM? 虚拟DOM(也可以称为vnode)描述了一个真实的DOM...

  • vue 2x源码分析(三)---虚拟dom

    以前用jq,我们都是直接操作dom,为什么要使用虚拟dom,虚拟dom的优势是什么,虚拟dom是如何实现的,vue...

  • Vue之虚拟DOM

    Vue之虚拟DOM 为什么要用到虚拟DOM? 众所周知,DOM操作是JavaScript语言的硬伤。浏览器对DOM...

  • 虚拟dom

    vue执行 先去创建一个虚拟dom, 将生成的虚拟dom其渲染到页面。 虚拟dom是一个对象,能够表现出dom结构...

  • vue 虚拟dom

    vnode => dom虚拟 => 真是dom (vue 初始化渲染) 更新节点

网友评论

      本文标题:vue的虚拟dom

      本文链接:https://www.haomeiwen.com/subject/kxpsiftx.html