Vue源码系列讲解——虚拟DOM篇【四】(优化更新子节点)

目录

1. 前言

2. 优化策略介绍

3. 新前与旧前

4. 新后与旧后

5. 新后与旧前

6. 新前与旧后

7. 回到源码

8. 总结

1. 前言

在上一篇文章中，我们介绍了当新的VNode与旧的oldVNode都是元素节点并且都包含子节点时，Vue对子节点是

先外层循环newChildren数组，再内层循环oldChildren数组，每循环外层newChildren数组里的一个子节点，就去内层oldChildren数组里找看有没有与之相同的子节点，最后根据不同的情况作出不同的操作。

在上一篇文章的结尾我们也说了，这种方法虽然能够解决问题，但是还存在可优化的地方。比如当包含的子节点数量很多时，这样循环算法的时间复杂度就会变的很大，不利于性能提升。当然，Vue也意识到了这点，并对此也进行了优化，那么本篇文章，就来学习一下关于子节点更新的优化问题Vue是如何做的。

2. 优化策略介绍

假如我们现有一份新的newChildren数组和旧的oldChildren数组，如下所示：

newChildren = ['新子节点1','新子节点2','新子节点3','新子节点4']
oldChildren = ['旧子节点1','旧子节点2','旧子节点3','旧子节点4']

如果按照优化之前的解决方案，那么我们接下来的操作应该是这样的：先循环newChildren数组，拿到第一个新子节点1，然后用第一个新子节点1去跟oldChildren数组里的旧子节点逐一对比，如果运气好一点，刚好oldChildren数组里的第一个旧子节点1与第一个新子节点1相同，那就皆大欢喜，直接处理，不用再往下循环了。那如果运气坏一点，直到循环到oldChildren数组里的第四个旧子节点4才与第一个新子节点1相同，那此时就会多循环了4次。我们不妨把情况再设想的极端一点，如果newChildren数组和oldChildren数组里前三个节点都没有变化，只是第四个节点发生了变化，那么我们就会循环16次，只有在第16次循环的时候才发现新节点4与旧节点4相同，进行更新，如下图所示： 

上面例子中只有四个子节点，好像还看不出来有什么缺陷，但是当子节点数量很多的时候，算法的时间复杂度就会非常高，很不利于性能提升。

那么我们该怎么优化呢？其实我们可以这样想，我们不要按顺序去循环newChildren和oldChildren这两个数组，可以先比较这两个数组里特殊位置的子节点，比如：

  • 先把newChildren数组里的所有未处理子节点的第一个子节点和oldChildren数组里所有未处理子节点的第一个子节点做比对，如果相同，那就直接进入更新节点的操作；
  • 如果不同，再把newChildren数组里所有未处理子节点的最后一个子节点和oldChildren数组里所有未处理子节点的最后一个子节点做比对，如果相同，那就直接进入更新节点的操作；
  • 如果不同，再把newChildren数组里所有未处理子节点的最后一个子节点和oldChildren数组里所有未处理子节点的第一个子节点做比对，如果相同，那就直接进入更新节点的操作，更新完后再将oldChildren数组里的该节点移动到与newChildren数组里节点相同的位置；
  • 如果不同，再把newChildren数组里所有未处理子节点的第一个子节点和oldChildren数组里所有未处理子节点的最后一个子节点做比对，如果相同，那就直接进入更新节点的操作，更新完后再将oldChildren数组里的该节点移动到与newChildren数组里节点相同的位置；
  • 最后四种情况都试完如果还不同，那就按照之前循环的方式来查找节点。

其过程如下图所示： 

在上图中，我们把：

  • newChildren数组里的所有未处理子节点的第一个子节点称为：新前；
  • newChildren数组里的所有未处理子节点的最后一个子节点称为：新后；
  • oldChildren数组里的所有未处理子节点的第一个子节点称为：旧前；
  • oldChildren数组里的所有未处理子节点的最后一个子节点称为：旧后；

OK，有了以上概念以后，下面我们就来看看其具体是如何实施的。

3. 新前与旧前

