写点什么

尤雨溪 VueConf 演讲:Vue 3.0 的新特性和设计理念

  • 2020-01-15
  • 本文字数:2474 字

    阅读完需:约 8 分钟

尤雨溪VueConf演讲:Vue 3.0的新特性和设计理念

按照规划,Vue.js框架的主迭代版本将在 2020 年第一季度发布,在VueConf多伦多会议上,Vue.js的创始人兼项目领导者尤雨溪讨论了 Vue 3 背后的设计理念以及新版本中添加的最新特性。


尤雨溪首先提到,与其他流行的框架不同,Vue 与任何公司都没有关联关系,因此 Vue 的开发是由 Vue 开发者社区以及如何更好地满足他们的需求来驱动的。随着 Vue 社区的发展,它也变得多样化起来。尤雨溪将只具有基础 HTML/CSS 知识的初学者、从 jQuery 转移过来的专业人士、从其他框架迁移过来的老手、寻找前端解决方案的后端工程师以及处理大规模软件的架构师进行了识别和区分。


开发社区中人群的多样性其实对应了框架使用场景的多样性。有些开发人员希望将交互性引入到遗留应用中,而有些人则只是想要处理一个一次性的项目,这样的项目有快速的交付周期,但是在维护方面无需过多关注。针对这个话题,架构师想要处理的可能是一个要持续数年的大规模项目,而且在项目的生命周期之内,必然要面对开发人员的变动。


因此,Vue 在设计自身框架时需要面对受众和使用场景多样化的挑战,这必然会导致一定的折衷。Vue 3 背后的一个核心驱动力在于,尽管开发人员都很欣赏 Vue 2 API 易于学习的特点,但是同样的 API 在大规模使用时也出现了可维护性的问题。另一方面,为了满足多样化的需求,持续向框架添加特性会带来 bundle 越来越重的风险。尤雨溪在四个维度对 Vue 3 发布版本的折衷和平衡进行了分组。


第一个折衷就是易用性(approchability)与可扩展性(scalability)。Vue 较低的进入壁垒是采用它的重要因素。尽管 Vue 想要保持对开发人员的易用性,但是在构建大型或复杂组件时,它必须要解决当前基于对象的 API(叫做 Options API)所暴露的问题。InfoQ之前已经介绍过它的新 API(叫做 Component API),该 API 有望更好地为复杂组件分离关注点和可重用性。为了保持 Vue 的易用性,Component API 完全是附加和可选的。


与之类似,按照设计决策,Vue 3 将会使用 TypeScript 编写。除了增强 Vue 代码库的可维护性以及更易于开发者为其贡献之外,该决策还有两个积极的影响。首先,随着 TypeScript 的流行程度不断增加并且已经成为大型项目的常见选择,在 Vue 3 内部使用 TypeScript 能够让开发人员从 Vue 的 TypeScript 定义中收益,同时还得到现代 IDE 的常见代码支持,如 Visual Studio Code 或 WebStorm。其次,即便不用 TypeScript,普通的 JavaScript 用户也能受益于现代 IDE 的代码智能特性。另外,尤雨溪认为 TypeScript 的 Vue 代码其实 90%都是 JavaScript,因为 Vue 类型定义只允许开发人员在其代码的很少一部分上添加标注。


第二个维度的关注点是视图声明。Vue 2 同时支持模板和基于 JSX 的渲染函数(render function)。Vue 社区中熟悉 HTML 和 CSS 的那部分人看重对模板的支持,而没有接触过这些技术的开发人员则更喜欢渲染函数(尤雨溪暗示 iOS 开发人员适合这种方式)。Vue 3 试图利用这两种方式的优点。


一方面,模板提供了性能优化,Vue 3 在将模板编译为优化后的渲染函数时利用了这一点,渲染函数本身会使用一个优化的数据结构来实现 diff 的目的。模板会明确分离静态节点(<p> Lorm ipsum </p>)和动态节点(<span>{{message}}</span>),Vue 3 的 diff 算法可能会在一个特定的数据结构中跟踪动态部分及其依赖。


另一方面,JSX 渲染函数允许开发人员借助 JavaScript 语言完整的表达能力来表达复杂的特殊(ad-hoc)逻辑。虽然在某些情况下,JSX 渲染函数非常实用并且是完全必要的,但是以通用的方式优化它所面临的困难是众所周知的。尤雨溪指出,要实现这一点需要非常聪明的流分析,Prepack Facebook项目就是为了实现这一目标的,但是该项目却因为困难而停滞不前。因此,Vue 3 维持了其双重视图声明机制,同时寻求优化视图模板的 diff 和渲染。


另外一项折衷就是功能的强大与项目的大小。随着每个新特性的加入,每位用户的 bundle 大小都可能会增加。Vue 3 以两种方式来解决这个问题。尤雨溪首先指出,大多数的全局 API 和内部 Vue 辅助程序都会以 ES 模块导出的形式提供,因此能够实现摇树(tree-shakeable)优化(一种代码导入的优化技术,能够实现死代码消除,避免引入根本不会执行的代码,参见维基百科。——译者注)。另外,Vue 3 编译器也会为模板生成摇树优化的代码。尤雨溪给出了如下使用v-model的样例:


