v2和v3版本区别

Posted 2023-03-23

参考技术A vue2和vue3 双向数据绑定 原理发生了改变
vue2 的双向数据绑定是利用ES5 的一个 API Object. defineProperty() 对数据进行劫持 结合 发布订阅模式 的方式来实现的。

vue3 中使用了 es6 的 Proxy API 对数据代理。

相比于vue2.x，使用 proxy 的优势如下

vue2和vue3定义数据变量和方法的改变
在vue2中定义数据变量是 data() ，创建的方法要在 methods: 中。
而在vue3中直接在 setup() 中，在这里面定义的变量和方法因为最终要在模板中使用，所以最后都得 return 。setup里面没有this。
如：

默认进行 懒观察 （lazy observation）。
在 2.x 版本里，不管数据多大，都会在一开始就为其创建观察者。当数据很大时，这可能会在页面载入时造成明显的性能压力。3.x 版本，只会对 「被用于渲染初始可见部分的数据」 创建观察者，而且 3.x 的观察者更高效。

更精准的变更通知。
比例来说：2.x 版本中，使用 Vue.set 来给对象新增一个属性时，这个对象的所有 watcher 都会重新运行；3.x 版本中，只有依赖那个属性的 watcher 才会重新运行。

vue2和vue3生命周期钩子函数的不同

vue2中的生命周期

vue3中的生命周期

而且Vue3.x 生命周期在调用前需要先进行引入。
如：

部分命令发生了变化：

默认项目目录结构也发生了变化：
移除了配置文件目录， config 和 build 文件夹 移除了 static 文件夹，新增 public 文件夹，并且 index.html 移动到 public 中 在 src 文件夹中新增了 views 文件夹，用于分类 视图组件 和 公共组件

3.0 新加入了 TypeScript 以及 PWA 的支持