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