【每天一个知识点】vue2和vue3的区别

最近发现很多要求Vue3的技术了，不得不说，it技术的更新真的太快了，作为vue2老用户，我们在学习Vue3前应该了解他们的区别以及背后的原因。
甚至作为一个面试官，只需这一个问题就可以摸清你的水平。
所以了解其区别及背后改变的本质非常重要。

1、vue2 和vue3双向数据绑定原理不同
vue2的数据绑定是利用Object.definePropet（）对数据进行劫持 结合 发布订阅模式实现
vue3利用Proxy API对数据代理实现

这第一个区别其实考的就是vue双向绑定的原理，看过vue2源码的同学都知道，v-model的核心其实就是Object.definePropet，监听数据，然后再set。
对这方面没了解的同学建议先深入学习一下v-model双向绑定原理。
那么升级到Vue3之后呢，就不再使用definePropet了，而是改用Proxy这个方法
两者的区别：
defineProperty只能监听某个属性，ProxyAPI可以进行全局监听
proxy可以监听数组，不用单独对数组进行异性操作，可以检测到数组内部的变化
proxy可以直接绑定整个对象，省去for in 闭包等内容来提升效率

2、 vue3默认进行懒观察（lazy observation）。
接上，这是双向绑定的另一个重点之一，观察者模式。
vue2.0中数据一开始就创建了观察者，数据很大的时候，就会出现问题，vue3中进行了优化 只有用于渲染初始化可见部分的数据，才会创建观察者，效率更高。

3、更精准的变更通知
同上 双向绑定模块的一种优化
vue2.x 版本中，你使用 Vue.set 来给对象新增一个属性时，这个对象的所有 watcher 都会重新运行；
vue3.x 版本中，只有依赖那个属性的 watcher 才会重新运行

4、vue3.0中加入了typeScript以及PWA的支持
typeScript不必多说，将弱类型的js提升为强类型，使开发更规范，这个react对ts的支持很方便，而现在vue3也吸收进来了。
PWA（Progressive Web App）渐进式Web应用程序，说白了就是让网页开的速度变快，有着跟app相似的功能通知推送。
在vue3中使用pwa非常简单，在使用 vue create projectName 时，选择pwa就可以使用pwa了（其它功能根据自己需要进行选择，本篇只讲在vue-cli3中使用pwa）。

https://blog.csdn.net/qq_40154925/article/details/104384250

5、项目目录结构发生了变化
vue2.x中 移除了配置文件目录，config 和 build 文件夹
vue3.x中 相关的配置需要在根目录中手动创建vue.config.js，比如跨域
这个刚开始可能会有点不习惯，其实大同小异。

6、组件的变化
这应该算是vue3使用者感受到最大的变化了，使用上完全跟Vue2不一样了，基本上都封装在setUp这个方法里面，那么Vue的作者为什么要这么改？能答出这个问题的水平上一个层次。

我们先看使用上的变化：https://zhuanlan.zhihu.com/p/139590941