把newChildren数组里的所有未处理子节点的第一个子节点和oldChildren数组里所有未处理子节点的第一个子节点做比对，如果相同，那好极了，直接进入之前文章中说的更新节点的操作并且由于新前与旧前两个节点的位置也相同，无需进行节点移动操作；如果不同，没关系，再尝试后面三种情况。 

4. 新后与旧后

把newChildren数组里所有未处理子节点的最后一个子节点和oldChildren数组里所有未处理子节点的最后一个子节点做比对，如果相同，那就直接进入更新节点的操作并且由于新后与旧后两个节点的位置也相同，无需进行节点移动操作；如果不同，继续往后尝试。 

5. 新后与旧前

把newChildren数组里所有未处理子节点的最后一个子节点和oldChildren数组里所有未处理子节点的第一个子节点做比对，如果相同，那就直接进入更新节点的操作，更新完后再将oldChildren数组里的该节点移动到与newChildren数组里节点相同的位置； 

此时，出现了移动节点的操作，移动节点最关键的地方在于找准要移动的位置。我们一再强调，更新节点要以新VNode为基准，然后操作旧的oldVNode，使之最后旧的oldVNode与新的VNode相同。那么现在的情况是：newChildren数组里的最后一个子节点与oldChildren数组里的第一个子节点相同，那么我们就应该在oldChildren数组里把第一个子节点移动到最后一个子节点的位置，如下图：

从图中不难看出，我们要把oldChildren数组里把第一个子节点移动到数组中所有未处理节点之后。

如果对比之后发现这两个节点仍不是同一个节点，那就继续尝试最后一种情况。

6. 新前与旧后

把newChildren数组里所有未处理子节点的第一个子节点和oldChildren数组里所有未处理子节点的最后一个子节点做比对，如果相同，那就直接进入更新节点的操作，更新完后再将oldChildren数组里的该节点移动到与newChildren数组里节点相同的位置；

同样，这种情况的节点移动位置逻辑与“新后与旧前”的逻辑类似，那就是newChildren数组里的第一个子节点与oldChildren数组里的最后一个子节点相同，那么我们就应该在oldChildren数组里把最后一个子节点移动到第一个子节点的位置，如下图：

从图中不难看出，我们要把oldChildren数组里把最后一个子节点移动到数组中所有未处理节点之前。

OK，以上就是子节点对比更新优化策略种的4种情况，如果以上4种情况逐个试遍之后要是还没找到相同的节点，那就再通过之前的循环方式查找。

7. 回到源码

思路分析完，逻辑理清之后，我们再回到源码里看看，验证一下源码实现的逻辑是否跟我们分析的一样。源码如下：

