写点什么

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

评论

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

mperf:移动/嵌入式平台算子性能调优利器

MegEngineBot

性能分析 移动端 高性能计算

时序数据库 CeresDB 1.0 正式发布

TRaaS

kafka-再均衡原理

领创集团Advance Intelligence Group

kafka 3.X apache 社区 再均衡协议

APISIX 是怎么保护用户的敏感数据不被泄露的?

API7.ai 技术团队

安全 api 网关 APISIX 敏感数据

玩转Angular系列:组件间各种通信方式详解

echeverra

angular

2022 IoTDB Summit:IoTDB PMC Chair 黄向东《Apache IoTDB 1.0 全新版本》

Apache IoTDB

数据库·

更安全更稳定,阿里云斩获多项云系统稳定安全运行优秀案例

阿里巴巴云原生

阿里云 云原生 安全

MyDumper工具介绍

领创集团Advance Intelligence Group

MySQL 多线程 dba MyDumper

快速排查IoT物联网平台问题实用手册——实践类

阿里云AIoT

物联网

蚂蚁集团智能可观测平台 HoloInsight 正式开源

TRaaS

从ChatGPT到MOSS,《流浪地球2》是否会照进现实?

加入高科技仿生人

人工智能 AI 智能化 ChatGPT New Bing

如何提高大数据传输的安全性

镭速

IoT存量设备跨账号迁移,动态切换region节点,公共区到企业实例迁移方案——实践类

阿里云AIoT

物联网 API 应用服务中间件 储存

一张自拍即可实现变老变年轻,带你感受时光流逝之美

江户川码农

Python 人工智能 计算机视觉 图像处理 百度飞桨

打谱编曲软件GuitarPro8.0中文版下载

茶色酒

GuitarPro

2022 IoTDB Summit:中国核电刘旭嘉《工业时序数据库 Apache IoTDB 在核电的应用实践》

Apache IoTDB

用户案例 数据库·

Zepoch节点持有人数大突破,Nautilus Chain 或有海量空投

股市老人

业务系统从阿里云物联网平台获取设备数据的3种方案——实践类

阿里云AIoT

数据库 物联网 存储 数据处理 消息中间件

Easyrecovery16汉化版电脑数据恢复软件

茶色酒

EasyRecovery16

IoT离线设备云端控制指令消息触达方案——实践类

阿里云AIoT

物联网 API 网络性能优化

Log4j on Cloud 如何在云上看日志

纳速云

elasticsearch Serverless 日志 log4j java

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