写点什么

尤雨溪 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:545587

评论

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

拼搏一周!刷了1000道Java高频面试题喜提阿里offer,定级P7

Geek_0c76c3

Java 数据库 开源 程序员 架构

OpenMLDB v0.6.0 发布 | 便捷性、可用性大幅提升!

第四范式开发者社区

人工智能 机器学习 数据库 开源 特征

OpenMLDB Airflow Connector:让 MLOps 工作流更自由

第四范式开发者社区

人工智能 机器学习 数据库 开源 特征

OpenMLDB Meetup No.6 回顾 | OpenMLDB+37手游:一键查收特征计算场景案例及进阶使用攻略

第四范式开发者社区

人工智能 机器学习 数据库 开源 特征

花2个月面过阿里Java岗,拿个25K不过分吧?

程序知音

Java java面试 后端技术 秋招 Java面试八股文

还是 “月饼” 后续,玩转炫彩 “月饼” 之 问题说明

矜辰所致

开发板 ESP32-C3 10月月更

【Meetup 明天见】OpenMLDB+37手游:一键查收特征计算场景案例及进阶使用攻略

第四范式开发者社区

人工智能 数据库 开源 时序数据库

决策 AI:以高效落地为目标的工程技术

第四范式开发者社区

机器学习 数据库 时序数据库 特征

如何选择架构中的底层工具?OpenMLDB 在 Akulaku 数据驱动中的应用实践给你答案

第四范式开发者社区

人工智能 机器学习 数据库 开源 特征

GitHub下载量从19暴涨到5W,这份架构师学习路线只用了一晚

Geek_0c76c3

Java 数据库 开源 程序员 开发

清华毕业大牛带你深入解析JVM,附五大实战技术文档,总计1024M

Geek_0c76c3

Java 数据库 开源 程序员 开发

首届第四范式 Tech Day 回顾

第四范式开发者社区

人工智能 机器学习 数据库 开源 特征

OpenMLDB 进阶使用攻略和高级特性介绍

第四范式开发者社区

人工智能 机器学习 数据库 开源 特征

深入理解Kubernetes Pod调试

俞凡

最佳实践 云原生

性能测试知识科普(三):压测工具

老张

性能测试

OpenMLDB+Byzer,SQL 也能玩转机器学习全流程

第四范式开发者社区

机器学习 数据库 开源 时序数据库 特征

AICon 2022 | 来杭州和 OpenMLDB 见面吧

第四范式开发者社区

人工智能 机器学习 数据库 时序数据库 特征

贡献者任务第五期,炫酷登场!

第四范式开发者社区

人工智能 机器学习 数据库 开源 特征

阿里打工4年被裁,国庆七天系统查漏补缺期间我总结出了一条对标阿里P5~P7Java程序员体系学习路线

Java永远的神

程序员 程序人生 后端 Java 面试 学习路线

当下的网络安全行业前景到底怎么样?还能否入行?

网络安全学海

程序员 黑客 网络安全 信息安全 渗透测试

秋招Java面试大纲:Java+并发+spring+数据库+Redis+JVM+Netty等

Geek_0c76c3

Java 数据库 开源 程序员 开发

直冲云霄,阿里大牛耗时49天整理12W字面试手册,押题准确率直冲95%

Geek_0c76c3

Java 数据库 开源 程序员 开发

专访 | 赵沁雪:参与开源,不是一个人的战斗

第四范式开发者社区

人工智能 机器学习 数据库 开源 特征

阿里最新产物:亿级流量高并发系统设计(全彩版小册开源)

Java全栈架构师

程序员 程序人生 系统架构 中间件 java面试

开源3天获得业界一致好评!阿里最新产Spring全家桶速成笔记真香

程序员小毕

spring 后端 Java 面试 spring-cloud spring-boot

究竟都是谁在使用?OpenMLDB 落地案例大起底

第四范式开发者社区

人工智能 数据库 开源 时序数据库 特征

专访 | 许伟 ——贡献榜 Top4 也只是“开源小白”

第四范式开发者社区

人工智能 机器学习 数据库 开源 特征

不愧是阿里新产SpringSecurity+OAuth2实战笔记,(用户+案例+认证+框架)打造企业级认证与授权

程序员小毕

程序员 程序人生 springsecurity java面试 安全框架

阿里最新分享 SpringCloudAlibaba 实战小抄(第五版),一代更比一代强

Geek_0c76c3

Java 开源 程序员 数据 开发

倒数三天 | WAIC 滴水湖 AI 开发者创新论坛:当数据库遇上 AI 来啦!

第四范式开发者社区

人工智能 机器学习 数据库 开源 特征

活动紧急插播 | QCon 全球软件开发者大会早班车连线分享

第四范式开发者社区

人工智能 数据库 开源 时序数据库 特征

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