// 循环更新子节点function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) {let oldStartIdx = 0               // oldChildren开始索引let oldEndIdx = oldCh.length - 1   // oldChildren结束索引let oldStartVnode = oldCh[0]        // oldChildren中所有未处理节点中的第一个let oldEndVnode = oldCh[oldEndIdx]   // oldChildren中所有未处理节点中的最后一个let newStartIdx = 0               // newChildren开始索引let newEndIdx = newCh.length - 1   // newChildren结束索引let newStartVnode = newCh[0]        // newChildren中所有未处理节点中的第一个let newEndVnode = newCh[newEndIdx]  // newChildren中所有未处理节点中的最后一个let oldKeyToIdx, idxInOld, vnodeToMove, refElm// removeOnly is a special flag used only by <transition-group>// to ensure removed elements stay in correct relative positions// during leaving transitionsconst canMove = !removeOnlyif (process.env.NODE_ENV !== 'production') {checkDuplicateKeys(newCh)}// 以"新前"、"新后"、"旧前"、"旧后"的方式开始比对节点while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {if (isUndef(oldStartVnode)) {oldStartVnode = oldCh[++oldStartIdx] // 如果oldStartVnode不存在，则直接跳过，比对下一个} else if (isUndef(oldEndVnode)) {oldEndVnode = oldCh[--oldEndIdx]} else if (sameVnode(oldStartVnode, newStartVnode)) {// 如果新前与旧前节点相同，就把两个节点进行patch更新patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue)oldStartVnode = oldCh[++oldStartIdx]newStartVnode = newCh[++newStartIdx]} else if (sameVnode(oldEndVnode, newEndVnode)) {// 如果新后与旧后节点相同，就把两个节点进行patch更新patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue)oldEndVnode = oldCh[--oldEndIdx]newEndVnode = newCh[--newEndIdx]} else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right// 如果新后与旧前节点相同，先把两个节点进行patch更新，然后把旧前节点移动到oldChilren中所有未处理节点之后patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue)canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm))oldStartVnode = oldCh[++oldStartIdx]newEndVnode = newCh[--newEndIdx]} else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left// 如果新前与旧后节点相同，先把两个节点进行patch更新，然后把旧后节点移动到oldChilren中所有未处理节点之前patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue)canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)oldEndVnode = oldCh[--oldEndIdx]newStartVnode = newCh[++newStartIdx]} else {// 如果不属于以上四种情况，就进行常规的循环比对patchif (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)idxInOld = isDef(newStartVnode.key)? oldKeyToIdx[newStartVnode.key]: findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)// 如果在oldChildren里找不到当前循环的newChildren里的子节点if (isUndef(idxInOld)) { // New element// 新增节点并插入到合适位置createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)} else {// 如果在oldChildren里找到了当前循环的newChildren里的子节点vnodeToMove = oldCh[idxInOld]// 如果两个节点相同if (sameVnode(vnodeToMove, newStartVnode)) {// 调用patchVnode更新节点patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue)oldCh[idxInOld] = undefined// canmove表示是否需要移动节点，如果为true表示需要移动，则移动节点，如果为false则不用移动canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)} else {// same key but different element. treat as new elementcreateElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)}}newStartVnode = newCh[++newStartIdx]}}if (oldStartIdx > oldEndIdx) {/*** 如果oldChildren比newChildren先循环完毕，* 那么newChildren里面剩余的节点都是需要新增的节点，* 把[newStartIdx, newEndIdx]之间的所有节点都插入到DOM中*/refElm = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elmaddVnodes(parentElm, refElm, newCh, newStartIdx, newEndIdx, insertedVnodeQueue)} else if (newStartIdx > newEndIdx) {/*** 如果newChildren比oldChildren先循环完毕，* 那么oldChildren里面剩余的节点都是需要删除的节点，* 把[oldStartIdx, oldEndIdx]之间的所有节点都删除*/removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx)}}

读源码之前，我们先有这样一个概念：那就是在我们前面所说的优化策略中，节点有可能是从前面对比，也有可能是从后面对比，对比成功就会进行更新处理，也就是说我们有可能处理第一个，也有可能处理最后一个，那么我们在循环的时候就不能简单从前往后或从后往前循环，而是要从两边向中间循环。

那么该如何从两边向中间循环呢？请看下图： 

首先，我们先准备4个变量：

  • newStartIdx:newChildren数组里开始位置的下标；
  • newEndIdx:newChildren数组里结束位置的下标；
  • oldStartIdx:oldChildren数组里开始位置的下标；
  • oldEndIdx:oldChildren数组里结束位置的下标；

在循环的时候，每处理一个节点，就将下标向图中箭头所指的方向移动一个位置，开始位置所表示的节点被处理后，就向后移动一个位置；结束位置所表示的节点被处理后，就向前移动一个位置；由于我们的优化策略都是新旧节点两两更新的，所以一次更新将会移动两个节点。说的再直白一点就是：newStartIdx和oldStartIdx只能往后移动（只会加），newEndIdx和oldEndIdx只能往前移动（只会减）。

当开始位置大于结束位置时，表示所有节点都已经遍历过了。

OK，有了这个概念后，我们开始读源码：

  1. 如果oldStartVnode不存在，则直接跳过，将oldStartIdx加1，比对下一个

    // 以"新前"、"新后"、"旧前"、"旧后"的方式开始比对节点
