精华内容
下载资源
问答
  • Vuejs 3.0 在北京时间2020年9月19日凌晨,终于发布了 3.0 版本,代号:One ...Vue3.0发布链接​github.comVue 是当前非常流行的框架,Vue3.0更是酝酿了2年多的时间,经过2600多次commit,600多次PR,中间也发布了...

    f735b74a1de899c30e87d50c6d1d93ff.png
    Vuejs 3.0 在北京时间2020年9月19日凌晨,终于发布了 3.0 版本,代号:One Piece。此次vue3.0 为用户提供了全新的 composition-api 以及更小的包大小,和更好的 TypeScript 支持。
    Vue3.0发布链接github.com

    Vue 是当前非常流行的框架,Vue3.0更是酝酿了2年多的时间,经过2600多次commit,600多次PR,中间也发布了很多beta版本。终于在经过尤大神和社区的共同努力下,Vue3.0带着全新的 composition-api 正式发布了。

    一起发布的新特性还有

    Teleport 组件v3.vuejs.orgTreeshaking的全新APIv3.vuejs.orgVue.jsv3.vuejs.org
    6cf89d1891740f8d05d08f589cefe397.png

    有兴趣也可以观看尤大神在19号凌晨发布的视频

    直播中尤大神也讲诉了整个Vue3.0 的历程,同时也介绍了一些新的特性。

    0b4e2c63974c71f1643de99ccc79bde6.png

    e2320d0a24dcf04cc987e784c23845a0.png

    98530bb17d4ca98ba2a9451c9809638b.png

    另外,所有的官方生态库和工具,例如vue-cli、vue-router、vuex、Vue-Test-utils、vue devtools、VSCode插件Vetur,现在都支持Vue3,但大多数仍然处于beta状态,并在NPM的"next"标签目录下发布。

    官方计划在2020年年底之前稳定所有项目并将其转换为使用"latest"标签。

    官方发布的推文

    2b59d0e36cffca83af69dca7184537ef.png

    Vue 3.0 正式版发布

    b4c1ebdfcd5de7b5753b6c58dbb5bc9e.png

    以下为 Vuejs Release 3.0 翻译文章
    译文来源: 印记中文
    原文出处:v3.0.0 One Piece。

    今天,我们非常自豪地宣布 Vue.js 3.0 “One Piece” 发布。本次主版本更新包含性能的改进,更小的 bundle 体积,对 TypeScript 更好的支持,用于处理大规模用例的全新 API,以及为框架未来的长期迭代奠定了夯实的基础。

    3.0 的发布意味着两年多以来的努力,其中包含 30+ RFC[1],2600+ commits,99 位贡献者[2]所提交的 628 个 PR[3],还有许多除核心仓库以外的开发及文档编写工作。在此对 Vue 团队成员表示最深切的感谢,感谢贡献者们提交的 PR,感谢赞助商和 sponsors[4] 的资金支持,感谢广大社区成员参与预发布版本的设计与谈论,并提供反馈。Vue 是一个独立项目,为社区建立,也由社区维护,没有大家的鼎立支持,Vue 3.0 是不可能实现的。

    进一步推进 “渐进式框架” 概念
    Vue 从开始就有一个简单的使命:成为任何人都能快速学习且平易近人的框架。随着我们用户群体的增长,框架的应用范围也在不断扩大,以适应不断迭代的需求。随着时间的流逝,它演变成了 “渐进式框架”:一个可以逐步学习和采用的框架,同时为用户提供持续支持,以应对越来越多的苛刻场景。

    时至今日,我们在全球拥有 130 多万的用户,我们看到 Vue 被应用于各种不同的场景中的可能,从在传统的服务端渲染页面之上添加交互,到拥有数百个组件的完整单页应用。Vue 3.0 将这种灵活性进一步提升。

    分离内部模块

    Vue 3.0 核心仍然通过一个简单的 <script>标签来使用,但其内部结构已经被重写,并解耦成一个个模块的集合[5]。新的架构下为源码提供了更好的可维护性,并允许终端用户通过 tree-shaking 的形式将减少一半的运行时体积。

    这些模块还暴露了底层 API,解锁了许多高级用法:

    编译器支持自定义 AST 转换,用于在构建时自定义(如,在构建时进行 i18n 操作[6]
    核心运行时提供了一系列 API,用于针对不同渲染目标(如 native moile[7]WebGL[8]终端[9])的自定义容器。默认的 DOM 渲染器也使用这系列 API 构建。@vue/reactivity 模块[10]导出的功能,可以直接访问 Vue 的响应式系统。并且可以作为一个独立的包进行使用。它可以与其他模块解决方案配对使用(如 lit-html[11]),甚至是在非 UI 场景中使用。

    用于解决规模问题的全新 API

    在 Vue 3.0 中,基于对象的 2.x API 基本没有变化,并引入了 Composition API[12] — 一套全新的 API,旨在解决 Vue 在大规模应用场景中的痛点。Composition API 构建于响应式 API 之上,实现了类似于 React hook 的逻辑组成与复用,相较于 2.x 基于对象的 API 方式来说,拥有更加灵活的代码组织模式,以及更为可靠的类型推断能力。

    Composition API 同时还提供了适用于 Vue 2.x 的版本,可通过 @vue/composition-api[13] 插件来在项目中使用,目前已有适用于 Vue 2 和 Vue 3 的 Composition API 实用的工具库(如 vueuse[14]vue-composable[15])。

    性能提升
    Vue 3 与 Vue 2 相比,在 bundle 包大小方面(tree-shaking 减少了 41% 的体积),初始渲染速度方面(快了 55%),更新速度方面(快了 133%)以及内存占用方面(减少了 54%)都有着显著的性能提升[16]

    在 3.0 中,我们采取了 “编译信息虚拟 DOM” 的方式:针对模板编译器进行了优化,并生成渲染函数代码,以提升静态内容的渲染性能,为绑定类型留下运行时提示,最为重要的是,模板内部的动态节点进行了扁平化处理,以减少运行时遍历的开销。因此,用户可以获得两全其美的效果,从模板中获得编译器优化后的性能,或在需要时通过手动渲染函数直接控制。

    改进与 TypeScript 的兼容
    Vue 3 的代码库完全采用 TypeScript 编写,自动生成、测试并构建类型声明,因此它们总为最新。Composition API 可以很好的进行类型推断。Vetur,官方推出的 VSCode 插件,现已支持对模板表达式和 props 的类型检查,同时,Vue 3 已全面支持 TSX[17]

    实验特性

    我们为单文件组件提出了两个新特性[18](SFC,又称为 .vue 文件):<script setup>:在 SFC 内使用 Composition API 的语法糖<style vars>:在 SFC 中支持将状态作为 CSS 变量注入到样式中
    这些特性在 3.0 中均已实现且可用,但提供这些特性的目的只是为了收集反馈。在最终合并到 RFC 之前,这些特性仍是实验性的。

    我们还实现了一个目前尚未编写文档的 <Suspense> 组件,它允许在初始渲染或 branch 切换时,等待嵌套的异步依赖(异步组件或带有 async setup() 组件)。我们正在与 Nuxt.js 团队一起测试和迭代此功能(Nuxt 3 正在开发中[19]),并可能会在 3.1 时完善它。

    分阶段发布

    Vue 3.0 的发布意味着本框架的整体准备就绪。虽然框架的一些子项目还需进一步完善才能达到稳定状态(特别是 router 以及 Vuex 与 devtools 的集成),但我们相信现在已经可以使用 Vue 3 开启全新的项目。同时,我们也鼓励库作者开始升级项目以支持 Vue 3。

    查阅 Vue 3 的库指南[20],以了解框架所有子项目的详细进展。

    迁移与 IE11 的支持

    由于时间限制,我们推迟了迁移构建(v3 兼容 v2 的构建,以及迁移警告)和兼容 IE11 的计划,并打算在 2020 年 Q4 集中进行。因此,计划迁移现有 v2 应用或需要兼容 IE11 的用户,目前应注意限制。

    下一阶段工作

    对于发布后的一段时间内,我们将重点关注:

    • 迁移构建
    • 支持 IE11
    • Router 以及 Vuex 与 devtools 的集成
    • 对 Vetur 中模板类型推断的进一步改进

    目前,Vue 3 及其相关子项目的文档站、github 分支以及 npm 的 dist 标签都将保持在 next 状态。这意味着 npm install vue 仍会安装 2.x 版本,而通过 npm install vue@next 将会安装 v3 版本。我们计划在 2020 年底之前将所有文档链接,分支以及 npm 标签全部切为 3.0。

    与此同时,我们已开始规划 2.7 版本,这将会是 2.x 的最后一个小版本。2.7 将与 v3 进行兼容改进,并对使用 v3 中已删除/更改的 API 发出警告,以更好的帮助 3.0 的迁移升级工作。我们计划在 2021 年 Q1 进行 2.7 的工作,发布后将直接成为 LTS 版本,维护周期为 18 个月。

    试用

    欲了解更多关于 Vue 3.0 的信息,请查阅全新的文档站[21],如果你是 2.x 的老用户,请直接查看迁移指南章节[22]

    参考资料
    [1]

    30+ RFCgithub.com

    [2]

    99 位贡献者github.com

    [3]

    vuejs/vue-nextgithub.com
    bc79261e2af00b1026748931d21b8dc6.png

    [4]

    vuejs/vuegithub.com
    bc79261e2af00b1026748931d21b8dc6.png

    [5]

    解耦成一个个模块的集合github.com

    [6]

    在构建时进行 i18n 操作github.com

    [7]

    native moilegithub.com

    [8]

    Planning-nl/vugelgithub.com
    1b946bf1005c045faa149c2111050619.png

    [9]

    终端github.com

    [10]

    vuejs/vue-nextgithub.com
    bc79261e2af00b1026748931d21b8dc6.png

    [11]

    lit-htmlgithub.com

    [12]

    Composition APIv3.vuejs.org

    [13]

    @vue/composition-apigithub.com

    [14]

    vueusegithub.com

    [15]

    vue-composablegithub.com

    [16]

    显著的性能提升docs.google.com

    [17]

    vuejs/vue-nextgithub.com
    bc79261e2af00b1026748931d21b8dc6.png

    [18]

    两个新特性github.com

    [19]

    Nuxt 3 正在开发中nuxtjs.slides.com

    [20]

    Introduction | Vue.jsv3.vuejs.org

    [21]

    全新的文档站v3.vuejs.org

    [22]

    迁移指南章节v3.vuejs.org
    展开全文
  • Vue 团队于 2020 年 9 月 18 日晚 11 点半发布Vue 3.0 版本,我们连夜对 Release 进行了翻译。由于时间仓促,文中如有翻译不当的地方还望提出。如有侵权,请联系删帖。以下为译文正文。原文:...
    Vue 团队于 2020 年 9 月 18 日晚 11 点半发布了 Vue 3.0 版本,我们连夜对 Release 进行了翻译。由于时间仓促,文中如有翻译不当的地方还望提出。如有侵权,请联系删帖。以下为译文正文。原文:https://github.com/vuejs/vue-next/releases作者:Vue 团队译文:https://zhuanlan.zhihu.com/p/254219538译者:QC-L

    今天,我们非常自豪地宣布 Vue.js 3.0 "One Piece" 发布。本次主版本更新包含性能的改进,更小的 bundle 体积,对 TypeScript 更好的支持,用于处理大规模用例的全新 API,以及为框架未来的长期迭代奠定了夯实的基础。

    3.0 的发布意味着两年多以来的努力,其中包含 30+ RFC[1],2600+ commits,99 位贡献者[2]所提交的 628 个 PR[3],还有许多除核心仓库以外的开发及文档编写工作。在此对 Vue 团队成员表示最深切的感谢,感谢贡献者们提交的 PR,感谢赞助商和 sponsors[4] 的资金支持,感谢广大社区成员参与预发布版本的设计与谈论,并提供反馈。Vue 是一个独立项目,为社区建立,也由社区维护,没有大家的鼎立支持,Vue 3.0 是不可能实现的。

    进一步推进 "渐进式框架" 概念

    Vue 从开始就有一个简单的使命:成为任何人都能快速学习且平易近人的框架。随着我们用户群体的增长,框架的应用范围也在不断扩大,以适应不断迭代的需求。随着时间的流逝,它演变成了 "渐进式框架":一个可以逐步学习和采用的框架,同时为用户提供持续支持,以应对越来越多的苛刻场景。

    时至今日,我们在全球拥有 130 多万的用户,我们看到 Vue 被应用于各种不同的场景中的可能,从在传统的服务端渲染页面之上添加交互,到拥有数百个组件的完整单页应用。Vue 3.0 将这种灵活性进一步提升。

    分离内部模块

    Vue 3.0 核心仍然通过一个简单的 标签来使用,但其内部结构已经被重写,并解耦成一个个模块的集合[5]。新的架构下为源码提供了更好的可维护性,并允许终端用户通过 tree-shaking 的形式将减少一半的运行时体积。

    这些模块还暴露了底层 API,解锁了许多高级用法:

    • 编译器支持自定义 AST 转换,用于在构建时自定义(如,在构建时进行 i18n 操作[6])
    • 核心运行时提供了一系列 API,用于针对不同渲染目标(如 native moile[7]WebGL[8]终端[9])的自定义容器。默认的 DOM 渲染器也使用这系列 API 构建。
    • `@vue/reactivity` 模块[10]导出的功能,可以直接访问 Vue 的响应式系统。并且可以作为一个独立的包进行使用。它可以与其他模块解决方案配对使用(如 lit-html[11]),甚至是在非 UI 场景中使用。

    用于解决规模问题的全新 API

    在 Vue 3.0 中,基于对象的 2.x API 基本没有变化,并引入了 Composition API[12] — 一套全新的 API,旨在解决 Vue 在大规模应用场景中的痛点。Composition API 构建于响应式 API 之上,实现了类似于 React hook 的逻辑组成与复用,相较于 2.x 基于对象的 API 方式来说,拥有更加灵活的代码组织模式,以及更为可靠的类型推断能力。

    Composition API 同时还提供了适用于 Vue 2.x 的版本,可通过 `@vue/composition-api`[13] 插件来在项目中使用,目前已有适用于 Vue 2 和 Vue 3 的 Composition API 实用的工具库(如 `vueuse`[14]`vue-composable`[15])。

    性能提升

    Vue 3 与 Vue 2 相比,在 bundle 包大小方面(tree-shaking 减少了 41% 的体积),初始渲染速度方面(快了 55%),更新速度方面(快了 133%)以及内存占用方面(减少了 54%)都有着显著的性能提升[16]

    在 3.0 中,我们采取了 “编译信息虚拟 DOM” 的方式:针对模板编译器进行了优化,并生成渲染函数代码,以提升静态内容的渲染性能,为绑定类型留下运行时提示,最为重要的是,模板内部的动态节点进行了扁平化处理,以减少运行时遍历的开销。因此,用户可以获得两全其美的效果,从模板中获得编译器优化后的性能,或在需要时通过手动渲染函数直接控制。

    改进与 TypeScript 的兼容

    Vue 3 的代码库完全采用 TypeScript 编写,自动生成、测试并构建类型声明,因此它们总为最新。Composition API 可以很好的进行类型推断。Vetur,官方推出的 VSCode 插件,现已支持对模板表达式和 props 的类型检查,同时,Vue 3 已全面支持 TSX[17]

    实验特性

    我们为单文件组件提出了两个新特性[18](SFC,又称为 .vue 文件):

    • :在 SFC 内使用 Composition API 的语法糖
    • :在 SFC 中支持将状态作为 CSS 变量注入到样式中

    这些特性在 3.0 中均已实现且可用,但提供这些特性的目的只是为了收集反馈。在最终合并到 RFC 之前,这些特性仍是实验性的。

    我们还实现了一个目前尚未编写文档的 组件,它允许在初始渲染或 branch 切换时,等待嵌套的异步依赖(异步组件或带有 async setup() 组件)。我们正在与 Nuxt.js 团队一起测试和迭代此功能(Nuxt 3 正在开发中[19]),并可能会在 3.1 时完善它。

    分阶段发布

    Vue 3.0 的发布意味着本框架的整体准备就绪。虽然框架的一些子项目还需进一步完善才能达到稳定状态(特别是 router 以及 Vuex 与 devtools 的集成),但我们相信现在已经可以使用 Vue 3 开启全新的项目。同时,我们也鼓励库作者开始升级项目以支持 Vue 3。

    查阅 Vue 3 的库指南[20],以了解框架所有子项目的详细进展。

    迁移与 IE11 的支持

    由于时间限制,我们推迟了迁移构建(v3 兼容 v2 的构建,以及迁移警告)和兼容 IE11 的计划,并打算在 2020 年 Q4 集中进行。因此,计划迁移现有 v2 应用或需要兼容 IE11 的用户,目前应注意限制。

    下一阶段工作

    对于发布后的一段时间内,我们将重点关注:

    • 迁移构建
    • 支持 IE11
    • Router 以及 Vuex 与 devtools 的集成
    • 对 Vetur 中模板类型推断的进一步改进

    目前,Vue 3 及其相关子项目的文档站、github 分支以及 npm 的 dist 标签都将保持在 next 状态。这意味着 npm install vue 仍会安装 2.x 版本,而通过 npm install vue@next 将会安装 v3 版本。我们计划在 2020 年底之前将所有文档链接,分支以及 npm 标签全部切为 3.0。

    与此同时,我们已开始规划 2.7 版本,这将会是 2.x 的最后一个小版本。2.7 将与 v3 进行兼容改进,并对使用 v3 中已删除/更改的 API 发出警告,以更好的帮助 3.0 的迁移升级工作。我们计划在 2021 年 Q1 进行 2.7 的工作,发布后将直接成为 LTS 版本,维护周期为 18 个月。

    试用

    欲了解更多关于 Vue 3.0 的信息,请查阅全新的文档站[21],如果你是 2.x 的老用户,请直接查看迁移指南章节[22]

    关注我们

    我们将为你带来最前沿的前端资讯。21f3d78b6d4d8890d654a3ff64472dae.png9月18日,Vue的作者尤雨溪发表主题演讲,正式发布Vue3.0并回应一些大家关切的问题,表示不建议大家立刻升级到Vue3.0版本。以下是视频:

    参考资料
    [1]

    30+ RFC: https://github.com/vuejs/rfcs/tree/master/active-rfcs

    [2]

    99 位贡献者: https://github.com/vuejs/vue-next/graphs/contributors

    [3]

    628 个 PR: https://github.com/vuejs/vue-next/pulls?q=is%3Apr+is%3Amerged+-author%3Aapp%2Fdependabot-preview++sort%3Aupdated-desc

    [4]

    赞助商和 sponsors: https://github.com/vuejs/vue/blob/dev/BACKERS.md

    [5]

    解耦成一个个模块的集合: https://github.com/vuejs/vue-next/tree/master/packages

    [6]

    在构建时进行 i18n 操作: https://github.com/intlify/vue-i18n-extensions

    [7]

    native moile: https://github.com/rigor789/nativescript-vue-next

    [8]

    WebGL: https://github.com/Planning-nl/vugel

    [9]

    终端: https://github.com/ycmjason/vuminal

    [10]

    @vue/reactivity 模块: https://github.com/vuejs/vue-next/tree/master/packages/reactivity

    [11]

    lit-html: https://github.com/yyx990803/vue-lit

    [12]

    Composition API: https://v3.vuejs.org/guide/composition-api-introduction.html

    [13]

    @vue/composition-api: https://github.com/vuejs/composition-api

    [14]

    vueuse: https://github.com/antfu/vueuse

    [15]

    vue-composable: https://github.com/pikax/vue-composable

    [16]

    显著的性能提升: https://docs.google.com/spreadsheets/d/1VJFx-kQ4KjJmnpDXIEaig-cVAAJtpIGLZNbv3Lr4CR0/edit?usp=sharing

    [17]

    Vue 3 已全面支持 TSX: https://github.com/vuejs/vue-next/blob/master/test-dts/defineComponent.test-d.tsx

    [18]

    两个新特性: https://github.com/vuejs/rfcs/pull/182

    [19]

    Nuxt 3 正在开发中: https://nuxtjs.slides.com/atinux/state-of-nuxt-2020

    [20]

    Vue 3 库指南: https://v3.vuejs.org/guide/migration/introduction.html#supporting-libraries

    [21]

    全新的文档站: https://v3.vuejs.org/

    [22]

    迁移指南章节: https://v3.vuejs.org/guide/migration/introduction.html

    66ddc80ad7c7bf20dcec2d75c9c8caea.gif

    展开全文
  • 进入2020年,离vue3.0正式版发布时间越来越近了。今天,借助尤雨溪大大提前发布的vue3.0源码,老K为大家整理一下vue3.0和vue2.0的区别。vue3的变化可以总结为以下几点:更小更快加强typescript支持Api一致性提高可...
    4f4f3e1ebd6325b0c46244ae6014d99c.png

    进入2020年,离vue3.0正式版发布的时间越来越近了。今天,借助尤雨溪大大提前发布的vue3.0源码,老K为大家整理一下vue3.0和vue2.0的区别。

    vue3的变化可以总结为以下几点:

    • 更小
    • 更快
    • 加强typescript支持
    • Api一致性
    • 提高可维护能力
    • 开放更多底层功能

    其中前三点是最主要的变化。

    更小:

    vue2采用面向对象编程的思想,vue3则采用函数式编程的思想。

    vue2源码中代码是这样组织的:

    function vue(){...} vue.prototype.init = ...

    vue3源码中是这样组织的:

    //监听方法:function watch(){...} //渲染方法:function render(){...}

    原因:充分利用函数式编程组合大于继承的优势,采用函数式编程更利于逻辑功能的复用,webpack打包时更有利于tree-shaking,更利于代码的压缩,更利于返回值类型校验,压缩后的文件体积更小。

    更快:

    vue3修改了虚拟dom的算法(即diff算法 - 比对虚拟dom有没有变化)

    vue2需要diff所有的虚拟dom节点,而vue3参考了SVELTE框架的思想,先分层次-然后找不变化的层-针对变化的层进行diff,更新速度不会再受template大小的影响,而是仅由可变的内容决定。经过尤雨溪自己的测试,大概有6倍的速度提升。

    加强typescript支持:

    vue3的源码开始采用了ts进行编写,给开发者也提供了支持ts的开发模式。

    Api一致性

    vue3最开始的版本可以完美兼容vue2的api。

    提高可维护能力

    从源码的层面上提供了更多的可维护能力。

    开放更多底层功能

    把更多的底层功能开放出来,比如render、依赖收集功能,我们可以更好的进行自定义化开发,可以写更多的高阶组件。

    最后我们再谈谈两者在数据双向绑定方面的区别。

    数据双向绑定:

    关于数据双向绑定的实现,vue2 采用了defineProperty,而vue3则采用了proxy。

    优点:

    1. 使用proxy不污染源对象,会返回一个新对象,defineProperty是注入型的,会破坏源对象
    2. 使用proxy只需要监听整个源对象的属性,不需要循环使用Object.defineProperty监听对象的属性
    3. 使用proxy可以获取到对象属性的更多参数,使用defineProperty只能获取到监听属性的新值newvalue
    /* vue2.0*/var a = { b:123, c:444};Object.defineProperty(a,'b',{     set: function(newvalue){       console.log('i am be set')     }}) //只能获取到newvalue这个参数/* vue3.0 */var a={ b:123, c:444};var newa = new Proxy(a,{     set:function(target,key,newvalue){         console.log(target,key,newvalue)     }}) //可以获取到target,key,newvalue三个参数

    希望整理的这些内容对大家有所帮助。最后老K提前祝大家春节快乐!!!

    e94d914402eef723f154598ee1bd7ec9.gif

    本文为原创内容,若转载请注明出处,转发感激不尽。

    展开全文
  • 进入2020年,离vue3.0正式版发布时间越来越近了。今天,借助尤雨溪大大提前发布的vue3.0源码,老K为大家整理一下vue3.0和vue2.0的区别。vue3的变化可以总结为以下几点:更小更快加强typescript支持Api一致性提高可...
    7ae62ab63e2a47ad0eaca9fc88d4e94a.png

    进入2020年,离vue3.0正式版发布的时间越来越近了。今天,借助尤雨溪大大提前发布的vue3.0源码,老K为大家整理一下vue3.0和vue2.0的区别。

    vue3的变化可以总结为以下几点:

    • 更小
    • 更快
    • 加强typescript支持
    • Api一致性
    • 提高可维护能力
    • 开放更多底层功能

    其中前三点是最主要的变化。

    更小:

    vue2采用面向对象编程的思想,vue3则采用函数式编程的思想。

    vue2源码中代码是这样组织的:

    function vue(){...} vue.prototype.init = ...

    vue3源码中是这样组织的:

    //监听方法:function watch(){...} //渲染方法:function render(){...}

    原因:充分利用函数式编程组合大于继承的优势,采用函数式编程更利于逻辑功能的复用,webpack打包时更有利于tree-shaking,更利于代码的压缩,更利于返回值类型校验,压缩后的文件体积更小。

    更快:

    vue3修改了虚拟dom的算法(即diff算法 - 比对虚拟dom有没有变化)

    vue2需要diff所有的虚拟dom节点,而vue3参考了SVELTE框架的思想,先分层次-然后找不变化的层-针对变化的层进行diff,更新速度不会再受template大小的影响,而是仅由可变的内容决定。经过尤雨溪自己的测试,大概有6倍的速度提升。

    加强typescript支持:

    vue3的源码开始采用了ts进行编写,给开发者也提供了支持ts的开发模式。

    Api一致性

    vue3最开始的版本可以完美兼容vue2的api。

    提高可维护能力

    从源码的层面上提供了更多的可维护能力。

    开放更多底层功能

    把更多的底层功能开放出来,比如render、依赖收集功能,我们可以更好的进行自定义化开发,可以写更多的高阶组件。

    最后我们再谈谈两者在数据双向绑定方面的区别。

    数据双向绑定:

    关于数据双向绑定的实现,vue2 采用了defineProperty,而vue3则采用了proxy。

    优点:

    1. 使用proxy不污染源对象,会返回一个新对象,defineProperty是注入型的,会破坏源对象
    2. 使用proxy只需要监听整个源对象的属性,不需要循环使用Object.defineProperty监听对象的属性
    3. 使用proxy可以获取到对象属性的更多参数,使用defineProperty只能获取到监听属性的新值newvalue
    /* vue2.0*/var a = { b:123, c:444};Object.defineProperty(a,'b',{     set: function(newvalue){       console.log('i am be set')     }}) //只能获取到newvalue这个参数/* vue3.0 */var a={ b:123, c:444};var newa = new Proxy(a,{     set:function(target,key,newvalue){         console.log(target,key,newvalue)     }}) //可以获取到target,key,newvalue三个参数

    希望整理的这些内容对大家有所帮助。最后老K提前祝大家春节快乐!!!

    4fbb9436e2825e8169825660e0d32841.gif

    本文为原创内容,若转载请注明出处,转发感激不尽。

    展开全文
  • Vuejs 3.0 在北京时间2020年9月19日凌晨,终于发布了 3.0 版本,代号:One ...Vue3.0发布链接​github.comVue 是当前非常流行的框架,Vue3.0更是酝酿了2年多的时间,经过2600多次commit,600多次PR,中间也发布了...
  • Vue 3.0 终于正正正正正式发布了!

    千次阅读 2020-09-19 17:36:33
    Vue 团队于 2020 年 9 月 18 日晚 11 点半发布Vue 3.0 版本,我们连夜对 Release 进行了翻译。由于时间仓促,文中如有翻译不当的地方还望提出。如有侵权,...
  • Vue 团队于 2020 年 9 月 18 日晚 11 点半发布Vue 3.0 版本,我们连夜对 Release 进行了翻译。由于时间仓促,文中如有翻译不当的地方还望提出。如有侵权,请联系删帖。以下为译文正文。原文:...
  • Vuejs 3.0 在北京时间2020年9月19日凌晨,终于发布了3.0 版本,代号:One Piece。此次vue3.0为用户提供了全新的 composition-...终于在经过尤大神和社区的共同努力下,Vue3.0带着全新的 composition-api 正式发布了。
  • Vue3.0的优势

    2021-01-08 17:53:50
    因为现在Vue3.0发布正式版,我也抽时间出来学习了一下,自己总结了一下Vue3.0相比Vue2.0的优势,如有不足欢迎评论区里指出! Vue3.0的优势 1.性能比Vue2.x快了1.2~2.0倍。 2.支持按需编译,体积比Vue2.x更小。 3...
  • Vue 团队于 2020 年 9 月 18 日晚 11 点半发布Vue 3.0 版本,我们连夜对 Release 进行了翻译。由于时间仓促,文中如有翻译不当的地方还望提出。如有侵权,请联系删帖。以下为译文正文。今天,我们非常自豪地宣布 ...
  • 尤大大大神在Vue.js 伦敦大会上简要介绍了 Vue 下一个主要版本要发布的内容,不久前,尤大大在 medium 个人博客上发布Vue 3.0 的开发路线,已经有一段时间了,不出意外2019年年底会正式发布3.0版本。掐指算一算...
  • VUE3.0(0)

    2021-01-18 09:57:05
    -因为正式版已经发版一段时间 逐渐趋于稳定 - 新年到来公司企业都会 有一些改革规划 新技术必不可少 - 当然学习也不是一蹴而就 对于新版本的 开发社区 正在逐步完善 +现在的努力只为了服务于未来 不能临时抱佛脚...
  • 但是,Vue3.0发布还是有点时间的,并且正式发布也不代表我们就马上就可以用于业务开发。它还需要完善相应的生态工具。不过正式使用是一码事,我们自己玩又是一码事(hh)。 Vue3.0特地准备了一个尝鲜的项目供...
  • 前段时间笔者一直忙于学习Vue3方面新知识,比如如何从vue2.0版本过渡到vue3.0,如何理解vue3.0的新接口Composition API等等,笔者相信随着vue3.0正式版发布,企业的需求量增大,掌握vue3.0将会是一个必要的升职加薪...
  • 前言前段时间笔者一直忙于学习Vue3方面新知识,比如如何从vue2.0版本过渡到vue3.0,如何理解vue3.0的新接口Composition API等等,笔者相信随着vue3.0正式版发布,企业的需求量增大,掌握vue3.0将会是一个必要的升职...
  • 前言前段时间笔者一直忙于学习Vue3方面新知识,比如如何从vue2.0版本过渡到vue3.0,如何理解vue3.0的新接口Composition API等等,笔者相信随着vue3.0正式版发布,企业的需求量增大,掌握vue3.0将会是一个必要的升职...
  • 距离2020 年 9 月 18 日发布 vue3.0 正式版本已经有一段时间了,作为技术人员,随时保持技术同步是很重要的事情。本文带领大家看一看3.0对比2.x到底有哪些改变。 一、建立项目 vue3.0 有两种建立脚手架的方式 脚手架...
  • VUE 3.0初体验

    千次阅读 2020-09-20 16:28:22
    2020年9月19日凌晨,尤雨溪大大正式发布3.0版本,代号:One Piece,不要太刺激哦 Vue 从一开始就有一个简单的使命:成为一个任何人都能快速学会的平易近人的框架。随着我们用户群的增长,框架的范围也在不断扩大...
  • Vue 3.0马上要来了你准备好了吗?

    千次阅读 2019-06-04 10:25:38
    尤大大大神在Vue.js 伦敦大会上简要介绍了 Vue 下一个主要版本要发布的内容,不久前,尤大大在 medium 个人博客上发布Vue 3.0 的开发路线,已经有一段时间了,不出意外2019年年底会正式发布3.0版本。掐指算一算...
  • 刨析Vue3.0系列(一)

    2020-07-06 17:34:39
    在早些时间,尤雨溪发布了新的VUE3.0版本的源码,节制到目前为止,源码暂时还是best状态,虽然不是正式版,但这并不妨碍我们借此拜读一下,了解一下新的特性,以及将为我们带来的改变。本文的目的在于紧跟官方,白话...
  • 2020年9月19日凌晨,尤雨溪大大正式发布3.0版本,代号:One Piece。 vue从一开始就是以快速上手的特性被众多开发者欢迎的框架。在随着使用者的逐渐增多,框架的规范也在不断扩大,以适应不断增长的需求。随着...
  • 作者:ssh 前端从进阶到入院前言Vue3 Beta版发布了,离正式投入生产使用又更近了一步。此外,React Hook在社区的发展也是如火如荼。一时间大家都觉得Redux很low,都在研究各种各样配合hook实现的新形状态管理模式。...
  • 作者:ssh 前端从进阶到入院前言Vue3 Beta版发布了,离正式投入生产使用又更近了一步。此外,React Hook在社区的发展也是如火如荼。一时间大家都觉得Redux很low,都在研究各种各样配合hook实现的新形状态管理模式。...
  • Vue3 发布正式版(2020.9.19)

    千次阅读 2020-09-22 09:51:38
    [官宣] Vue 3.0 — One Piece 发布 Vue 团队于 2020 年 9 月 18 日晚 11 点半发布Vue 3.0 版本,我们连夜对 Release 进行了翻译。由于时间仓促,文中如有翻译不当的地方还望提出。如有侵权,请联系删帖。以下为...
  • 前言vue3.0-beta 版本已经发布了一段时间了,正式版本据说在年中发布(直播的时候说的是年中还是年终,网上传闻说是6月份)。嘴上说着学不动,身体却很诚实地创建一个vue3的项目,兴致勃勃地引入 vue2 插件的时候,...
  • 前言vue3.0-beta 版本已经发布了一段时间了,正式版本据说在年中发布(直播的时候说的是年中还是年终,网上传闻说是6月份)。嘴上说着学不动,身体却很诚实地创建一个vue3的项目,兴致勃勃地引入 vue2 插件的时候,...
  • 作者:lishuai转发链接:https://segmentfault.com/a/1190000022757326前言vue3.0-beta 版本已经发布了一段时间了,正式版本据说在年中发布(直播的时候说的是年中还是年终,网上传闻说是6月份)。嘴上说着学不动,身体...
  • 作者:lishuai转发链接:https://segmentfault.com/a/1190000022757326前言vue3.0-beta 版本已经发布了一段时间了,正式版本据说在年中发布(直播的时候说的是年中还是年终,网上传闻说是6月份)。嘴上说着学不动,身体...
  • 距离 Vue 3.0 正式版发布已经有一段时间了,相信相关生态周边库也正在适配新版本中,像我们熟悉的 Element UI,Vant 等优秀组件库,是否完成了对 Vue 3 的适配呢? 本文整理了目前 (2021年) 支持 Vue 3 的 UI 组件库...
  • 今天,我们很荣幸地宣布 Vue.js 3.0“One Piece”的正式发布。这个框架的新的主要版本提供了改进的性能、更小的捆绑大小、更好的 TypeScript 集成、用于处理大规模用例的新 API,以及为框架未来的长期迭代奠定了坚实...

空空如也

空空如也

1 2
收藏数 38
精华内容 15
关键字:

vue3.0正式版发布时间

vue 订阅