Une compréhension approfondie du DOM virtuel et de l'algorithme Diff dans Vue dans un article-Voir.js-php.cn

Cet article vous aidera à apprendre Vue et à bien comprendre le DOM virtuel et l'algorithme de comparaison. J'espère qu'il sera utile à tout le monde !

Une compréhension approfondie du DOM virtuel et de l'algorithme Diff dans Vue dans un article

L'objectif principal de cet article est de permettre à chacun de comprendre vraiment et complètement le DOM virtuel et l'algorithme de comparaison. Alors, qu'est-ce qu'une compréhension vraie et approfondie ? A nous d’éliminer nous-mêmes leurs couches inférieures ! De comment le DOM virtuel est généré par la fonction de rendu (fonction h) (fonction h manuscrite), au principe de l'algorithme de comparaison (algorithme de comparaison manuscrit), et enfin comment le DOM virtuel passe Diff se transforme en un vrai DOM (en fait, la transformation d'un DOM virtuel en un vrai DOM est couverte par l'algorithme diff) Afin de faciliter la compréhension pour tout le monde, l'article peut impliquer. plus de points et le contenu est plus long. J'espère que vous serez tous patients et que vous y regarderez de plus près, et enfin j'espère que vous lui donnerez un 虚拟DOM如何被渲染函数（h函数）产生（手写h函数），到 diff算法原理（手写diff算法）、最后 虚拟DOM如何通过diff变为真正的DOM的（事实上，虚拟DOM变回真正的DOM，是涵盖在diff算法里面的），为了方便大家去理解，可能文章涉及的点比较多，内容比较长，希望大家耐心细品，最后希望各位大佬点一个赞！！！。

好了，废话不多说，正式进入文章主题，让你真正的、彻底掌握虚拟DOM 和 diff算法。下面，我们一步步来实现虚拟DOM和diff算法。【相关推荐：vuejs视频教程】

简单介绍一下虚拟DOM 和 diff算法

先用一个简单的例子来说一下 虚拟DOM 和 diff算法：比如有一个户型图，现在我们需要对这个户型图进行下面的改造，

Une compréhension approfondie du DOM virtuel et de lalgorithme Diff dans Vue dans un article

其实，这个就是相当于一个进行找茬的游戏，让我们找出与原来的不同之处。下面，我已经将不同之处圈了出来，

Une compréhension approfondie du DOM virtuel et de lalgorithme Diff dans Vue dans un article

现在，我们已经知道了要进行哪些改造了，但是，我们该如何进行改造呢？最笨的方法就是全部拆了再重新建一次，但是，在我们实际中肯定不会进行拆除再新建，这样效率太低了，而且代价太昂贵。确实是完成了改造，但是，这不是一个最小量的更新，所以我们想要的是 diff，

Une compréhension approfondie du DOM virtuel et de lalgorithme Diff dans Vue dans un article

那么diff是什么呢？其实，diff 在我们计算机中就是代表着最小量更新的一个算法，会进行精细化对比，以最小量去更新。这样你就会发现，它的代价比较小，也不会昂贵，也会比较优化，所以对应在我们 Vue底层中是非常关键的。
好了，现在回归到我们的Vue中，上面的户型图中就相当于vue中的 DOM节点，我们需要对这些节点进行改造（增删调），然后以最小量去更新DOM，这样就会避免我们性能上面的开销。

// 原先DOM
<div class="box">
        <h2>标题</h2>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>

Copier après la connexion

// 修改后的DOM
<div class="box">
        <h2>标题</h2>
        <span>青峰</span>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>

Copier après la connexion

在这里，我们就可以利用 diff算法进行精细化对比，实现最小量更新。上面我们了解了什么是diff，下面再来简单了解一下什么是虚拟DOM，

<div class="box">
        <h2>标题</h2>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>

Copier après la connexion

{
    sel: "div",
    elm: undefined, // 表示虚拟节点还没有上树
    key: undefined, // 唯一标识
    data: {
        class: { "box" : true}
    },
    children: [
        {
            sel: "h2",
            data: {},
            text: "标题"
        },
        {
            sel: "ul",
            data: {},
            children: [
                { sel: li, data: {}, text: "1"},
                { sel: li, data: {}, text: "2"},
                { sel: li, data: {}, text: "3"}
            ]
        }
    ]
}