while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {if (isUndef(oldStartVnode)) {oldStartVnode = oldCh[++oldStartIdx]}
}

  2. 如果oldEndVnode不存在，则直接跳过，将oldEndIdx减1，比对前一个

    else if (isUndef(oldEndVnode)) {oldEndVnode = oldCh[--oldEndIdx]
}

  3. 如果新前与旧前节点相同，就把两个节点进行patch更新，同时oldStartIdx和newStartIdx都加1，后移一个位置

    else if (sameVnode(oldStartVnode, newStartVnode)) {patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue)oldStartVnode = oldCh[++oldStartIdx]newStartVnode = newCh[++newStartIdx]
}

  4. 如果新后与旧后节点相同，就把两个节点进行patch更新，同时oldEndIdx和newEndIdx都减1，前移一个位置

    else if (sameVnode(oldEndVnode, newEndVnode)) {patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue)oldEndVnode = oldCh[--oldEndIdx]newEndVnode = newCh[--newEndIdx]
}

  5. 如果新后与旧前节点相同，先把两个节点进行patch更新，然后把旧前节点移动到oldChilren中所有未处理节点之后，最后把oldStartIdx加1，后移一个位置，newEndIdx减1，前移一个位置

    else if (sameVnode(oldStartVnode, newEndVnode)) {patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue)canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm))oldStartVnode = oldCh[++oldStartIdx]newEndVnode = newCh[--newEndIdx]
}

  6. 如果新前与旧后节点相同，先把两个节点进行patch更新，然后把旧后节点移动到oldChilren中所有未处理节点之前，最后把newStartIdx加1，后移一个位置，oldEndIdx减1，前移一个位置

    else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved leftpatchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue)canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)oldEndVnode = oldCh[--oldEndIdx]newStartVnode = newCh[++newStartIdx]
}

  7. 如果不属于以上四种情况，就进行常规的循环比对patch

  8. 如果在循环中，oldStartIdx大于oldEndIdx了，那就表示oldChildren比newChildren先循环完毕，那么newChildren里面剩余的节点都是需要新增的节点，把[newStartIdx, newEndIdx]之间的所有节点都插入到DOM中

    if (oldStartIdx > oldEndIdx) {refElm = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elmaddVnodes(parentElm, refElm, newCh, newStartIdx, newEndIdx, insertedVnodeQueue)
}

  9. 如果在循环中，newStartIdx大于newEndIdx了，那就表示newChildren比oldChildren先循环完毕，那么oldChildren里面剩余的节点都是需要删除的节点，把[oldStartIdx, oldEndIdx]之间的所有节点都删除

    else if (newStartIdx > newEndIdx) {removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx)
}

OK,处理完毕，可见源码中的处理逻辑跟我们之前分析的逻辑是一样的。

8. 总结

本篇文章中，我们介绍了Vue中子节点更新的优化策略，发现Vue为了避免双重循环数据量大时间复杂度升高带来的性能问题，而选择了从子节点数组中的4个特殊位置互相比对，分别是：新前与旧前，新后与旧后，新后与旧前，新前与旧后。对于每一种情况我们都通过图文的形式对其逻辑进行了分析。最后我们回到源码，通过阅读源码来验证我们分析的是否正确。幸运的是我们之前每一步的分析都在源码中找到了相应的实现，得以验证我们的分析没有错。以上就是Vue中的patch过程，即DOM-Diff算法所有内容了，到这里相信你再读这部分源码的时候就有比较清晰的思路了。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/677970.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

最佳视频转换器软件：2024年视频格式转换的选择

最佳视频转换器软件：2024年视频格式转换的选择

我们生活在一个充满数字视频的世界&#xff0c;但提供的内容远不止您最喜欢的流媒体服务目录。虽然我们深受喜爱的设备在播放各种自制和下载的视频文件方面变得越来越好&#xff0c;但在很多情况下您都需要从一种格式转换为另一种格式。 经过大量测试&#xff0c; 我们尝试过…
阅读更多...
《CSS 简易速速上手小册》第5章：CSS 动画与过渡（2024 最新版）

《CSS 简易速速上手小册》第5章：CSS 动画与过渡（2024 最新版）

文章目录 5.1 CSS 过渡基础&#xff1a;网页的微妙舞步5.1.1 基础知识5.1.2 重点案例&#xff1a;按钮悬停效果5.1.3 拓展案例 1&#xff1a;渐变显示导航菜单5.1.4 拓展案例 2&#xff1a;动态调整元素大小 5.2 关键帧动画&#xff1a;编排你的网页芭蕾5.2.1 基础知识5.2.2 重…
阅读更多...
ctfshow-web21~28-WP

