【💎魔仙带你啃食vue中的虚拟Dom/diff算法及各种神奇的原理🐧】

92 阅读2分钟

vue,虚拟dom,diff算法你们算什么?还有啥怪招使来,通通把你们吃掉

今天让我们一起把vue这块美食咀嚼入口吧,味道好极了!!!香喷喷!!!

首先映入眼帘的是vue响应式原理,相信大家已经滚瓜烂熟了,让我们再复习一遍。

vue响应式原理:通过ES5中的Object.defineProperty里面的set/get方法可以设置和访问属性,当检测到变化会通知watcher观察者,重新渲染当前组件,生成新的虚拟dom树🌲。vue框架会去对比新的虚拟dom与旧的虚拟dom存在的差异,并完成局部更新到真实dom树中。

虚拟Dom:js对象模拟的dom

作用:1.当状态改变时不需要立即更新dom,而是创建一个虚拟树🌲,虚拟dom内部能够对比前后两次的差异有效的更新dom

2.维护程序的状态 跟踪上一次的状态

3.复杂视图下提升渲染性能

4.还可以实现服务端渲染SSR 原生应用 小程序

WX20221118-123522.png

虚拟dom必要性:
1.创建真实dom代价高 真实dom节点实现了很多属性 虚拟dom仅实现了必要的属性 
2.触发多次重绘和回流 相当于加了一层缓冲 先在虚拟dom中修改 diff之后集中一次局部更新dom 减少了浏览器重绘和回流

vue/react技术选型

大规模的数据渲染react更快 
react搭配redux适合大规模的多人协作的复杂项目 vue适合小快的

nextTick --> 下次dom更新循环结束之后 执行延迟回调 获得更新后的dom

vue2/3区别 具体看下一章哟

1.vue2的Object.defineProperty不能监测数组的变化 可以用$set
2.vue3使用proxy 可以直接监听数组和对象的变化 不需要深度监听