美文网首页
vue 中的虚拟dom树

vue 中的虚拟dom树

作者: 方_圆 | 来源:发表于2022-03-31 09:27 被阅读0次

虚拟DOM树其实就是一个普通的js对象,它是用来描述一段HTML片段的

当页面渲染的时候Vue会创建一颗虚拟DOM树

当页面发生改变Vue会再创建一颗新的虚拟DOM树

前后两颗新旧虚拟DOM树进行对比,Vue通过diff算法,去记录差异的地方

将有差异的地方更新到真实的DOM树中

虚拟DOM树有什么用? 

  vue中的虚拟DOM树只会重新渲染页面修改的地方,大大减少了对真实DOM树的操作。 -------虚拟DOM树是占内容的,但是可以帮我们提高DOM的性能。

可以这样理解,虚拟DOM树占空间,,,虚拟DOM树可以提高DOM效率,,节省时间。

Vue v-for 中 :key 到底有什么用?

   vue不直接操作真实的DOM树,通过虚拟DOM树就可以重新渲染修改的地方,重要的支撑就是 diff 算法。

key的作用是为了高效的更新虚拟DOM树,提高查找的效率,可以快速的查找到要修改的元素

相关文章

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

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

  • vue 中的虚拟dom树

    虚拟DOM树其实就是一个普通的js对象,它是用来描述一段HTML片段的 当页面渲染的时候Vue会创建一颗虚拟DOM...

  • 渲染函数&JSX

    1.基础 render函数提供javascript完全编程能力 2.节点,树以及虚拟DOM 虚拟DOM:vue通过...

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

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

  • 2019-11-23

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

  • vue render函数

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

  • 虚拟DOM(virtual DOM)

    学习Vue的童鞋应该听过虚拟DOM树的概念吧,但是虚拟DOM树到底是什么东西呢? 由于js的运行速度是非常快的,大...

  • 第五天

    1、详述虚拟DOM中的diff算法? 1.用js对象模拟DOM树 2.比较两颗虚拟dom树的差异 3....

  • Vue 基础回顾

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

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

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

网友评论

      本文标题:vue 中的虚拟dom树

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