Vue学习笔记总结（5） Vue的核心：虚拟Dom和Diff算法

最新推荐文章于 2024-07-14 02:59:23 发布
最新推荐文章于 2024-07-14 02:59:23 发布
阅读量204 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/songjuntao8/article/details/113004677
版权

vue高效的核心，就是虚拟的dom和diff算法，vue不通过修改dom树来达到修改的效果，而是直接在页面上改那个元素，此时这个元素就是一个虚拟的dom。那么vue怎么去改呢？ 通过diff算法，计算出虚拟的dom修改后和修改前的区别，然后在虚拟dom的原基础上进行修改，这样额效率就大大提升了。

 

 

 

★涛★
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
大前端学习 -- 虚拟 DOM 和 Diff 算法 学习笔记
爱玲姐姐的博客
09-29 1178
虚拟 DOM 和 Diff 算法 Virtual DOM的实现原理 一、Virtual DOM介绍 1. 什么是Virtual DOM Virtual DOM（虚拟DOM），是由普通的JS对象描述DOM对象，因为不是真实的DOM对象，所以叫做Virtual DOM 真实的DOM成员 非常非常多，所以创建一个DOM对象的成本非常高 可以通过Virtual DOM来描述真实DDOM，示例： { sel: 'div', data: {}, text: 'Hello Virtual DOM'
vue学习笔记一（源码解读：虚拟DOM和diff算法）
qq_43517858的博客
11-23 513
采用TypeScript来讲解 虚拟DOM 很多地方都讲了虚拟DOM的概念，这里就不多讲了。虚拟DOM对应的概念就是真实DOM。就是我们在浏览器中看到的DOM，也是我刚开始学web的时候，写的标签渲染出来。虚拟DOM就是一个对象，存着数据。并没有开始渲染（如果有错请指出）。 看数据就很容易理解了 <div><!--真是DOM--> <ul> <li>真实DOM</li> <li>真实
Vue源码：虚拟DOM和diff算法
最新发布
2401_85158559的博客
07-14 545
手写第一次上树时。
Vue源码：虚拟DOM和diff算法(2)
2401_84150046的博客
04-20 816
核心竞争力，怎么才能提高呢？成年人想要改变生活，逆转状态？那就开始学习吧~万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。
Vue源码：虚拟DOM和diff算法(1)
2401_84149996的博客
04-20 659
面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体免费获取} else {// 四种命中都没有命中// 制作key的map映射对象，这样就不用每次都遍历老对象了。if (!keyMap) {// 从oldStartIdx开始，到oldEndIdx结束，创建KeyMap映射对象i++) {if (key!// 寻找当前这项（nextStartIdx）这项在keyMap中的映射的位置序号。
Vue中的虚拟Dom，diff算法，以及diff的优化
知其白，守其黑；和其光，同其尘。
06-15 932
学习目标： 提示：这里可以添加学习目标 例如：一周掌握 Java 入门知识 学习内容： 提示：这里可以添加要学的内容 例如： 1、 搭建 Java 开发环境 2、 掌握 Java 基本语法 3、 掌握条件语句 4、 掌握循环语句 学习时间： 提示：这里可以添加计划学习的时间 例如： 1、 周一至周五晚上 7 点—晚上9点 2、 周六上午 9 点-上午 11 点 3、 周日下午 3 点-下午 6 点 学习产出： 提示：这里统计学习计划的总量 例如： 1、 技术笔记 2 遍 2、CSDN 技术博客 3 篇
Vue源码解析之虚拟DOM和diff算法学习笔记+面试考点及回答+问题及解决+心得体会及总结+snabbdom的JS版本（阉割）
weixin_54515240的博客
04-07 989
Vue源码解析之虚拟DOM和diff算法学习笔记+问题解决+snabbdom的JS版本（阉割）+心得体会及总结+面试考点及回答
Vue源码：虚拟DOM和diff算法(2)，学习路线+知识点梳理
2401_84097520的博客
04-04 977
h函数用来产生虚拟节点h函数用来产生比如这样会调用h函数将得到这样的虚拟节点“data”: {props: {},“text”: “尚硅谷”它表示的真正DOM节点一个虚拟节点都有哪些属性children: undefined, // 子元素data: {}, // 属性、样式elm: undefined, // 对应真正DOM节点，如果为undefined，表示该节点还未上树key: undefined, // 节点唯一标识sel: “div”, // 选择器。
vue笔记3 虚拟dom、重流、diff
qq_44613178的博客
03-17 1423
老规矩 先放链接致敬作者 使用虚拟dom和真实dom的区别 详细理解重绘与回流/重排的过程 display:none和visibility:hidden两者的区别 v-if和v-show、display: none和visibility：hidden的区别 vue核心之虚拟DOM(vdom) 深入 React 之 diff 算法 虚拟dom 真实DOM操作： document.get…查询的是整个节点树。 ParentNode.querySelector()和ParentNode.querySelector
Vue中“枚举”的用法
songjuntao8的专栏
01-18 9345
这里的枚举加了引号，并不是真正的枚举，前台经常会遇到用一些数字代表某些状态，数字不知道代表的具体意思，后期维护起来不方便，所以用类似于后台的枚举处理。vue项目中有很多种枚举的写法和用法，但是使用起来都太麻烦。下面介绍一种（基于vue+element+admin）： 1.在单独的js文件中：test.js conststatustest={ insert:0, update:1, delete:2 } 2.在main.js中添加引用。 3.在vue页...
Vue报错 Invalid prop: type check failed for prop “model“. Expected Object, got Array
songjuntao8的专栏
01-30 3797
前台页面报错“Invalid prop: type check failed for prop “model”. Expected Object, got Array ” 错误：期望对象，得到的是数组 从后台获取的数据是List类型，需要把它改为Object this.form=[] 改为 this.form={} 或者：response.data 改为：response.data[0]; ...
vue-cli 安装过程中报错npm ERR! code EEXIST npm ERR! path
songjuntao8的专栏
01-28 2204
在安装vue/cli，报错的问题如下： 尝试清缓存：npm cache clean –force (清楚npm缓存) 还是不行 把此文件夹下的缓存文件夹删除（亲测可以） 再次执行 npm install @vue/cli –g 就可以了 网上另外一种说法是： 把安装node文件夹下的node_cache（node缓存文件夹）跟node_global（全局安装是安装在node_global目录下的）两个文件夹下的内容全部删除 ...
HBuilder X打包H5网址登录后又跳转登录页
songjuntao8的专栏
11-06 1433
HBuilder X 打包H5网址登录后又跳转登录页，记一次移动端很奇怪的一次登陆现象
Vue实现按回车键执行方法
songjuntao8的专栏
05-04 1212
mounted(){ //绑定事件 window.addEventListener('keydown',this.keyDown); } methods:{ getData(){ }, keyDown(e){ //如果是回车则执行登录方法 if(e.keyCode == 13){ this.getData(); } } } destroyed(){ window.removeEven...
前后端分离，内外网环境不通图片加载问题
songjuntao8的专栏
09-29 658
1.后端图片上传采用 .net core webapi，上传到磁盘指定目录。 2.前端使用Vue 一般的处理都是采用反向代理，把前端的url替换为api访问的url加上图片的相对路径进行访问，前端的图片是完整的后端url，正常是没有问题，现在是公司的入口企业微信是外网，api是内网的，通过网络策略处理调整是可以的，但是因为子系统很多，每个都要设置太麻烦，没办法，只好请求接口，把图片转换为字节流，加载在控件上。 后端关键代码： 前端关键代码： ...
Vue项目编译报错 ‘error:03000086:digital envelope routines::initialization error‘
songjuntao8的专栏
12-29 434
Vue项目编译报错 'error:03000086:digital envelope routines::initialization error'
vue2.0和vue3.0创建项目
songjuntao8的专栏
12-31 361
vue2.0和vue3.0创建项目
Vue学习笔记总结（8） 各组件之间的参数传递
songjuntao8的专栏
02-02 207
4.各组件之间的参数传递 1）父传子 通过子组件的props部分，来指明可以接收的参数，父组件通过在标签中写明参数的键值对来传递参数。 Props是表示一个组件的参数部分，那么props的写法有两种： props:[参数列表] 比如：props:[‘’prop1,’prop2’…] 2) props:{ Mytitle:{ type:String, required:true, default:’XXXX’ } } 子传父（一个比较复杂...
vue虚拟dom和diff算法
04-05
Vue的虚拟DOM和diff算法是Vue框架的核心部分，它们是Vue实现高效渲染的关键。 虚拟DOM是指在Vue中，将真实的DOM抽象成一个虚拟的JavaScript对象，通过对这个虚拟对象的操作来实现对真实DOM的操作。虚拟DOM具有以下...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值