Vue中diff算法核心函数揭秘 —— patch函数

绝地灬酷狼 2022-12-03 01:59 215阅读 0赞

说在前面

本文接上篇 vue虚拟dom详解，会讲到以下几点：

diff 算法的实现过程
diff 算法步骤说明
diff算法核心函数:patch()

diff 算法的实现过程

format_png

Vue的diff算法是基于snabbdom改造过来的，仅在同级的vnode间做diff。

递归地进行同级vnode的diff，最终实现整个DOM树的更新。

因为跨层级的操作是非常少的，忽略不计，这样时间复杂度就从O(n3)变成O(n)。

diff 算法步骤说明

用 JavaScr

发表评论取消回复

表情：

评论列表（有 0 条评论，215人围观）

还没有评论，来说两句吧...

相关阅读

相关 Linux命令diff与patch

diff 用法：diff [OPTION] ...文件逐行比较FILES。长选项的强制性参数对于短选项也是必需的。 --

悠悠/ 2023年07月10日 11:21/ 0 赞/ 97 阅读

相关 vue dom diff算法

index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="U

电玩女神/ 2023年02月14日 10:38/ 0 赞/ 114 阅读

相关手摸手vue中虚拟dom函数和diff算法

snabbdom简介和测试环境搭建 1. `npm i-S snabbdom` 2. npm i -D webpack@5 webpack-cli@3 w

r囧r小猫/ 2023年01月08日 02:12/ 0 赞/ 218 阅读

相关 vue中的diff算法

一、是什么diff算法先来一句概念： > diff算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个节点不同的地方，最后用patch记录的消息去局部更新

朴灿烈づ我的快乐病毒、/ 2023年01月07日 07:06/ 0 赞/ 246 阅读

相关 vue diff算法

1. 概览图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9

旧城等待，/ 2022年12月22日 09:27/ 0 赞/ 251 阅读

相关 Vue3 DOM Diff 核心算法解析

「观感度：????????????????????」「口味：辣炒花蛤」「烹饪时间：10min」 > 本文已收录在前端食堂同名仓库Github github.co

谁践踏了优雅/ 2022年12月15日 02:58/ 0 赞/ 266 阅读

相关 Vue中diff算法核心函数揭秘 —— patch函数

> 说在前面本文接上篇 [vue虚拟dom详解][vue_dom]，会讲到以下几点： 1. diff 算法的实现过程 2. diff 算法步骤说明 3. diff算

绝地灬酷狼/ 2022年12月03日 01:59/ 0 赞/ 216 阅读

相关 vue核心面试题：diff算法

一、diff算法的时间复杂度两个树的完全的 diff 算法是一个时间复杂度为 O(n3) , Vue 进行了优化·O(n3) 复杂度的问题转换成 O(n) 复杂度的问

小灰灰/ 2022年11月27日 00:48/ 0 赞/ 385 阅读

相关 diff和patch 打补丁

在Linux环境下，有两个工具用来给project打补丁，即diff和patch diff diff具有比较功能。可以使用man命令查看其使

怼烎@/ 2022年08月11日 00:48/ 0 赞/ 346 阅读

相关 diff patch 命令制作补丁

diff 命令 `diff`可以比较两个文件，并可同时记录下二者的区别。制作补丁时的一般用法和常见选项为： > diff 【选项】源文件（夹）目的文件（夹） >

悠悠/ 2022年03月19日 05:40/ 0 赞/ 527 阅读