Vue源码：虚拟DOM和DIFF算法

最新推荐文章于 2024-05-16 23:40:36 发布
最新推荐文章于 2024-05-16 23:40:36 发布
阅读量151 收藏
点赞数
分类专栏： # vue源码 文章标签： vue.js 算法 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43522998/article/details/120896063
版权

文章目录

简介

这里通过对snabbdom2.1版本来进行相关学习
https://github.com/snabbdom/snabbdom/tree/v2.1.0

虚拟DOM是用对象的形式来模拟DOM的结构，通过虚拟DOM前后的对比来动态更新对应的真实DOM，从而大大提高DOM更新的效率。
DIFF算法是进行虚拟DOM对比的一种高效算法

虚拟DOM

一个虚拟DOM就是一个对象，用来表示一个DOM节点的结构，其属性有
sel：标签属性
data：标签相关属性（class、id、props、src等）
children：子节点，用数组表示
text：节点文字内容
elm：真实DOM节点
key：唯一标识

在这里插入图片描述
在代码中，通过h.js来创建虚拟DOM对象，内部调用vnode.js返回虚拟对应DOM对象

DIFF算法

DIFF算法可用来对比两个虚拟DOM对象，从而对对应的真实DOM进行最小化的更新。
其核心就是patch函数，传入两个参数，一个旧对象，一个新对象。其patch整体过程如下
在这里插入图片描述
详细代码及资料可见仓库
本地仓库