ctfshow-web21~28-WP

爆破(21-28) web21 题目给了一个zip文件，打开后解压是爆破的字典，我们抓包一下网址看看 发现账号和密码都被base64了，我们发送到intruder模块，给爆破的位置加上$符圈住 去base64解码一下看看格式
阅读更多...
【PyQt】09-控件提示信息、Lable标签

【PyQt】09-控件提示信息、Lable标签

文章目录 前言一、控件提示信息1.1 代码1.2 解释 < b >在HTML标签中的作用1.3 添加按键后的代码运行结果 二、QLabel控件介绍2.1 内容2.2 常用的事件2.3 代码结果展示 总结 前言 1、控件提示信息 2、QLabel控件介绍 一、控件提示信息 关键点在于 效果如图所示&#x…
阅读更多...
VR和AR傻傻分不清，一句话给你讲明白。

VR和AR傻傻分不清，一句话给你讲明白。

不说废话&#xff0c;直接说结论&#xff0c;虚拟现实&#xff08;Virtual Reality&#xff0c;VR&#xff09;和增强现实&#xff08;Augmented Reality&#xff0c;AR&#xff09;。如果现实是A&#xff0c;虚拟是B&#xff0c;那么VRB&#xff0c;ARAB&#xff0c;就这简单&…
阅读更多...
大模型实战营第二期——3. 基于 InternLM 和 LangChain 搭建你的知识库

大模型实战营第二期——3. 基于 InternLM 和 LangChain 搭建你的知识库

github地址&#xff1a;InternLM/tutorial-书生浦语大模型实战营文档地址&#xff1a;基于 InternLM 和 LangChain 搭建你的知识库视频地址&#xff1a;基于 InternLM 和 LangChain 搭建你的知识库Intern Studio: https://studio.intern-ai.org.cn/console/instance动手学大模型…
阅读更多...
2-8 单链表+双链表+模拟栈+模拟队列

2-8 单链表+双链表+模拟栈+模拟队列

今天给大家用数组来实现链表栈和队列 单链表&#xff1a; 首先要明白是如何用数组实现&#xff0c; 在这里需要用到几个数组&#xff0c;head表示头节点的下标&#xff0c;e[i]表示表示下标为i的值&#xff0c;ne[i]表示当前节点下一个节点的下标。idx表示当前已经用到那个点…
阅读更多...
Git的基础操作指令

Git的基础操作指令

目录 1 前言 2 指令 2.1 git init 2.2 touch xxx 2.3 git status 2.4 git add xxx 2.5 git commit -m xxxx 2.5 git log及git log --prettyoneline --all --graph --abbrev-commit 2.6 rm xxx 2.7 git reset --hard xxx(含小技巧) 2.8 git reflog 2.9 mv xxx yyy 1…
阅读更多...
【BIAI】Lecture 14 - Sleep and Dreaming

【BIAI】Lecture 14 - Sleep and Dreaming

Sleep and Dreaming 专业词汇 pons 延髓 parietal cortex 顶叶皮层 limbic system 边缘系统 temporal cortex 颞叶皮层 dorsolateral prefrontal cortex 背外侧前额叶皮层 pineal gland 松果体 Suprachiasmatic Nucleus 视交叉上核 课程大纲 Sleep stages awake无眼动睡眠&am…
阅读更多...
【Python如何求出所有3位数的回文数】

【Python如何求出所有3位数的回文数】

回文数就是正向读和逆向读都相同的数&#xff0c;如66&#xff0c;626&#xff0c;72127 1、求出所有3位数的回文数python代码如下&#xff1a; # 输出所有3位数的回文数 for i in range(100, 1000): # 从100循环到999&#xff0c;不包含1000if str(i) str(i)[::-1]: # 如…
阅读更多...
动态水印怎么加 怎么去除动态水印 视频剪辑软件 会声会影安激活序列号 会声会影怎么剪辑视频

动态水印怎么加 怎么去除动态水印 视频剪辑软件 会声会影安激活序列号 会声会影怎么剪辑视频

