社区微信群开通啦,扫一扫抢先加入社区官方微信群
社区微信群
DOM 操作慢是对比于JS原生API,如数组操作,任何基于DOM的库(VUE/React)都不可能在操作DOM时比DOM快。
一个能代表DOM树的对象,同窗含有标签名、标签上的属性、事件监听和子元素们,以及其他属性。
const vNode = {
key:null,
props:{
children:[ //子元素们
{type:'span',...},
{type:'span',...}
],
className:"red",//标签上的属性
onClick:() => {} //事件
},
ref:null,
type:"div", //标签名 or 组件名
...
//有个div里面有两个子元素span,div有class和事件监听,onClick事件是一个函数,的虚拟dom。
}
const cNode = {
tag:"div",//标签名 or 组件名
data:{
class:"red",//标签上的属性
on:{
click:() => {//事件
}
},
children:[//子元素们
{tag:"span",...},
{tag:"span",...}
],
...
}
}
//vue里面表示一个div,class为“red”,onclick
creatElement(
'div',//标签名
{classNmae.'red',onClick:() => {}},
[
creatElement('span',{//属性},'span1内容'),
creatElement('sapn',{},'sapn2内容')
]
)
//创建一个div里边有两个span
现在创建虚拟DOM方法—通过Babel 转为creatElement 形式
<div className="red" onClaick={fn}>
<sapn> span1内容 </span>
<sapn> span2内容 </span>
</div>
h('div',{
class:'red',
on:{
click: () => {}
},
},[h('span',{},'span1内容'),h('span',{},'span2内容')])
现在创建虚拟DOM方法—通过vue-loader 转为 h 形式
<div className="red" @claick="fn">
<sapn> span1内容 </span>
<sapn> span2内容 </span>
</div>
需要额外的创建函数,如createElement 或 h,但可以通过JSX来简化成XML写法。
把虚拟DOM想象成树形
<div :class="x">
<sapn v-if="y"> {string1} </span>
<sapn> {string2} </span>
</div>
x从red变成green :
DOM diff 发现 :
就是一个函数,我们称之为patch;
patches= patch(oldVNode,newVNode)
paatches 就是要运行的DOM操作,可能长这样:
[
{type: 'INSERT' , vNode:...},
{type: 'TEXT' , vNode:...},
{type: 'PROPS' , propsPatch:[...] //属性}
]
Tree diff
Component diff
Element diff
同级比较存在bug,会出现识别错误的问题,用:key="item.id"
解决。
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!