Continue丶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中的虚拟dom和diff算法
webchang的博客
05-17 2106
简单理解底层的实现原理
一篇文章带你搞懂Vue虚拟Dom与diff算法
10-14
主要给大家介绍了关于Vue虚拟Dom与diff算法的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue源码：虚拟DOM和diff算法
2401_84150102的博客
04-20 525
一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。分享一些简单的前端面试题以及学习路线给大家，狂戳这里即可免费领取// 创建它的DOM，一旦调用createElement意味着：创建出DOM了，并且它的elm属性指向了创建出的DOM，但是还没有上树，是一个孤儿节点// 上树// 补充elm属性。
Vue源码：虚拟DOM和diff算法(2)
2401_84150046的博客
04-20 787
核心竞争力，怎么才能提高呢？成年人想要改变生活，逆转状态？那就开始学习吧~万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。
Vue源码：虚拟DOM和diff算法(1)
2401_84149996的博客
04-20 628
面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体免费获取} else {// 四种命中都没有命中// 制作key的map映射对象，这样就不用每次都遍历老对象了。if (!keyMap) {// 从oldStartIdx开始，到oldEndIdx结束，创建KeyMap映射对象i++) {if (key!// 寻找当前这项（nextStartIdx）这项在keyMap中的映射的位置序号。
vue学习笔记一（源码解读：虚拟DOM和diff算法）
qq_43517858的博客
11-23 486
采用TypeScript来讲解 虚拟DOM 很多地方都讲了虚拟DOM的概念，这里就不多讲了。虚拟DOM对应的概念就是真实DOM。就是我们在浏览器中看到的DOM，也是我刚开始学web的时候，写的标签渲染出来。虚拟DOM就是一个对象，存着数据。并没有开始渲染（如果有错请指出）。 看数据就很容易理解了 <div><!--真是DOM--> <ul> <li>真实DOM</li> <li>真实
vue源码之 虚拟dom 及 diff算法
小+
12-02 281
前言 目标：写一篇关于虚拟dom及vue怎么去处理节点（diff算法） 目录： 1.虚拟dom 1.1 什么是虚拟dom 1.2 为什么要引入 1.3 vuejs里的虚拟dom 1.4 总结 2.patch 2.1 patch介绍 2.2 创建节点 2.3 删除节点 2.4 更新节点 2.5 更新子节点 2.6 总结 1.1 、什么是虚拟dom 在web早期，页面交互效果比较简单，没有那么多复杂的状态需要管理，不需要频繁的去操作dom，js jq就能满足我们的需求。 随着时代发展，页面的功能越来越多，实现的
vue 虚拟dom和diff算法详解
热门推荐
weixin_42707287的博客
03-02 3万+
虚拟dom是当前前端最流行的两个框架（vue和react）都用到的一种技术，都说他能帮助vue和react提升渲染性能，提升用户体验。那么今天我们来详细看看虚拟dom到底是个什么鬼 虚拟dom的定义与作用 什么是虚拟dom 大家一定要记住的一点就是，虚拟dom就是一个普通的js对象。是一个用来描述真实dom结构的js对象，因为他不是真实dom，所以才叫虚拟dom。 虚拟dom的结构 从下图中，我们来看一看虚拟dom结构到底是怎样的 如上图，这就是虚拟dom的结构，他是一个对象，下面有6个属性.
Vue虚拟DOM和diff算法
weixin_43190804的博客
02-25 685
虚拟dom是当前前端最流行的两个框架（vue和react）都用到的一种技术，都说他能帮助vue和react提升渲染性能，提升用户体验 js执行 —>虚拟DOM( 计算变更) — > 操作真是的DOM —> 视图更新 一.虚拟dom的定义与作用 1.1什么是虚拟dom 虚拟DOM：用JavaScript对象描述DOM的层次结构。虚拟dom就是一个普通的js对象 DOM 中的一切属性都在虚拟DOM中有对应的属性。 1.2 虚拟dom的结构 1.3 虚拟dom的作用 (为什么要使用虚拟DO
Vue源码：虚拟DOM和diff算法，前端开发大型网站
2301_78416672的博客
04-04 553
点击这里即可免费获取，包括答案解析。0;i++) {// 得到当前的children// 创建它的DOM，一旦调用createElement意味着：创建出DOM了，并且它的elm属性指向了创建出的DOM，但是还没有上树，是一个孤儿节点// 上树// 补充elm属性// 返回elm,elm是一个纯DOM对象// 对比同一个虚拟节点// 判断新旧node是否是同一个对象自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
vue-dom-diff:vue 虚拟dom diff算法实现
05-05
dom-diff算法快速启动npm run start
vue 源码解析之虚拟Dom-render
10-16
主要介绍了vue 源码解析 --虚拟Dom-render的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
深入理解Vue2.x的虚拟DOM diff原理
08-29
本篇文章主要介绍了Vue2.x的虚拟DOM diff原理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue3.0+antdv的admin管理系统vue-admin-beautiful推荐
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-15 1091
几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。
vue中的事件
最新发布
weixin_43390711的博客
05-16 157
需要使用emit方法，emit(‘事件名’,参数)自定义事件名的规范（script中用小驼峰，模板中用短横线）1、组合api中2、setup语法糖中(非TS)3、setup语法糖中（使用TS）}>()
Vue.js的发展史（一）
2301_79683791的博客
05-15 751
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
基于Vue和uni-app的增强型多选框Checkbox组件开发
chenchuang0128的博客
05-16 344
该组件通过数据驱动、支持页面正反向传值等特性，提高了组件的灵活性和可重用性。未来，我们可以继续探索组件的更多可能性和应用场景，如支持条件筛选、异步加载数据等，以满足更复杂的前端需求。该组件不仅提供了基本的复选功能，还通过数据驱动、支持页面正反向传值等特性，进一步增强了组件的灵活性和可重用性。页面正反向传值：组件应该能够支持页面正反向传值，即能够将组件的状态传递给父组件，同时也能够接收父组件传递的数据。数据驱动：组件应该能够通过数据驱动，即组件的状态和行为应该由数据决定，而不是通过直接操作DOM元素来实现。
Vue3实战笔记（23）—路由Vue-Router 实战指南（关于路由命名那点事儿）
山花的博客
05-15 1037
除了 path 之外，你还可以为任何路由提供 name。在 Vue Router 中，命名路由是一种通过指定名称来标识路由的方式，而不是使用路径。这为路由的跳转提供了一种更直观和易于维护的方式。命名路由特别有用，尤其是在链接到路由时，不必硬编码 URL，也不必在路由对象中查找路径字符串。},在这个例子中，我们给路径为 /user/:username的路由命名为 user。User在这两种情况下，路由将导航到路径 /user/erina。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值