想必大家都知道了,Vue 3.0正式版发布提前了,原本明年才能上线的改成下月了,那大家想过没有,Vue为什么更新的这么快?
近几年,前端发生了翻天覆地的变化,主要是由三大框架的出现掀起了一场“腥风血雨”,到目前也算尘埃落定了。
Vue像一匹黑马,短短几年的时间,力压群雄,成了众多公司和程序员的“新宠”,Github Star 排名荣登第一。所以Vue3.0才会这么备受关注。
很多人可能想问:“Vue3.0一来是不是意味着要重学了?”
可能还会有人想直接飞到尤大身边说:“别更了,我学不动了”。不过也有一些小伙伴始终很从容:“你更新就更新呗,问题不大。”只因他们掌握了正确学Vue的方式。
其实这个不难,首先我们需要明白的是Vue的发展方向,大家有想过这个吗?--Vue为什么要做这一系列更新?是为了解决或是优化哪些问题吗?
我们接着往下说,很多同学都是浮于应用层,所以会觉得学起来吃力,只能跟着跑。但我们记住一句话——懂原理,知底层,任你怎么变化都不怕。
我们简单来做一个分析吧,看看 Vue 1.x 到3.0都做了些什么:
Vue 1.x设计理念
早期 Vue 是采用数据绑定、依赖收集的方式去观察数据变化并保留对实际DOM元素的引用,当有数据变化时进行对应的操作。好处是少量数据更新对比 Virtual DOM性能更好,坏处是大量数据更新、初始渲染性能、对比 Virtual DOM 性能更差。
Vue 2.x设计理念
传统的 vdom 的性能和模板大小正相关,跟动态节点的数量无关。在一些组件只有少量的动态节点的情况下,这些遍历产生了性能浪费。根本原因是 JSX 和手写的 render function是完全动态的。过度的灵活性导致运行时可以用于优化的信息不足。
所以2.x的优化是,推出了一个区块树(Block tree),如图:
将模块基于动态节点指令切割为嵌套的区块
每个区块内部的节点结构是固定的
每个区块只需要一个Array追踪自身所包含的动态节点
新策略是将vdom更新性能从与整体模块大小相关提升为与动态内容的数量相关。那我们再回过头来看一下,Vue 3.0 的设计目标:
那么,如何做到更快、更小?如何实现上述这些功能?是不是还得从底层入手、看看源码存在的问题?相信大家已经心里已经有个大致的方向了。
技术都有发展变化的规律,我们要做的就是掌握规律,才能占据主动权,不会被牵着鼻子走。离Vue3.0的发布只剩短短的一个月,我们得努把力了,再不抓紧学就落后了。