精华内容
下载资源
问答
  • Vue3 发布正式版(2020.9.19)

    千次阅读 2020-09-22 09:51:38
    [官宣] Vue 3.0 — One Piece 发布 Vue 团队于 2020 年 9 月 18 日晚 11 点半发布Vue 3.0 版本,我们连夜对 Release 进行了翻译。由于时间仓促,文中如有翻译不当的地方还望提出。如有侵权,请联系删帖。以下为...

    [官宣] Vue 3.0 — One Piece 发布
    各位先收藏再点赞,本文章绝对值得你的一赞
    点击至Vue3官网
    Vue 团队于 2020 年 9 月 18 日晚 11 点半发布了 Vue 3.0 版本,我们连夜对 Release 进行了翻译。由于时间仓促,文中如有翻译不当的地方还望提出。如有侵权,请联系删帖。以下为译文正文。
    原文:https://github.com/vuejs/vue-next/releases

    今天,我们非常自豪地宣布 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 的语法糖

    我们还实现了一个目前尚未编写文档的 组件,它允许在初始渲染或 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+ 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

    展开全文
  • 今天,Vue Router 4正式发布为稳定版。 在提供14个Alpha,13个Beta和6个候选版本之后,Vue Router v4可以通过改进的包大小,TypeScript集成,新功能以及对现代应用程序的一致性改进,为您的Vue 3应用程序带来最佳...

    今天,Vue Router 4正式发布为稳定版。

    在提供14个Alpha,13个Beta和6个候选版本之后,Vue Router v4可以通过改进的包大小,TypeScript集成,新功能以及对现代应用程序的一致性改进,为您的Vue 3应用程序带来最佳路由。
    这花费了将近2年的时间,大约1500次提交,15个RFC,以及许多用户的帮助以及他们的错误报告和功能请求。谢谢大家的帮助!

    项目组织改进

    • Vue Router现在分为三个模块:

      • 历史记录实现:处理地址栏,并且特定于Vue Router运行的环境(节点,浏览器,移动设备等)
      • 路由器匹配器:处理路由解析/users/:id及其排名
      • 路由器:将所有内容连接在一起并处理路由特定功能,例如导航卫士

    动态路由

    • 动态路由是Vue路由器上最需要的功能之一。它使路由器更具灵活性,功能强大,并为以前不可能的应用打开了可能性!这是有可能的,这要归功于具有自动排名功能的高级路径解析功能,它允许路由器根据URL字符串表示来猜测应该匹配的路由,从而允许用户以任何顺序定义路由。

    改进的导航系统

    • 新的导航系统更加一致,并改善了“滚动行为”的体验以匹配本机浏览器的行为。它还为用户提供了有关导航状态的几乎更多信息,并允许使用这些信息通过进度条和模态之类的全局UI元素改善用户体验。

    更强大的Devtools

    • 由于采用了新的Vue Devtools,Vue的路由器是能够创造出更先进的集成:在时间轴导航和完整路径的目录,可以帮助你调试的路线。

    更好的导航卫士

    • 说再见,以next避免导航卫士里面容易犯错误:回到你传递给任何价值next。仍支持先前版本以简化迁移!
    有关更新的文档的更多信息。

    路由中一致的编码

    • 编码已被改编,使其在不同的浏览器和路径位置属性(相一致params,query和hash)。将这些属性传递给它们时,您无需对其进行编码,router.push()并且它们将始终在路径位置(例如$route和useRoute())中显示为已解码。

    迁移路径小

    Vue Router 4专注于在改进现有路由器的同时保持非常相似的API,如果您使用的是Vue Router的基础知识,则迁移应简短且几乎只能重命名。您可以查看文档中的完整迁移指南

    路由器的未来

    • 在过去的几个月中,Vue Router一直有效稳定,现在可以专注于:

    • 使用现有工具(Vetur,Vite,Devtools等)获得更好的开发人员体验

    • 与诸如Suspense之类的现代功能更好地集成

    • RFC,用于改进现有的API或引入新的API

    • 路由器的较轻版本

    尝试一下

    • 如果要快速尝试Vue Router 4,则可以使用Tailwind CSS来检查此CodeSandbox,此Vite模板,或使用CLI入门。

    要了解有关Vue Router 4的更多信息,请查看我们的新文档。如果您是现有的Vue 2.x用户,请直接转到《迁移指南》

    展开全文
  • 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 Router 4 正式发布稳定版本。在经历了 14 个 Alpha,13 个 Beta 和 6 个 RC 版本之后,Vue Router v4 闪亮登场,为你带来了 TypeScript 集成、新功能以及对现代应用程序的一致性改进,已经准备好成为 ...

    这个月,Vue Router 4 正式发布稳定版本。

    在经历了 14 个 Alpha,13 个 Beta 和 6 个 RC 版本之后,Vue Router v4 闪亮登场,为你带来了 TypeScript 集成、新功能以及对现代应用程序的一致性改进,已经准备好成为 Vue3 新应用的最佳伴侣。

    将近 2 年的时间,大约 1500 次提交,15 个RFC[1],无数的心血……以及许多用户的帮助以及他们的错误报告和功能请求。 谢谢大家的帮助!

    项目结构优化

    Vue Router 现在分为三个模块:

    • History 实现: 处理地址栏,并且特定于 Vue Router 运行的环境(节点,浏览器,移动设备等)
    • Router 匹配器:处理类似 /users/:id 的路由解析和优先级处理。
    • Router: 将一切连接在一起,并处理路由特定功能,例如导航守卫。

    动态路由

    动态路由[2]是 Vue Router 最受欢迎的功能之一。 它让路由变得更灵活,更强大,让曾经不可能的功能成为了现实!Vue Router4 新增了有自动优先级排名的高级路径解析功能,用户新现在可以以随意的顺序定义路由,因为 Router 会根据 URL 字符串表示来猜测应该匹配的路由。

    优先级排名,其实就是根据你路径书写的规则计算出一个得分,根据得分来优先选用最有可能的那一项。

    举个例子来说,你同时写了 /users/:w+ 这两个路由:

    const routes = [
      {
        path: '/users',
        Component: Users
      },
      {
        path: '/:w+',
        Component: NotFound
      }
    ]

    那么你当然希望在输入 /users 这个更精确的路径的时候,走上面的规则,而下面则作为兜底规则。在旧版的 Vue Router 中需要通过路由声明的顺序来保证这个行为,而新版则无论你怎样放置,都会按照得分系统来计算该匹配哪个路由。

    甚至专门有 Path Ranker[3] 这个网页来帮助你计算路由的优先级得分。

    a031cb68bc88a55d1949cdf1a957cc01.png

    在测试用例中,ssh 找到了一个更具体的优先级得分排名,可以先感受一下:

    it('works', () => {
      checkPathOrder([
        '/a/b/c',
        '/a/b',
        '/a/:b/c',
        '/a/:b',
        '/a',
        '/a-:b-:c',
        '/a-:b',
        '/a-:w(.*)',
        '/:a-:b-:c',
        '/:a-:b',
        '/:a-:b(.*)',
        '/:a/-:b',
        '/:a/:b',
        '/:w',
        '/:w+'
      ])
    })

    简单来说,越明确的路由排名越高,越模糊则反之,无关顺序,非常有意思。

    改进后的导航系统

    新的导航系统更加具有一致性,它改善了滚动行为的体验,使其更加接近原生浏览器的行为。 它还为用户提供了有关导航状态的几乎更多信息,用户可以用这些信息,通过 ProgressBarModal之类的全局 UI 元素让用户的体验变得更好。

    更强大的 Devtools

    多亏了新的Vue Devtools[4],Vue Router 能够和浏览器进行以下更高级的整合。

    1. 时间轴记录路由变化

    69e13808aa0e5364a31df65ddf73462d.png

    2.完整 route 目录,能够帮助你轻松进行调试:

    33b4cc5f1eb9c9a17140d2beb7f2fa27.png

    更好的路由守卫

    next说拜拜,现在确认跳转不需要再手动执行这个函数了,而是根据你的返回值来决定行为。同样支持异步返回 Promise。

    现在的路由守卫 API 更加友好且合理了,可以完美利用 async await 做异步处理,比如这样:

    router.beforeEach(async (to, from) => {
      // canUserAccess() returns `true` or `false`
      return await canUserAccess(to)
    })

    一致的编码

    编码方式(Encoding)做了统一的适配,现在将在不同的浏览器和路由位置属性(params, query 和 hash)中保持一致。 
    作为参数传递给 router.push() 时,不需要做任何编码,在你使用 $route 或 useRoute()去拿到参数的时候永远是解码(Decoded)的状态。
    

    迁移成本低

    Vue Router 4 主要致力于于在改善现有 Router 的同时保持非常相似的 API,如果你已经很上手旧版的 Vue Router 了,那你的迁移会做的很顺利,可以查看文档中的完整迁移指南[5]。

    展望未来

    在过去的几个月中,Vue Router 一直稳定而且好用,现在它可以做些更好玩的事儿了:

    • 使用现有工具(Vetur,Vite,Devtools 等)得到更好的开发体验。
    • 与 Suspense 等现代功能更好地集成。
    • RFCs 和社区共同探讨出更好用的 API。
    • 开发更轻型的版本。

    试试看

    等不及想试试 Vue Router 4 了?这里有CodeSandbox[6],还有集成好 Tailwind CSS 的 Vite 模板[7],或使用CLI[8]来开始你的游玩。

    想学习 Vue Router 4 的更多先进理念了?请立刻查看我们的新文档[9]。 如果您是现有的 Vue 2.x 用户,请直接转到迁移指南[10]。

    发布地址:https://github.com/vuejs/vue-router-next/releases/tag/v4.0.0

    摘自【前端劝退师】

    展开全文
  • 前言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月份)。嘴上说着学不动,身体...
  • vue3

    2020-12-30 09:50:33
    3. Gamma 正式发布的候选版本 4. Final 正式版 5. plus 增强版 6. full 完全版 7. Trial 试用版(一般有时间或者功能限制) 二. 介绍 1. 学一门新鲜的技术,就像练习王者荣耀新出的英雄一样, 探索他的好玩之处可以...
  • Vuejs 3.0 在北京时间2020年9月19日凌晨,终于发布了 3.0 版本,代号:One ...Vue3.0发布链接​github.comVue 是当前非常流行的框架,Vue3.0更是酝酿了2年多的时间,经过2600多次commit,600多次PR,中间也发布了...
  • 今天,我们很荣幸地宣布 Vue.js 3.0“One Piece”的正式发布。这个框架的新的主要版本提供了改进的性能、更小的捆绑大小、更好的 TypeScript 集成、用于处理大规模用例的新 API,以及为框架未来的长期迭代奠定了坚实...
  • vue3初尝试

    2020-06-18 21:01:38
    目前vue3还处于beta版本,离正式版的发布还有一段时间.在此之前我们可以对vue3新特性CompositionAPI做一个demo练习,加深对其具体应用的场景的理解. 相关文档API 完整项目地址 Demo需求 上图为Demo最终展现...
  • 作为新特性 Composition API ,在 Vue3 正式发布之前一段时间就发布过了。 距文档介绍, Composition API 是一组低侵入式的、函数式的 API,使得我们能够更灵活地「组合」组件的逻辑。 不仅在 Vue 中,在其他的框架...
  • 前言vue3已经正式发布有一段时间了,本着学习使人进步的原则,就开始了vue3的实践之路。vue3推出了一个web开发构建工具vite,那就放弃使用vue-cli尝尝鲜吧。vue3项目也是用了typescript,并且现在ts也很火,就正好...
  • Vue3 插件开发详解

    2020-06-08 10:08:09
    vue3.0-beta 版本已经发布了一段时间了,正式版本据说在年中发布(直播的时候说的是年中还是年终,网上传闻说是6月份)。嘴上说着学不动,身体却很诚实地创建一个vue3的项目,兴致勃勃地引入 vue2 插件的时候,...
  • 最近在用 Vue3 写一个开源的商城项目,开源后让大家也可以用现成的 Vue3 大型...前文回顾:十三:Vue3教程:Vue3 开源商城项目重构计划正式启动!​zhuanlan.zhihu.com众所周知,Vue 3.0 发布已经有小一个月的时间...
  • 作者:ssh 前端从进阶到入院前言Vue3 Beta版发布了,离正式投入生产使用又更近了一步。此外,React Hook在社区的发展也是如火如荼。一时间大家都觉得Redux很low,都在研究各种各样配合hook实现的新形状态管理模式。...
  • Vue3已经正式发布有一段时间,最近也打算学习一下,这个项目是在学Vue3的时候看到别人分享的demo,然后自己在这基础上修改一下,加深映像和理解; 开发环境 查看vue-cli版本 vue -V 升级vue-cli3到vue-cli4 npm...
  • vue3.0-beta 版本已经发布了一段时间了,正式版本据说在年中发布(直播的时候说的是年中还是年终,网上传闻说是6月份)。嘴上说着学不动,身体却很诚实地创建一个vue3的项目,兴致勃勃地引入 vue2 插件的时候,...
  • 前言Vue3 Beta版发布了,离正式投入生产使用又更近了一步。此外,React Hook在社区的发展也是如火如荼。一时间大家都觉得Redux很low,都在研究各种各样配合hook实现的新形状态管理模式。在React社区中,Context + ...
  • 距离 Vue 3.0 正式发布已经有一段时间了,相信相关生态周边库也正在适配新版本中,像我们熟悉的 Element UI,Vant 等优秀组件库,是否完成了对 Vue 3 的适配呢? 本文整理了目前 (2021年) 支持 Vue 3 的 UI 组件库...
  • 进入2020年,离vue3.0正式发布时间越来越近了。今天,借助尤雨溪大大提前发布的vue3.0源码,老K为大家整理一下vue3.0和vue2.0的区别。vue3的变化可以总结为以下几点:更小更快加强typescript支持Api一致性提高可...
  • 进入2020年,离vue3.0正式发布时间越来越近了。今天,借助尤雨溪大大提前发布的vue3.0源码,老K为大家整理一下vue3.0和vue2.0的区别。vue3的变化可以总结为以下几点:更小更快加强typescript支持Api一致性提高可...
  • 前段时间笔者一直忙于学习Vue3方面新知识,比如如何从vue2.0版本过渡到vue3.0,如何理解vue3.0的新接口Composition API等等,笔者相信随着vue3.0正式版的发布,企业的需求量增大,掌握vue3.0将会是一个必要的升职加薪...
  • 2020.9.18日正式发布,过去已有几个月时间但很多文章都是有错误内容的引导。相信也有很多人感受到。目前主要讲setup函数官方文档 新的改变之setup函数 vue2.x版本功能太散乱造成维护难、可读性也差,更改或者查找...
  • 前言Vue3 Beta版发布了,离正式投入生产使用又更近了一步。此外,React Hook在社区的发展也是如火如荼。一时间大家都觉得Redux很low,都在研究各种各样配合hook实现的...
  • 前言Vue3 Beta版发布了,离正式投入生产使用又更近了一步。此外,React Hook在社区的发展也是如火如荼。一时间大家都觉得Redux很low,都在研究各种各样配合hook实现的...
  • (六)Vue3.0预学习

    2020-08-18 15:10:25
    Vue3.0预学习Vue3要来了Vue2就要过时了吗Vue3Vue2.x马上就要过时了吗Vue3升级内容Proxy实现响应式Object.defineProperty的缺点Proxy实现响应式Proxy基本使用Reflect作用Vue...Vue3正式发布到推广开发,还需要一段时间
  • 这段时间对于前端人来说,最大的惊喜莫过于期盼已久的Vue.js 3.0正式发布了。之前就有很多小伙伴询问vue3组件库相关的问题。趁着vue.js 3.0发布的热潮,就给大家推荐几个Vue3 Beta组件库。性能方面优化路由/图片懒...

空空如也

空空如也

1 2 3
收藏数 55
精华内容 22
关键字:

vue3正式发布时间

vue 订阅