oa做软件还是网站,企业网站手机网站建设,网站建设模块怎样划分,网站流量大小对网站有什么影响1. 当数据发生变化时#xff0c;vue是怎么更新节点的#xff1f;
要知道渲染真实DOM的开销是很大的#xff0c;比如有时候我们修改了某个数据#xff0c;如果直接渲染到真实dom上会引起整个dom树的重绘和重排#xff0c;有没有可能我们只更新我们修改的那一小块dom而不要…1. 当数据发生变化时vue是怎么更新节点的
要知道渲染真实DOM的开销是很大的比如有时候我们修改了某个数据如果直接渲染到真实dom上会引起整个dom树的重绘和重排有没有可能我们只更新我们修改的那一小块dom而不要更新整个dom呢diff算法能够帮助我们。
我们先根据真实DOM生成一颗virtual DOM当virtual DOM某个节点的数据改变后会生成一个新的Vnode然后Vnode和oldVnode作对比发现有不一样的地方就直接修改在真实的DOM上然后使oldVnode的值为Vnode。
diff的过程就是调用名为patch的函数比较新旧节点一边比较一边给真实的DOM打补丁。
有点类似这样
divp123/p
/divscript
var Vnode {tag: div,children: [{ tag: p, text: 123 }]
};
/script// 在采取diff算法比较新旧节点的时候比较只会在同层级进行, 不会跨层级比较。