Copier après la connexion

通过观察可以发现，虚拟DOM 是一个 JavsScript对象，里面包含 sel选择器，data数据，text文本内容，children子标签等等，一层嵌套一层。这样就表达了一个 虚拟DOM结构，处理虚拟DOM 的方式总比处理真实的DOM 要简单并且高效，所以 diff算法 是发生在 虚拟DOM like ! ! !
. D'accord, sans plus tarder, entrons officiellement dans le sujet de l'article, afin que vous puissiez véritablement et complètement maîtriser le DOM virtuel et l'algorithme de comparaison. Ci-dessous, nous implémentons étape par étape le DOM virtuel et l'algorithme de diff. [Recommandations associées : tutoriel vidéo vuejs

]🎜

🎜 Présentons brièvement le DOM virtuel et l'algorithme de comparaison 🎜

🎜 Utilisons d'abord un exemple simple pour expliquer le DOM virtuel et l'algorithme de comparaison : Par exemple, il existe un plan d'étage . Nous devons maintenant apporter les modifications suivantes à ce plan d'étage, 🎜🎜 Une compréhension approfondie du DOM virtuel et de lalgorithme Diff dans Vue dans un article

Une compréhension approfondie du DOM virtuel et de lalgorithme Diff dans Vue dans un article

🎜🎜En fait, cela équivaut à un jeu de recherche des différences, nous permettant de découvrir les différences par rapport à l'original. Ci-dessous, j'ai encerclé les différences, 🎜🎜 2 .png

🎜🎜Maintenant, nous savons quelles transformations nous devons opérer, mais comment les réaliser ? Le moyen le plus stupide est de tout démolir et de le reconstruire à nouveau. En réalité, nous ne le démolirons certainement pas et ne le reconstruirons pas. C'est trop inefficace et trop coûteux. La transformation est bel et bien terminée, mais ce n'est pas une mise à jour minimale, donc ce que nous voulons c'est un diff, 🎜🎜 Une compréhension approfondie du DOM virtuel et de lalgorithme Diff dans Vue dans un article

🎜🎜Alors, qu'est-ce que la différence ? En fait, diff est un algorithme qui représente la mise à jour minimale de nos ordinateurs. Il effectuera une comparaison affinée et une mise à jour avec le montant minimum. De cette façon, vous constaterez que son coût est relativement faible, peu cher et relativement optimisé, il est donc très critique de correspondre à notre couche inférieure Vue. 🎜D'accord, revenons maintenant à notre Vue. Le plan d'étage ci-dessus est équivalent aux nœuds DOM dans Vue. Nous devons modifier ces nœuds (ajouter, supprimer, ajuster), puis

mettre à jour le DOM avec le montant minimum<. /code> code>, cela évitera notre surcharge de performances. 🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;"> h(&amp;#39;a&amp;#39;,{ props: {href: &amp;#39;http://www.baidu.com&amp;#39;}, &amp;#39;百度&amp;#39;})</pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">{ sel: &amp;#39;a&amp;#39;, data: { props: {href: &amp;#39;http://www.baidu.com&amp;#39;}}, text: &quot;百度&quot;}</pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div>🎜Ici, nous pouvons utiliser l'<code>algorithme diff pour effectuer des comparaisons affinées et obtenir des mises à jour minimales

. Ci-dessus, nous comprenons ce qu'est la différence, comprenons brièvement ce qu'est le DOM virtuel 🎜

<a href = "http://www.baidu.com">百度</a>

Une compréhension approfondie du DOM virtuel et de l'algorithme Diff dans Vue dans un article

简单介绍一下 虚拟DOM 和 diff算法

🎜 Présentons brièvement le DOM virtuel et l'algorithme de comparaison 🎜

h函数（创建虚拟DOM）

手写 h函数

感受 diff 算法

patch 函数

我对Vue中虚拟DOM和diff算法的理解

简单介绍一下虚拟DOM 和 diff算法