为了防止白嫖或者增加美观效果&#xff0c;视频制作者可能会采用动态水印的方式&#xff0c;让其他人难以盗取视频使用。动态水印的添加&#xff0c;需要应用到运动路径功能。接下来&#xff0c;本文会教大家动态水印怎么加&#xff0c;怎么去除动态水印的相关内容。感兴趣的小…
阅读更多...
【知识整理】接手新技术团队、管理团队

【知识整理】接手新技术团队、管理团队

引言 针对目前公司三大技术中心的不断升级&#xff0c;技术管理岗位要求越来越高&#xff0c;且团队人员特别是管理岗位的选择任命更是重中之重&#xff0c;下面针对接手新的技术团队做简要整理&#xff1b; 一、实践操作 1、前期准备 1、熟悉情况&#xff1a; 熟悉人员&am…
阅读更多...
XSS-Lab

XSS-Lab

1.关于20关的payload合集。 <script>alert(1)</script> "><script>alert(1)</script> onclickalert(1) " onclick"alert(1) "><a href"javascript:alert(1)"> "><a HrEf"javascript:alert…
阅读更多...
【机器学习笔记】基于实例的学习

【机器学习笔记】基于实例的学习

基于实例的学习 文章目录 基于实例的学习1 基本概念与最近邻方法2 K-近邻&#xff08;KNN&#xff09;3 距离加权 KNN4 基于实例/记忆的学习器5 局部加权回归5 多种回归方式对比6 懒惰学习与贪婪学习 ​ 动机&#xff1a;人们通过 记忆和行动来推理学习。 1 基本概念与最近邻方…
阅读更多...
C#入门及进阶|数组和集合（六）：集合概述

C#入门及进阶|数组和集合（六）：集合概述

1.集合概述 数组是一组具有相同名称和类型的变量集合&#xff0c;但是数组初始化后就不便于再改变其大小&#xff0c;不能实现在程序中动态添加和删除数组元素&#xff0c;使数组的使用具有很多局限性。集合能解决数组存在的这个问题&#xff0c;下面我们来学习介绍集合…
阅读更多...
AES加密中的CBC和ECB

AES加密中的CBC和ECB

目录 1.说明 2.ECB模式&#xff08;base64&#xff09; 3.CBC模式 4.总结 1.说明 AES是常见的对称加密算法&#xff0c;加密和解密使用相同的密钥&#xff0c;流程如下&#xff1a; 主要概念如下&#xff1a; ①明文 ②密钥 用来加密明文的密码&#xff0c;在对称加密算…
阅读更多...
算法学习——LeetCode力扣二叉树篇2

算法学习——LeetCode力扣二叉树篇2

算法学习——LeetCode力扣二叉树篇2 107. 二叉树的层序遍历 II 107. 二叉树的层序遍历 II - 力扣&#xff08;LeetCode&#xff09; 描述 给你二叉树的根节点 root &#xff0c;返回其节点值 自底向上的层序遍历 。 &#xff08;即按从叶子节点所在层到根节点所在的层&#…
阅读更多...
用C语言列出Linux或Unix上的网络适配器

用C语言列出Linux或Unix上的网络适配器

上代码&#xff1a; 1. #include <sys/socket.h> 2. #include <stdio.h> 3. 4. #include <netdb.h> 5. #include <ifaddrs.h> 6. 7. int main() { 8. struct ifaddrs *addresses; 9. if(getifaddrs(&addresses) -1) { 10. printf("…
阅读更多...
贰[2]，Xamarin生成APK

贰[2]，Xamarin生成APK

1&#xff0c;生成改为Release版本 2&#xff0c;选中****.Android项目 3&#xff0c;点击生成&#xff0c;选择存档 4&#xff0c;点击分发 5&#xff0c;选择临时 6&#xff0c;添加签名标识 7&#xff0c;选择对应的签名标识&#xff0c;点击另存为
阅读更多...
Oracle 几种行转列的方式 sum+decode sum+case when pivot

Oracle 几种行转列的方式 sum+decode sum+case when pivot

目录 原始数据&#xff1a; 方式一&#xff1a; 方式二&#xff1a; 方式三&#xff1a; unpivot的使用&#xff1a; 原始数据&#xff1a; 方式一&#xff1a; select t_name,sum(decode(t_item, item1, t_num, 0)) item1,sum(decode(t_item, item2, t_num, 0)) item2,s…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023