虚拟DOM理解笔记

最新推荐文章于 2024-07-23 16:37:55 发布
最新推荐文章于 2024-07-23 16:37:55 发布
阅读量110 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44912410/article/details/107718322
版权

虚拟DOM原理

DOM：
浏览器中提供的概念，用js对象，表示页面上的元素，并提供一些操作元素的API
虚拟DOM：
是框架中的概念，使用js对象来模拟DOM元素和嵌套关系，虚拟DOM是以JS对象的形式存在的
本质：用js对象，来模拟DOM元素和嵌套关系
目的：为了实现页面元素的高效更新

Diff算法：
* tree diff 
新旧两棵DOM树逐层对比的过程，当整棵DOM逐层对比完毕，则所有需要被按需更新的元素，必然能够找到
* component diff
在进行tree diff的时候，每一层中组件级别的对比，
-如果对比前后，组件中的类型相同，则暂时认为此组件不需要更新，
-如果前后对比，组件类型不同，则需要移除就组件，创建新组件，并追加到页面上
* element diff
在进行component diff的时候，如果两个组件类型相同，则需要进行元素级别的对比
不要放弃
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【前端学习笔记】虚拟DOM
你好呀，欢迎你的到来。
04-16 1583
1，VUE中虚拟DOM原理 用JS表示DOM结构。 DOM很慢，而javascript很快，用javascript对象可以很容易地表示DOM节点。DOM节点包括标签、属性和子节点，通过VElement表示如下。 根据虚拟DOM树构建出真实的DOM树。具体思路：根据虚拟DOM节点的属性和子节点递归地构建出真实的DOM树。 用JS对象表示DOM结构，那么当数据状态发生变化而需要改变DOM结构时，我们先...
什么是虚拟Dom
G_XUI的博客
09-22 803
一、前言 虚拟DOM概念随着react的诞生而诞生，由facebook提出，其卓越的性能很快得到广大开发者的认可；继react之后vue2.0也在其核心引入了虚拟DOM的概念，本文将以vue2.0使用的snabbdom入手，来介绍虚拟DOM的主要实现原理。 二、虚拟DOM 在开始介绍snabbdom之前我们想来想两个问题， （1）什么是虚拟DOM？ vdom可以看作是一个使用javascript模拟了DOM结构的树形结构，这个树结构包含整个DOM结构的信息，如下图： 可见左边的DOM结构，不论是标签名称
Vue 虚拟DOM（Virtual DOM）（笔记自用）
weixin_39763711的博客
08-18 219
虚拟DOM（Virtual DOM）
理解React的虚拟DOM
luoshaoyun的博客
02-16 2644
一、背景 React是一个用于构建用户界面的JavaScript库，区别于老的前端开发技术，其最核心的就是引入了虚拟DOM的技术。为了对React有一个比较全面和深入的了解，所以把最近学习React虚拟DOM的知识，做个笔记，仅供学习。 二、什么是虚拟DOM 那什么是虚拟DOM呢？官方解析是，Virtual DOM是一种编程概念。通俗点理解，虚拟DOM是一棵虚拟的JavaScript对象树，画重点，”虚拟的“、”JS对象“，指的是它把真实的网页文档节点，虚拟成一个个的j...
React开发笔记，React立意选取最小块设计，元素化每个dom标签，在内存中进行操作，引起Dom的最小render，节约
01-25
其核心理念是通过最小化DOM操作来提高性能，这是通过引入虚拟DOM实现的。虚拟DOM是React在内存中创建的一个DOM表示，允许它高效地计算出最小的变更集，从而减少实际DOM的更新次数。 在React中，组件是构建UI的基本...
JavaSript DOM总结笔记.rar
03-01
- React: Facebook推出的库，其虚拟DOM提高了性能。 - Vue: 基于组件的轻量级框架，也提供了便捷的DOM操作。 8. **性能优化** - 避免使用`getElementByTagName()`和`getElementsByTagName()`遍历整个文档。 - ...
前端笔记
08-22
React是Facebook推出的组件化开发库，强调虚拟DOM和JSX语法；Vue则以其轻量级和易上手著称，支持指令和组件系统；Angular是Google的全面解决方案，提供双向数据绑定和依赖注入。 五、浏览器原理 了解浏览器的工作...
xinmd笔记(啦啦啦啦啦啦)
11-10
Vue和React是目前非常流行的两个前端框架，Vue.js笔记可能包含了组件化开发、虚拟DOM、指令系统等内容，而React.js笔记则可能讨论了JSX、组件生命周期、状态管理（如Redux或MobX）等主题。此外，“dva和umi”是一些...
web前端笔记
07-28
React以其组件化思想、虚拟DOM和JSX语法深受开发者喜爱；Vue以其易学易用和全面的生态系统受到欢迎；Angular则提供完整的解决方案，包括路由、服务、指令等。 7. **前端构建工具**：Webpack、Gulp、Grunt等工具用于...
Vue 3 和 SpringBoot 实现文件分片上传示例
exlink2012的专栏
07-22 336
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
HarmonyOS应用开发者高级认证，Next版本发布后最新题库 - 多选题序号4
Gusha_的博客
07-23 626
HarmonyOS应用开发者高级认证最新题库，编写于2024年7月19日，Next版本发布之后
软件著作权申请教程（超详细）（2024新版）软著申请
m0_75269526的博客
07-23 602
软件著作权申请教程（超详细）（2024新版），软著申请，软件著作权怎么申请，手把手教你申请软件著作权，不花冤枉钱，软著申请代理，软件著作权申请着手开始准备材料了。如果是多人合作开发著作权人不是一个人的话，还需要准备一份合作开发协议。首先我们需要在官网里面注册一个账号，并且完成实名认证，一般是注册【个人】的身份。在填报完成之后需要打印一个签章页签字（如果不是个人需要盖章）注册完成后点击下面进行登记，如果没有实名需要先实名认证（源代码：源程序前连续的30页和后连续的30页。这一页的内容比较多，可以参考我下面的。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 930
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
Vue使用FullCalendar实现日历/周历/月历
_小郑有点困了的博客
07-23 84
需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。
VUE 子组件可以直接改变父组件的数据吗
Cshaosun的博客
07-23 69
如果子组件需要修改父组件的数据，‌应该通过触发一个自定义事件来通知父组件进行数据的变更。‌父组件在接收到子组件触发的事件后，‌可以修改数据，‌从而间接地改变父组件的数据。‌这种方式通过明确的事件通信机制，‌保证了数据流的单向性和组件之间的解耦。需要注意的是，‌虽然Vue提供了一些特殊的方法来实现子组件修改父组件数据，‌但这种方式打破了数据流的单向性，‌增加了组件之间的耦合性，‌因此应谨慎使用。在Vue中，‌如果确实需要在子组件中修改父组件的数据，‌可以通过以下步骤实现：‌。
VUE中的重点*
qq_61132537的博客
07-22 751
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
Vue3企业级项目开发实战课-笔记记录
tuku0801的专栏
07-20 952
实践 Vue 3 自研组件库开发、Node.js 服务端开发、Vue 3 结合 Node.js 的全栈项目开发以及全栈项目的单元测试等大厂常见的项目技术场景
Vue事件总线（EventBus）的概念、使用以及注意事项
最新发布
weixin_53216033的博客
07-23 441
在Vue开发中，组件间的通信是不可避免的需求。对于父子组件间的通信，Vue提供了props和$emit/$on等内置机制。然而，当需要在非父子关系的组件间进行通信时，这些内置机制就显得力不从心了。这时，Vue事件总线（EventBus）作为一种灵活的解决方案应运而生啦。本篇文章将详细讲解Vue事件总线的原理、安装、使用及最佳实践，帮助大家更好地去理解和应用这一技术。
vue 虚拟 DOM理解
08-20
Vue 的虚拟 DOM 是一种在内存中以 JavaScript 对象的形式表示页面结构的技术。它是 Vue 在渲染页面时的一个关键概念。 传统的 DOM 操作是直接操作页面上的实际 DOM 元素，而虚拟 DOM 则是通过 JavaScript 对象来描述页面结构。当数据发生变化时，Vue 会先更新虚拟 DOM，然后通过比较新旧虚拟 DOM 的差异，最后只对实际需要更新的部分进行重新渲染，这样可以减少实际 DOM 操作的次数，提高性能。 使用虚拟 DOM 的好处有以下几点： 1. 性能优化：通过比较新旧虚拟 DOM 的差异，只更新需要更新的部分，减少实际 DOM 操作次数，提高渲染性能。 2. 跨平台支持：由于虚拟 DOM 是以 JavaScript 对象的形式存在，因此可以在不同的平台上使用，例如浏览器、移动端、服务器端等。 3. 方便的抽象层：Vue 的虚拟 DOM 提供了一种方便的抽象层，使开发者可以更轻松地操作页面结构，而不需要直接操作实际 DOM 元素。 总的来说，Vue 的虚拟 DOM 技术能够提高性能，并且使开发更加方便和灵活。通过对比新旧虚拟 DOM 的差异，只更新需要更新的部分，减少了实际 DOM 操作的开销，提高了页面渲染的效率。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值