Vue源码(二) 虚拟DOM和Diff算法

最新推荐文章于 2024-06-15 14:41:39 发布

Avici_Mix

最新推荐文章于 2024-06-15 14:41:39 发布

阅读量143

点赞数

分类专栏： Vue 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/OriginalMIxss/article/details/120102664

版权

一真实DOM及其解析流程

浏览器渲染引擎工作大致分为五步：创建 DOM 树——创建 Style Rules ——创建Render树——布局 Layout ——绘制 Painting

第一步，创建DOM树：使用HTML解析器，解析HTML元素，构建DOM树
第二步，生成样式表：用 CSS 分析器，分析 CSS 文件和元素上的 inline 样式，生成页面的样式表；
第三步，创建Render树：DOM树与样式表关联，构建出Render树，每个 DOM 节点都有 attach 方法，接受样式信息，返回一个 render 对象；
第四步，确定节点坐标，实现布局：根据Render树的结构，为每个Render树上的节点确定一个在显示屏上出现的精确坐标；
第五步，绘制页面：根据Render树和节点的左边，调用节点的paint方法，将其绘制出来

二虚拟DOM

虚拟DOM，是一个用来表示真实DOM的对象
真实DOM：

<ul id="list">
    <li class="item">a</li>
    <li class="item">b</li>
    <li class="item">c</li>
</ul>

虚拟DOM：

let oldDOM ={
    
        tagName: 'ul', // 标签名
        props: {
    // 标签属性
            id: 'list'
        },
        children: [ // 标签子节点
            {
   
                tagName: 'li', props: {
    class: 'item' }, children: ['a']
            },
            {
   
                tagName: 'li', props: {
    class: 'item' }, children: ['b']
            },
            {
   
                tagName: 'li', props: {
    class: 'item' }, children: ['c']
            },
        ]
    }

真实DOM中数据被修改时会生成新的一个虚拟DOM，然后Vue会对新旧的虚拟DOM进行比较

<ul id="list">
    <li class="item">a</li>
    <li class="item">b</li>
    <li class="item">d</li>
</ul>

let newDOM ={
    
        tagName: 'ul', // 标签名
        props: {
    // 标签属性
            id: 'list'
        },
        children: [ // 标签子节点
            {
   
                tagName