Vue虚拟dom-patch算法

最新推荐文章于 2022-04-06 21:15:20 发布
最新推荐文章于 2022-04-06 21:15:20 发布
阅读量142 收藏
点赞数
分类专栏： Vue.js 文章标签： 算法
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mikon_0703/article/details/111577881
版权

虚拟dom最核心的就是patch算法，将vnode渲染成真实的dom，对比新旧vnode之间的差异；patch的目的是修改dom节点，更新视图
对现有的dom进行修改需要做三件事：

  • 创建新增的dom
    在这里插入图片描述

  • 删除已废弃的节点
    一个节点只在oldVnode存在，则需要从dom中删除

  • 修改需要更新的节点
    在这里插入图片描述

草莓味的狮子座leo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Patch:虚拟DOM最核心的部分--如何对比虚拟DOM树,以及如果生成真实DOM
weixin_45847735的博客
12-29 821
虚拟DOM最核心的部分是patch,它可以将vnode渲染成真实DOM. patch也可以叫做patching算法,通过它渲染真实DOM时,并不会暴力覆盖原有DOM.而是比对新旧俩个vnode之间有哪些不同,然后根据对比结果找出需要更新的节点进行更新.这点从名字就可以看出,patch本身就有补丁,修补等意思.其实际作用是在现有DOM上进行修改来实现更新视图的目的. 之所以要这么做，主要是因为DOM操作的执行速度远不如JavaScript的运算速度快。因此，把大量的DOM操作搬运到JavaScript 中，.
【Vue2深度学习】虚拟DOM篇-Patch主流程
小王的技术库
09-19 613
虚拟DOM最核心的部分是patch，它通过Vue-Diff算法，比对新旧两个vnode之间有哪些不同，然后根据比对结果找出需要更新的节点进行更新，最终将vnode渲染成真实的DOM。整个patch的过程，其实就是创建节点、删除节点和修改节点的过程。
VUE虚拟DOM-patch算法
麻瓜哇哇哇的博客
02-12 656
简介 虚拟DOM最核心的部分就是patch，它可以将vnode渲染成真实的DOM，而对比两个vnode之间的差异只是patch的一部分，patch的目的是修改DOM节点，也可以理解为渲染视图，并且patch不是暴力替换节点，而是在现有DOM上进行修改。对现有DOM进行修改需要做三件事： 创建新增的DOM 删除已经废弃的节点 修改需要更新的节点 为什么使用pacth算法来计算出真正需要更新的节点...
vue：虚拟dom的patch
weixin_34341229的博客
02-27 233
源码目录：src/core/vdom/patch.js function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) { let oldStartIdx = 0 let newStartIdx = 0 let ...
＜深入浅出Vuejs＞虚拟DOM_Patch()
VIRUSESCZ的博客
04-06 1008
＜深入浅出Vuejs＞虚拟DOM_Patch()
vue2.0的虚拟DOM渲染思路分析
10-18
当数据变化时，Vue首先会计算出新的虚拟DOM树，然后通过对比新旧虚拟DOM树的差异（即Diff算法），找出最小的修改路径，只更新必要的部分，这个过程称为“reconciliation”。 2. 虚拟DOM的使用 Vue 2.0 自己实现了...
Vue使用虚拟dom进行渲染view的方法
10-15
3. **比较新旧虚拟DOM**：Vue将新的VTree与旧的VTree进行比较，这个过程称为“Diff”算法。如果两个VTree完全相同，那么不需要做任何操作。如果不同，Vue会找出最小的差异，然后只更新必要的部分。 4. **应用变更**...
从零解析Vue源码---内涵注释
07-25
在Vue中，当数据发生变化时，不会直接操作实际DOM，而是先构建一棵虚拟DOM树，然后通过 diff 算法找出最小改动集，最后将这些改动应用到真实DOM上。这样避免了频繁的DOM操作，提高了性能。Vue的`patch`函数是实现这...
虚拟dom && diff算法
01-08
- 在Vue中，当数据发生变化时，Vue会自动重新计算虚拟DOM树，并使用Diff算法找到最小更新路径。这使得Vue能够高效地更新视图，同时避免不必要的DOM操作。 5. **性能优化** - 虚拟DOM的惰性原则：只有在实际需要的...
详解vue的diff算法原理
08-27
在本文中，我们将详细介绍 Vue 的 diff 算法原理，diff 算法是 Vue 框架中的一种关键技术，用于高效地更新虚拟 DOM 和真实 DOM。本文将从以下几个方面来介绍 diff 算法的原理： 1. 何时更新节点？ 当数据发生变化...
Vue3设计思路 -- 虚拟DOM以及patch算法
weixin_46240162的博客
07-16 713
function reactive(obj) { const proxy = new Proxy(obj, { get(target, key) { /* render函数第一次渲染的时候会获取引用的值 所以第一次渲染就会走到这个 get 方便我们开始做依赖收集 / track(target, key) return target[key] }, set(target, key, value) { target[key] = value console.log(‘proxy’, key) / 修改的时候，去
深入浅出Vue.js阅读——虚拟DOM——patch
从人到猿
09-28 605
虚拟DOM最核心的部分是patch，它可以将vnode渲染成真实的DOM
vue虚拟dom核心方法patch解析
前端啤酒屋
07-15 695
浏览器渲染引擎流程 创建DOM树——>创建StyleRules——>创建Render树——>布局Layout——>绘制Painting 虚拟DOM，virtual Dom 首先虚拟DOM 并不是Vue独有的，包括React等其他前端框架，只要采用了先计算后操作实体DOM都可以统称为基于虚拟DOM。 其设计是为了解决浏览器的性能问题。 snabbdom 而Vue的虚拟DOM技术 主要基于GitHub 中的snabbdom： snabbdom：一个专注于简单性、模块化、强大功能和性能.
Vue-Vnode类型
Mikon_0703
12-23 1219
Vnode的类型 1.注释节点 export const createEmptyVNode = text => { const node = new VNode() node.text = text; node.isComment = true; return node } // 一个注释节点只有两个有效属性` text `和 `isComment` 2.文本节点 export function createT
Vue-循环引用
Mikon_0703
11-25 829
一、递归组件 组件在自身的模板中调用自身的，通过name选项 例如：name：‘unique-name-of-my-component’ 使用Vue.component注册全局组件时，全局的id会自动设置为该组件的name选项 Vue.component('unique-name-of-my-component', { // ... }) 二、组件之间的循环引用 组件在渲染树中护卫对方的后代/祖先——一个悖论；先把两个组件设为A和B，模块系统发现需要A，但是A依赖于B，B又依赖于A，如此往
Vue虚拟dom的优化
Mikon_0703
12-22 569
虚拟节点vnode包含以下属性 { tag:'div' //标签名 data:{...} // 属性数据 attrs、props、event、style、class children:[...] // 子节点数据，vnode结构 text: undefined // 文本 elm: undefined // 真实dom key: undefined // 节点标识 } Vue的优化策略 尝试几种可能的变化，快速查找差异，减少不必要的循环 …前：子节点列表中所有未处理的..
Vue深入响应式原理
Mikon_0703
12-18 527
Vue响应式：数据发生变化，会重新渲染页面 完成这个过程，我们需要： 侦查数据的变化 数据劫持 / 数据代理 收集视图依赖的数据 依赖收集 数据变化时，自动通知需要更新的视图部分进行更新 发布-订阅模式 一、如何侦查数据的变化 - 数据劫持 使用Object.defineProperty和Proxy 数据模型是普通的js对象，把一个普通的js对象传入Vue实例当作data选项，Vue会遍历此对象的property，并使用Object.defineProperty把property全部转为ge
Vuex_demo
Mikon_0703
12-18 377
1.在src目录中新建store文件，store文件夹中新建index.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) // new Vuex.Store 创建对象 export default new Vuex.Store({ state：{ ...共享的数据 count:0 }， // 对state中的数据进行处理，不会修改 getters:{ ...方法 showNum(count){ ..
vue 虚拟DOM的算法原理
最新发布
07-29
Vue 使用虚拟DOM（Virtual DOM）算法来提高性能。虚拟DOM是一个轻量级的JavaScript对象树，它与实际的DOM结构相对应，但是只是在内存中存在，并不直接操作实际的DOM。当数据发生变化时，Vue会通过比较新旧虚拟DOM树的差异来更新实际的DOM。 虚拟DOM算法的主要原理如下： 1. 初始渲染：在初始渲染时，Vue会将组件的模板转换为一个初始的虚拟DOM树。这个虚拟DOM树会与实际的DOM结构进行对应。 2. 数据变化：当组件的数据发生变化时，Vue会生成一个新的虚拟DOM树。 3. 差异计算：Vue会将新旧虚拟DOM树进行比较，找出它们之间的差异。这个差异被称为补丁（patch）。 4. 更新实际DOM：根据补丁，Vue会对实际的DOM结构进行更新。它会尽量最小化对实际DOM的操作，只更新需要变化的部分。 5. 重新渲染：完成DOM更新后，新的虚拟DOM树变为旧的虚拟DOM树，等待下一次数据变化时重新进行差异计算和更新。 通过使用虚拟DOM，Vue能够避免频繁地直接操作实际的DOM，从而提高了性能。虚拟DOM算法能够智能地计算出最小化的DOM操作，并且在大部分情况下比直接操作实际DOM更高效。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值