AI 助理
文档备案控制台
文章 2023-07-06 来自：开发者社区

深入探究Vue diff算法

1.虚拟dom虚拟 DOM （ Virtual DOM ）是对 DOM 的 JS 抽象表示，它们是 JS 对象，能够描述 DOM 结构和关系。应用的各种状态变化会作用于虚拟DOM ，最终映射到 DOM 上。优点1. 虚拟 DOM 轻量、快速：当它们发生变化时通过新旧虚拟 DOM 比对可以得到最小 DOM 操作量，从而提升性能patch(vnode, h('div#app', obj.foo)) ....

深入探究Vue diff算法
文章 2023-06-21 来自：开发者社区

[vue.js设计和实现]简单的Dom Diff算法

今天翻看了vue.js设计和实现的第九章内容，主要是谈论Dom的Diff算法。因为实际操作dom的开销很大，所以有dom的Diff算法来减小操作dom的次数，来提高性能。一.比较标签元素通过比较标签的元素，来减少操作dom的次数。只要新旧子节点中的标签相同，我们就只更新节点的内容就可以二.新旧子节点的数量不同第一点中，我们默认了新旧子节点的数量是一样的，但是实际中我们可以要卸载或挂载上节点。这时....

[vue.js设计和实现]简单的Dom Diff算法
文章 2023-05-07 来自：开发者社区

面试官：为什么Vue中不要用index作为key？（diff算法详解）

前言Vue 中的 key 是用来做什么的？为什么不推荐使用 index 作为 key？常常听说这样的问题，本篇文章带你从原理来一探究竟。示例以这样一个列表为例：<ul> <li>1</li> <li>2</li> </ul>那么它的 vnode 也就是虚拟 dom 节点大概是这样的。{ tag: 'ul', ...

文章 2023-04-20 来自：开发者社区

Vuejs设计与实现 —— 渲染器核心 Diff 算法（下）

快速 Diff 算法Vue.js 3 借鉴了 ivi 和 inferno 这两个框架中使用的算法：快速 Diff 算法，这个算法的性能优于 Vue.js 2 中所采用的 双端 Diff 算法.以下涉及的源码位置均在：vue-core-3.2.31-main\packages\runtime-core\src\renderer.ts 中的 patchKeyedChildren 函数中节点预处理对于....

Vuejs设计与实现 —— 渲染器核心 Diff 算法（下）
文章 2023-04-20 来自：开发者社区

Vuejs设计与实现 —— 渲染器核心 Diff 算法（上）

前言当组件发生更新时会重新执行 render 方法生成新的 vnode 节点，而当 新旧vnode 都是 一组节点 时，为了以最小的性能开销完成 更新操作，需要比较两组子节点，其中用于比较的算法就叫 Diff 算法。Vue 中的 Diff 算法实际上也是一个逐步演进的过程，那么下面就来看看它是如何演进、优化成如今的 Diff 算法的。简单 diff 算法在进行 新旧 两组子节点的更新时，去遍历 ....

Vuejs设计与实现 —— 渲染器核心 Diff 算法（上）
文章 2023-01-11 来自：开发者社区

从:key的角度，来看Vue3中diff算法的实现原理（多图详解）

Hi~，我是一碗周，一个在舒适区垂死挣扎的前端，如果写的文章有幸可以得到你的青睐，万分有幸~写在前面在我们使用v-for指令的时候，尤大大建议我们为每一项都添加一个唯一的属性key，在Vue文档中是这么说的：为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一的keyattribute，除非遍历输出的 DOM 内容非常简单。看到这，是不是会有以下....

从:key的角度，来看Vue3中diff算法的实现原理（多图详解）
文章 2022-08-23 来自：开发者社区

vue相关面试题:diff算法

文章目录diff是什么比较方式原理分析总结diff是什么diff 算法是一种通过同层的树节点进行比较的高效算法其有两个特点：♥比较只会在同层级进行, 不会跨层级比较♥在diff比较的过程中，循环从两边向中间比较diff 算法的在很多场景下都有应用，在 vue 中，作用于虚拟 dom 渲染成真实 dom 的新旧 VNode 节点比较比较方式diff整体策略为：深度优先，同层比较比较只会在同层级进行....

文章 2022-06-25 来自：开发者社区

Vue源码之虚拟DOM和diff算法(一) 使用snabbdom

前言：如果这篇文章对你有帮助，请不要吝啬你的赞。什么是虚拟DOM和diff算法diff算法简介要把左图装修成右图的样子。(哪里不同？仔细找)有两种方案。方案一：拆掉重建(效率低，代价大)方案二：diff(精细化比对，最小量更新)怎么看都应该会选择方案二。那么在Vue中使用 diff的情景呢?上图就是在Vue中使用 diff的情景(比如左图中，有一些元素的 v-if为false，所以不显示，而右图....

Vue源码之虚拟DOM和diff算法(一) 使用snabbdom
文章 2022-06-07 来自：开发者社区

重学Vue【组件更新和diff算法】

网络异常，图片无法展示|重学Vue源码，根据黄轶大佬的vue技术揭秘，逐个过一遍，巩固一下vue源码知识点，毕竟嚼碎了才是自己的，所有文章都同步在 公众号(道道里的前端栈) 和 github 上。正文在前面分析过了Vue的组件的创建过程，并没有说到当组件数据发生变化会发生什么以及如何更新组件，本篇过一下组件更新的细节。前面讲响应式对象的时候提到，当数据发生变化的时候，会触发渲染 watcher ....

重学Vue【组件更新和diff算法】
问答 2020-05-23 来自：开发者社区

你了解vue的diff算法吗？

[vue] 你了解vue的diff算法吗？

本页面内关键词为智能算法引擎基于机器学习所生成，如有任何问题，可在页面下方点击"联系我们"与我们沟通。

VUE.js您可能感兴趣

阿里巴巴终端技术

阿里巴巴终端技术最新内容汇聚在此，由阿里巴巴终端委员会官方运营。阿里巴巴终端委员会是阿里集团面向前端、客户端的虚拟技术组织。我们的愿景是着眼用户体验前沿、技术创新引领业界，将面向未来，制定技术策略和目标并落地执行，推动终端技术发展，帮助工程师成长，打造顶级的终端体验。同时我们运营着阿里巴巴终端域的官方公众号：阿里巴巴终端技术，欢迎关注。

+关注