Vue2与Vue3的区别

当我知道Vue2.0的双向绑定内部是如何实现的时候(不清楚的可见我前期博客),听说现在已更新到Vue3.0了，新版本肯定是更轻，更快，更易使用。那它是如何实现的呢？

Vue3.0较Vue2.0的优势如下图:

官网传送门 介绍 | Vue.js

核心区别

Vue2.0是基于javascript的，Vue3.0是基于TypeScript,

而javascript和TypeScript的区别如下图:

图解即（下面这块不清楚的，可要好好补了，这下面知识是前端人的最基本素养）：

语言层面：JavaScript和TypeScript都是ECMAScript（ECMA-262）的具体实现。
执行环境层面：浏览器引擎和Node.js都能够直接运行JavaScript，但无法直接运行TypeScript。
时序层面：TypeScript被真正执行前，会通过编译转换生成JavaScript，之后才能被解释执行。
厂商层面：JavaScript由Netscape率先推出，现在主要由各大浏览器厂商实现。
而TypeScript is a trademark of Microsoft Corporation，目前由微软进行设计和维护。
TypeScript是ECMAScript 2015的语法超集，是JavaScript的语法糖。

JavaScript程序可以直接移植到TypeScript，TypeScript需要编译（语法转换）生成JavaScript才能被浏览器执行。

更多细节见 TypeScript和JavaScript的区别 - 简书

javascript已经这么强大了，为什么会出现typescript

TS的设计目的应该是解决JS，弱类型和没有命名空间导致很难模块化，不适合开发大型程序的短处。

它的优点

• 开源，跨平台。它本身不需要考虑运行环境的问题，所有支持JavaScript的地方都可以使用typescript；
• 引入静态类型声明，减少不必要的类型判断和文档注释；
• 及早发现错误，静态类型检查1或编译时发现问题，不用等到运行；
• 类、接口的使用更易于构建和维护组件；
• 重构更方便可靠，适合大型项目；

说完Vue2.0和Vue3.0是基于什么语言实现后，下面再聊聊它们的区别

传送门 vue2 与vue3的区别 - 简书

但我更关心的是，Vue3.0的双向绑定还是通过ES6标准的Object.defineProperty()实现的吗，正确答案如下

Vue 3.0与Vue 2.0的区别仅是数据劫持的方式由Object.defineProperty更改为Proxy代理，其他代码不变。采用数据劫持结合发布者-订阅者模式的方式，通过new Proxy()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

以上参考文档

Vue 3.0双向绑定原理的实现_前端_七月的博客-CSDN博客_vue3.0双向绑定原理

TypeScript 和 JavaScript 的区别？_橙子_tong的博客-CSDN博客_typescript和javascript

vue.js是基于javascript的吗？_kexin178的博客-CSDN博客_vue是js开发的吗

TypeScript和JavaScript的区别 - 简书

TypeScript和JavaScript的区别 - 简书