当我知道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是基于什么语言实现后,下面再聊聊它们的区别
但我更关心的是,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