Virtual Dom（虚拟Dom）

Virtual DOM

目前大火的vue和react底层都是采用了Virtual Dom来进行视图的更新，那么什么叫virtual dom，为什么要使用virtual dom呢？

首先我们纵观前端的发展路程，从上世纪末html css javascript逐步登上历史舞台伊始，除了中途出现了jsp这样的技术之外，前端方向一直围绕这御三家在发展，由最开始的html为主的纯静态网页，到后来css丰富多样的样式效果，再到后来js的不断进化，出现了复杂的交互网站。而由于这三种语言之间错综复杂的关系，导致了每个程序员写出的程序千奇百怪，多种多样，再加上为了完成一些复杂的交互，js，html，css这种互相交合的渲染方式十分不便于统一调度，就非常令人苦恼和痛苦，好在js在慢慢的迭代过程中，敏锐的注意到了这一需求，并巧妙的实现了一些方法，最终让html和css逐步融合到js的管辖里来，这便是Virtual Dom

Virtual Dom主要负责由模板生成虚拟dom，再挂载到页面中，之后监听各个节点的变化，通过分析每次变化的状态来重新渲染当前页面

今天我们就着重介绍实现virtual dom的一系列方法

 

compile

parse

Vue首先需要将我们写的<template>模板经过parse、optimize 与 generate三个阶段，才能得到render function。首先是parse，parse会通过正则等处理方式将vue模板解析成 AST（抽象语法树），实际上js在理解vue的时候template就是一个大string，先循环遍历每一个标签，再通过正则的办法将tag，key的等一系列标签属性识别出来。然后使用一个stack维护解析好的标签头，这样就形成了标签的父子关系。最后封装成element，这就是最终的AST节点了。

optimize

第二步是optimize，optimize 主要作用就跟它的名字一样，用作「优化」，我们在解析AST树的时候，为那些不会随数据发生变化的项加上static属性，在 patch 的时候我们就可以直接跳过这些被标记的节点的比对，从而达到「优化」的目的。

generate

第三步是generate，generate 会将 AST 转化成 render funtion 字符串，最终得到 render 的字符串以及 staticRenderFns 字符串。

以上是非常非常粗略的介绍，详细讲解可以看这篇博客

https://blog.csdn.net/wangxinxin1992816/article/details/108676692

 

render挂载

 

createElement()  

createElement是js的原生方法，负责生成一个原生element

之后配合appendChild就可以挂载到页面了

let content_ = document.createElement("div");
content_.innerText = '123';

document.body.appendChild(content_); // 挂载到页面
document.body.removeChild(content_)  // 从页面移除

 

Object.defineProperty

defineProperty是一个js原生的拦截器，也是vue响应式的核心，其接受三个参数 target, key, function ，target就是目标对象，key是对象的属性，第三个参数就是get和set方法，当改变拦截器指定的属性时，就会触发set方法，在set方法中就可以对视图进行刷新了

Object.defineProperty(target, key, {
    get(){
        // 这里就是get取值方法
    },
    set(val){
        // 这里是值改变时所做的操作
    }
})

那么如何对对象中的每个属性进行监听呢，我们可以通过配合for in遍历就可以得到

function observe(target){
    if (typeof target !== 'object' || target === null) {
        return target
    }
    
    for(let key in target){
        defineReactive(target, key, target[key])
    }
}

function defineReactive(target, key, value){
    Object.defineProperty(target, key, {
        get(){
            return value
        },
        set(new_value){
            if(new_value !== value){
                value = new_value;

                // 更新视图
            }
        }
    })
}

 

 

 

本文参考

https://blog.csdn.net/wangxinxin1992816/article/details/108676692