Vue 3.0 重磅发布！为什么开发者依旧偏爱 React?

点击“开发者技术前线”，选择“星标🔝”

在看|星标|留言,  真爱

来自：印记中文团队 & infoQ 

Vue 团队于 2020 年 9 月 18 日晚 11 点半发布了 Vue 3.0 版本，我们连夜对 Release 进行了翻译。以下为译文正文。

当我走进现代前端开发行业的时候，我做了一个每位开发人员都要做的决策：选择一个合适的框架。当时正逢 jQuery 被淘汰，前端开发者们不再用它编写难看的、非结构化的老式 JavaScript 程序了。前端正在走向一个时髦的，流行的，模块化的 JavaScript 框架的新时代。所以我选择了 VueJS。

Vue3.0 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 个月。

   为什么大家偏爱React

下面就是我热爱（现在还是爱着）VueJs 的原因所在。

1. 它将 HTML/CSS/JS 结构结合到一起

目前来看，这是 VueJS 最吸引人的优势。

Vue 文件对初学者非常有吸引力。它易于理解，而且我们很容易将整个 HTML 模板分解为许多 Vue 文件。我一眼就能看出来结构（模板）、行为（脚本）和外观（样式）。

<template>
<div id="myComponent">
  <Counter />
  <span v-if="reading">Hello reader !</span>
</div>
</template>
<script>
import Counter from "@/components/Counter";
export default {
  name: "myComponent",
  components: {
    Counter
  }
}
</script>
<style>
#myDiv {
  display: block;
}
</style>

2. Vuex 

我开始了解状态管理系统时是从 Redux 入门的。它很难学，而且似乎过于复杂。但有了 Vuex，体验就太棒了。

Redux 需要 action、reducer 和 store，而 Vuex 只有 action、mutation 和 store。相比 mutation，reducer 的逻辑实在很难理解，因为在我学习后者时，很少见到优秀的学习资源。在我看来，Vuex 对于新手来说更容易上手。

3. NuxtJS

老实说，受 React NextJS 启发的 NuxtJS 是我在 Vue 项目中的默认框架。我喜欢 Nuxt 项目的约定优于配置的架构。

页面位于 page 目录下。组件位于 component 目录。存储在 store 目录中。中间件则在 middleware 目录里，依此类推。

所有注入都是透明的。所有配置都在 nuxt.config.js 里。太棒了！它使你可以轻松构建启用 SSR 的网站和 SPA。

然而，我又试了一下 React

在学习 Vue 之前我也尝试过 React，但后者初看上去太难学了。随着时间推移，我更深入了解了状态管理机制和 ES6 语言规范，于是我对 React 的看法也有了变化。

我看到有很多文章在推荐 React，甚至我周围的人都在谈论 React，所以我尝试了一下。结果很不错，于是我开始在项目中使用这个框架。下面是我眼中 React 一些最明显的优势。

1. 对 ES6 和 TypeScript 友好

开发人员掌控类、接口和枚举。所以我很容易就能理解 React 组件的工作机制，并知道该如何将其集成到应用程序中。

你也可以在 Vue 中使用 ES6 语法，但是 React 比 Vue 设计得更好。看一下如何在 React 中注册组件：

class MyComponent extends React.Component {
  render() {
    return(<div />)
  }
}

对于 VueJS，你将一个对象传递给 Vue Component 函数：

Vue.component({
  template: `<div></div>`
})

也就是说，现代 React（2020 年）不再用到 class，而是使用函数式组件（和 hooks）。

VueJs 现在提供了 TypeScript 支持。但这种支持不像 React 那样自然，后者只需 一条命令 就能使用 CRA（Create React App）获得 TS 支持。

在 Vue 这边，我们仍然需要一些带有自定义装饰器和特性的第三方包来创建一个真正完善的 TypeScript 应用程序，并且它的官方文档并未包含入门所需的所有信息。

2. JSX

JSX 并非恶魔。有两个流派：亲 JSX 和反 JSX。我不想卷进他们的战争。JSX 可以是天使也可以是恶魔，具体取决于你要如何使用模板。

从我的角度来看，对于开发人员来说，编写像下面这样的 JSX 更加合乎逻辑：

return (
  <div>
    {students.map(student => <p>{student}</p>)}
  </div>
)

比 Vue 的方式更像 HTML：

<div>
  <p v-for="student in students">{{ student }}</p>
</div>

萝卜青菜各有所爱；在我个人看来，JSX 更强大，更灵活。

2. 省事的 Hooks

我开始学习使用 React 组件做开发。问题在于，要创建单个组件作为一个 React 组件类是很费事的。

class MyComponent extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      counter: 0
    }
  }
  render() {
    return(<div/>)
  }
}

函数式组件让你可以使用带有 hooks 的局部状态。它移除了很多样板和无用的构造器。

function MyComponent() {
  const [counter, setCounter] = useState(0)

  return(<div />)
}

React Hooks 简化了状态和其他 React 部件（如 useEffect）的应用，现在我们用不着 componentDidMount 和 componentDidUpdate 了。一些开发人员喜欢 OOP 方法，所以继续使用 class；而其他开发人员则偏爱函数式方法。你可以在项目中同时使用两者！

3. 社区

伟大的项目背后都有很多伟大的头脑。

根据我的经验，React 的文档、第三方工具和模块要比 Vue 多得多。有时，我会为很多 Nuxt 问题而挣扎许久，搜索解决方案的过程中还会发现很多 Next（React）主题。

看看 Github 仓库，数字可以说明一切。

或它们各自的框架：

如果社区能 更快 地修复错误，那么你的代码也就会更可靠。和你遇到相同问题的人越多，你解决问题的速度也会越快。

    免费福利：Vue资料 

有不少读者询问前端的学习资料的，也有不少伙伴都学习前后端分离的知识，苦于找不到好的基础资料，于是我翻箱倒柜，找了一份好的Vue入门视频和笔记pdf，

这给大家找了一份学习资料，很多小伙伴都靠这些资料成功学会了Vue，并且能自己动手写前后端分离项目了，相信你也能行！

资料介绍

Vue入门，可以先看黑马程序员的免费Vue入门课程视频，讲得很不错，4小时长，学完足以入门和写简单项目！

一个Vue的入门视频

一份Vue的PDF

如何获取文档？

1. 识别并关注公众号「中文社区」；
2. 在下面公众号后台回复关键字「vue资料」。

👆长按上方二维码 2 秒

回复「vue资料」即可获取上面所有资料

然后Vue入门之后，我们来结合后端对接开发，于是我录制了一个SpringBoot + Vue的开源博客项目，并编写了详细的开发文档，包括前端和后端。只需要按照文档，结合讲解视频，就能一步一步跟着做项目了哈，相信这样能大大加快学习的效率！

后端文档：

前端文档：

讲解视频：

如何获取视频？

1. 识别并关注公众号「Github中文社区」；
2. 在下面公众号后台回复关键字「vue」。

👆长按上方二维码 2 秒

回复「vue」即可获取上面所有资料

译者：QC-L

原文：https://github.com/vuejs/vue-next/releases

作者：Vue 团队

译文：https://zhuanlan.zhihu.com/p/254219538

本文最初发布于 Medium 网站，经原作者授权由 InfoQ 中文站翻译并分享。

END

前线推出学习交流群，加群一定要备注：

研究/工作方向+地点+学校/公司+昵称（如大前端+上海+上交+可可）

根据格式备注，可更快被通过且邀请进群，领取一份专属学习礼包

扫码加我微信进群

大厂内推和技术交流，和前辈大佬们零距离

历史推荐

点个在看吧