<input v-model="text" type="checkbox"><keep-alive></keep-alive>
复制代码


它将会被编译为:


import {vModelCheckbox, KeepAlive, ...} from "vue"...
复制代码


尤雨溪提到,这样的话,Vue 3 核心的大小将会从 20KB 降低到 10KB。开发人员只需要以这个核心为基础,添加他们所需的 Vue 模块即可。


尤雨溪设想的最后一个折衷是一致性与低层级的灵活性。Vue 3 将通过更新Vue RouterVuextest-utils来提供一致的体验,使它们与新的愿景保持一致。Vue 3 还将为开发者提供定义自己的渲染器的能力。React中已经提供了这种能力,并被广泛用于为各种托管环境创建渲染器,如移动设备或终端设备。


Vue 3 还将为自定义模板编译过程输出提供低层级 API。尤雨溪提到,工具可以利用该 API 来提供更好的 DX 或 UX(例如在 UI 标记中强化可访问性特征)。特别是,开发人员可以定义自定义转换,将其用于已解析的模板。虽然 Vue 社区将会推出什么还有待观察,但是如果 Babel 社区有这种迹象的话,那么可以推测增强的模板语言(例如,带有宏功能)有可能会出现。这些低层级工具的第一个应用程序是 Vue 3 模板浏览器,尤雨溪说新的 API 能够让他在一个下午就将其构建出来。


Vue 3 计划在 2020 年第一季度发布。当前的 Vue 2 版本除了服务器端渲染之外,还有一些性能的改善,包括更小的库和更快速、更轻量级的虚拟 DOM 实现,后者 fork 自Snabbdom


完整的演讲可以通过该 地址访问,其中包括一些扩展信息和样例。Vue 是一个用于构建用户界面(包括单页面应用程序)的渐进式框架。Vue.js 遵循 MIT 开源协议。欢迎通过 Vue.js GitHub包对其进行贡献并请遵循Vue.js贡献指南


原文链接:


New Features and Design Principles of Vue 3.0 - Evan You at VueConf Toronto


2020-01-15 08:545821

评论

发布
暂无评论
发现更多内容

Nydus | 容器镜像基础

SOFAStack

Nydus

线上kafka消息堆积,consumer掉线,怎么办?

Java永远的神

Java kafka 程序员 程序人生 消息中间件

开发培训学习后工作好找吗?

小谷哥

女生参加前端培训,学习不如男生吗?

小谷哥

CRAFTS:端对端的场景文本检测器

合合技术团队

人工智能 深度学习 文字识别 端口 文本检测

React高级特性之Context

夏天的味道123

React

react组件深度解读

xiaofeng

React

Git本地提交代码推送远程并未统计贡献量问题分析

Andy

DevEco Device Tool 3.1 Beta1版本发布,产品化配置优化添加自定义烧录器

HarmonyOS开发者

HarmonyOS

js手写题汇总(面试前必刷)

helloworld1024fd

JavaScript

React组件通信

xiaofeng

React

几个常见的js手写题,你能写出来几道

helloworld1024fd

JavaScript

融云「百幄」之视频会议和直播,让办公桌无限延伸

融云 RongCloud

直播 视频会议 通讯

前端一面必会手写面试题指南

helloworld1024fd

JavaScript

大数据培训学习合适吗?

小谷哥

react进阶用法完全指南

xiaofeng

React

豆瓣评分8.0!深入理解Java虚拟机,把GC算法与实现讲得明明白白!

Java永远的神

程序员 面试 JVM GC Java虚拟机

遗留代码处理技巧与案例演示

京东科技开发者

数据结构 重构 代码重构 遗留代码 耦合

大学生想进大厂是通过自学还是java培训

小谷哥

云资源管理平台有哪些?重点推荐哪家?

行云管家

云计算 云服务 云资源 云管理

湘潭等级测评机构有哪些?排名是怎样?

行云管家

等保 等级保护 等保测评 等保测评机构

react-Suspense工作原理分析

夏天的味道123

React

LED显示屏设计和安装比例有什么联系

Dylan

LED显示屏 户外LED显示屏 led显示屏厂家

线上直播 | 未来金融研究所——以应用为中心,重塑金融研发效率

CODING DevOps

云原生 金融

大咖圆桌|研发想要降本增效?来听听专家们的前沿洞见

万事ONES

「Go工具箱」web中想做到cookie值安全?securecookie库的使用和实现原理

Go学堂

golang 开源 程序员 Cookie WEB安全

深圳哪所前端培训机构比较靠谱

小谷哥

工业互联网新引擎——灵雀云 × 英特尔 5G融合边缘云解决方案

York

云原生 5G 边缘计算 架构设计 云边端协同

如何实现对象存储?

MatrixOrigin

数据库 分布式数据库 对象存储 MatrixOrigin MatrixOne

React高级特性之Render Props

夏天的味道123

React

CSS 如何实现五彩斑斓的“呼吸字”?速度拿去装杯!

掘金安东尼

CSS 11月月更

尤雨溪VueConf演讲:Vue 3.0的新特性和设计理念_大前端_Bruno Couriol_InfoQ精选文章