Vue的diff算法原理

望屿

已于 2022-03-15 17:13:27 修改

阅读量1.4k

点赞数 4

分类专栏：前端源码学习和手撕文章标签： vue.js javascript 前端

于 2022-03-15 16:54:40 首次发布

本文链接：https://blog.youkuaiyun.com/darabiuz/article/details/123465698

版权

本文深入探讨Vue的Diff算法，从生成虚拟DOM开始，介绍h方法和render方法的实现，强调在不同场景下的DOM操作优化，如末尾追加、队首添加和元素翻转。同时，讨论了key的作用及为何不能使用index作为key，最后揭示了Vue中Diff算法的深度优先遍历策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

思维导图

在这里插入图片描述

0. 从常见问题引入

虚拟dom是什么?
如何创建虚拟dom?
虚拟dom如何渲染成真是dom?
虚拟dom如何patch（patch）
虚拟DOM的优势?（性能）
Vue中的key到底有什么用，为什么不能用index?
Vue中的diff算法实现
diff算法是深度还是广度优先遍历

1. 生成虚拟dom

1. h方法实现

virtual dom ，也就是虚拟节点

它通过js的Object对象模拟dom中的节点
再通过特定的render方法将其渲染成真实的dom节点

eg：

<div id="wrapper" class="1">
    <span style="color:red">hello</span>
    world
</div>

如果利用h方法生成虚拟dom的话：

h('div', {
    id: 'wrapper', class: '1' }, h('span', {
    style: {
    color: 'red' } }, 'hello'), 'world');

对应的js对象如下：

let vd = {
   
    type: 'div',
    props: {
    id: 'wrapper', class: '1' },
    children: [
        {
   
            type: 'span',
            props: {
    color: 'red' },
            children: [{
   }]
        },
        {
   
            type: '',
            props: '',
            text: 'world'
        }
    ]
}

自己实现一个h方法

 function createElement(type, props = {
   }, ...children) {
   
    // 防止没有传值的话就赋值一个初始值
    let key;
    if (props.key) {
   
        key = props.key
        delete props.key
    }
    // 如果孩子节点有字符串类型的，也需要转化为虚拟节点
    children = children.map(child => {
   
        if (typeof child === 'string') {
   
            // 把不是节点类型的子节点包装为虚拟节点
            return vNode(undefined, undefined, undefined, undefined, child)
        } else {
   
            return child
        }
    })
    return vNode(type, props, key, children)
}
function vNode(type, props, key, children, text = undefined) {
   
    return {
   
        type,
        props,
        key,
        children,
        text
    }
}

2. render方法实现

render的作用：把虚拟dom转化为真实dom渲染到container容器中去

export function render(vnode, container) {
   
    let ele = createDomElementFrom(vnode) //通过这个方法转换真实节点
    if (ele) container.appendChi

最低0.47元/天解锁文章