Vue3对比Vue2有哪些变化

更新日期: 2021-05-04阅读: 1.9k标签: Vue3

响应式

vue3 使用 Proxy 进行的响应式,Proxy 相比于 defineProperty 的优势,Object.defineProperty() 的问题主要有三个:

    不能监听数组的变化

    必须遍历对象的每个属性

    必须深层遍历嵌套的对象

Proxy 在 ES2015 规范中被正式加入,它有以下几个特点:

    针对对象:针对整个对象,而不是对象的某个属性,所以也就不需要对 keys 进行遍历。这解决了上述 Object.defineProperty() 第二个问题

    支持数组:Proxy 不需要对数组的方法进行重载,省去了众多 hack,减少代码量等于减少了维护成本,而且标准的就是最好的。

除了上述两点之外,Proxy 还拥有以下优势: Proxy 的第二个参数可以有 13 种拦截方法,这比起 Object.defineProperty() 要更加丰富 Proxy 作为新标准受到浏览器厂商的重点关注和性能优化,相比之下 Object.defineProperty() 是一个已有的老方法。


管理方式

代码管理方式

    Vue2 的核心代码在 src 目录下,使用 rollup 管理。

    Vue3 使用 monorepo 管理 packages ,目录结构更清晰。

类型管理方式

    Vue2 使用的 Flow,Facebook 维护的静态检查工具,已烂尾

    Vue3 使用 TypeScript 重构了整个项目,拥抱 TS 生态


性能优化

源码体积优化

    首先,移除一些冷门的 feature(比如 filter、inline-template 等);

    其次,引入 tree-shaking 的技术,减少打包体积。 使用 tree-shaking 的原理就是利用 ES5 的模块语法的静态结构(即 import 和 export),通过编译阶段的静态分析,找到没有引入的模块,并打上标记,然后在打包的时候,不打包这些没用到的模块,从而减少项目体积。 数据劫持优化 Vue2 使用的 Object.defineProperty 的 getter/setter 对对象的属性进行的数据劫持,但是存在一些缺点,比如对于数组的检测支持并不是很好、不能检测对象属性的添加和删除(虽然有$set和$delete,但是还有不太友好)。 Vue3 使用 Proxy,它劫持的是整个对象,对于对象属性的增加和删除都能检测到

编译优化 通过编译阶段对静态模板的分析,编译成 Block Tree,简单来说就是把每个节点都打上一个标记,然后 diff 的时候好判断是否需要更新这个节点,这是一个非常大的性能突破。

语法优化 提供 composition api,他的优点包括

    优化逻辑组织(对比 OptionsAPI),将某个逻辑关注点项目的代码都放在一个函数里,减少反复横挑

    逻辑复用,Vue2 需要使用 mixin 来处理,Vue3 直接使用函数复用


总结

使用 proxy 代替 getter/setter

使用 typescipt 代替 flow 管理类型

引入 tree-shaking 减少代码体积

使用 composition 组织状态

使用 monorepo 代替 rollup 管理代码

来自:https://www.zhangningle.top/articles/Vue/Vue3对比Vue2有哪些变化.html


链接: https://www.fly63.com/article/detial/10270

vue3.x 新特性 - CompositionAPI

安装 vue-cli3,在使用任何 @vue/composition-api 提供的能力前,必须先通过 Vue.use() 进行安装,安装插件后,您就可以使用新的 Composition API 来开发组件了。

Vue3数据响应系统

Vue3 就是基于 Proxy 对其数据响应系统进行了重写,现在这部分可以作为独立的模块配合其他框架使用。数据响应可分为三个阶段: 初始化阶段 --> 依赖收集阶段 --> 数据响应阶段

快速进阶Vue3.0

在2019.10.5日发布了Vue3.0预览版源码,但是预计最早需要等到 2020 年第一季度才有可能发布 3.0 正式版。新版Vue 3.0计划并已实现的主要架构改进和新功能:

Vue 3 对 Web 应用性能的改进

有关即将发布的 Vue.js 的第 3 个主要版本的信息越来越多。通过下面的讨论,虽然还不能完全确定其所有内容,但是我们可以放心地认为,它将是对当前版本(已经非常出色)的巨大改进。 Vue 团队在改进框架 API 方面做得非常出色

Vue3 中令人兴奋的新功能

用新的 Vue 3 编写的程序效果会很好,但性能并不是最重要的部分。对开发人员而言,最重要的是新版本将会怎样影响我们编写代码的方式。如你所料,Vue 3 带来了许多令人兴奋的新功能。值得庆幸的是

200 行从零实现 vue3

emmm 用半天时间捋顺了 vue3 的源码,再用半天时间写了个 mini 版……我觉得我也是没谁了,vue3 的源码未来一定会烂大街的,我们越早的去复现它,就……emm可以越早的装逼hhh

从 Proxy 到 Vue 源码,深入理解 Vue 3.0 响应系统

10 月 5 日,尤雨溪在 GitHub 开放了 Vue 3.0 处于 pre-alpha 状态的源码,这次 Vue 3.0 Updates 版本的更新,将带来五项重大改进:速度体积、可维护性、面向原生、易用性

Vue 的数据响应式(Vue2 及 Vue3)

从一开始使用 Vue 时,对于之前的 jq 开发而言,一个很大的区别就是基本不用手动操作 dom,data 中声明的数据状态改变后会自动重新渲染相关的 dom。换句话说就是 Vue 自己知道哪个数据状态发生了变化及哪里有用到这个数据需要随之修改。

在Vue2与Vue3中构建相同的组件

Vue 开发团队终于在今天发布了 3.0-beta.1 版本,也就是测试版。通常来说,从测试版到正式版,只会修复 bug,不会引入新功能,或者删改老功能。所以,如果你对新版本非常感兴趣,或者有新项目即将上马,不妨尝试一下新版本

Vue3中的Vue Router初探

对于大多数单页应用程序而言,管理路由是一项必不可少的功能。随着新版本的Vue Router处于Alpha阶段,我们已经可以开始查看下一个版本的Vue中它是如何工作的。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!