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 原生应用 小程序
虚拟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 可以直接监听数组和对象的变化 不需要深度监听