[JavaScript知识库]vue2.x和vue3.x的区别

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都可以做成按需引入。
?