1.懒观察
在 2.x 版本里,不管数据多大,都会在一开始就为其创建观察者。当数据很大时,这可能会在页面载入时造成明显的性能压力。
3.x 版本,只会对「被用于渲染初始可见部分的数据」创建观察者,而且 3.x 的观察者更高效。
2.精准变更通知
2.x 版本中,使用 Vue.set 来给对象新增一个属性时,这个对象的所有 watcher 都会重新运行;
3.x 版本中,只有哪一个属性的 watcher 才会重新运行。
3.diff算法优化
为虚拟DOM增加静态标志
4.生命周期钩子函数
5.组件传值优化
6.TypeScript的支持
7.项目结构改变
移除了 static 文件夹,新增 public 文件夹,并且 index.html 移动到 public 中
在 src 文件夹中新增了 views 文件夹,用于分类 视图组件 和 公共组件
vue2.x面临的问题
vue2.x版本发布于数年前,基于es5的技术架构,受限于当时通用浏览器的版本问题,在某些功能方面做了一些拖鞋:
1.监听数据的方法Object.definePerproty(), 不能对Object类型做深度监听。而为了深度监听,以及为了达到目的所要付出的代价,也就是递归遍历绑定。
2.Mixins, 模版中的数据来源不清晰,不知道来自哪里的mixin,并且容易发生明明冲突
3.性能问题,在创建 HOC以及 基于 scoped slots / 作用域插槽封装逻辑的组件 时,需要额外的组件
4.功能分块混乱,我们需要把逻辑分别散落在data,methods对象里,有时候,需要来回滚动。
vue3.x的主要优势
更快(引入Proxy对象)
vue3重新审视了 vdom,更改了自身对于 vdom的对比算法。vdom从之前的每次更新,都进行一次完整遍历对比,改为了切分区块树,来进行动态内容更新。也就是只更新 vdom的绑定了动态数据的部分,把速度提高了6倍;
并且vue3.x把 definePerproty改为了 proxy,对于 JavaScript引擎更加友好,响应更加高效。
更小 (按需引入)
之前 vue的代码,只有一个 vue对象进来,所有的东西都在 vue上,这样的话其实所有你没用到的东西也没有办法扔掉,因为它们全都已经被添加到 vue这个全局对象上。
vue3.x的话,一些不是每个应用都需要的功能,我们就做成了按需引入。用 ES module imports按需引入,举例来说,内置组件像 keep-alive、transition,指令的配合的运行时比如 v-model、v-for、帮助函数,各种工具函数。比如 async component、使用 mixins、或者是 memoize都可以做成按需引入。