你怎么理解vue中的diff算法？-CSDN博客

你怎么理解vue中的diff算法？

源码分析1：必要性，lifecycle.js-mountComponent()

源码分析2：执行方式，patch.js-patchVnode()

源码分析3：高效性，patch.js-updateChildren()

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="demo">
        <h1>虚拟DOM</h1>
        <p>{{ foo }}</p>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        // 创建实例
        const app = new Vue({
            el: '#demo',
            data: {
                foo: 'foo'
            },
            mounted () {
                setTimeout(() => {
                    this.foo = 'foooooo'
                }, 1000)
            }
        })
    </script>
</body>
</html>

总结

1.diff算法是虚拟DOM技术的必然产物：通过新旧虚拟DOM作对比(即diff)，将变化的地方更新在真
实DOM上；另外，也需要diff高效的执行对比过程，从而降低时间复杂度为O(n)。

2.vue 2.x中为了降低Watcher粒度，每个组件只有一个Watcher与之对应，只有引入diff才能精确找到
发生变化的地方。

3.vue中diff执行的时刻是组件实例执行其更新函数时，它会比对上一次渲染结果oldVnode和新的渲染
结果newVnode，此过程称为patch。

4.diff过程整体遵循深度优先、同层比较的策略；两个节点之间比较会根据它们是否拥有子节点或者文
本节点做不同操作；比较两组子节点是算法的重点，首先假设头尾节点可能相同做4次比对尝试，如果
没有找到相同节点才按照通用方式遍历查找，查找结束再按情况处理剩下的节点；借助key通常可以非
常精确找到相同节点，因此整个patch过程非常高效。