写点什么

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

2020 年 1 月 15 日

尤雨溪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 年 1 月 15 日 08:544359

评论

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

为什么阿里巴巴的程序员成长速度这么快,看完他们的内部资料我明白了

Java迁哥

Java 阿里巴巴 程序员 成长 笔记

week12 homework

burner

数字货币钱包系统定制开发,区块链钱包源码

13530558032

9块钱,构建个私有网盘,关键不限速

华为云开发者社区

网站 OBS 在线网盘 华为云 云存储

分析HiveQL 生成的MapReduce执行程序

任小龙

Mybatis进阶之基础CRUD

不才陈某

mybatis springboot

第 0 期架构师训练营第 8 周作业2-总结

傅晶

usdt支付跑分系统开发|区块链跨境入金系统搭建

WX13823153201

花两个半月吃透这份Java手打面经,成功从外包上岸到京东

Java迁哥

Java 学习 腾讯 面试 资料

隐私计算会成为“金融”向“数科”转型的一剂猛药?

hellompc

迭代技术方案设计文档规范

程序员架构进阶

技术方案

区块链交易所开发源码,数字货币交易所app开发

13530558032

区块链支付系统源码开发,USDT承兑支付平台

13530558032

浅析LR.Net工作流引擎

Learun

.net 敏捷开发 工作流

第 0 期架构师训练营第 8 周作业 1

傅晶

ArCall远比你想象的要强大的多

anyRTC开发者

WebRTC 在线教育 直播 RTC 安卓

LeetCode题解:84. 柱状图中最大的矩形,双循环暴力,JavaScript,详细注释

Lee Chen

LeetCode 前端进阶训练营

某Java程序员在外包公司每天读写删改几年后,发现跳不出来了

Java成神之路

Java spring 程序员 面试 架构师

程序员如何获取一份高薪工作?阿里P8大牛给你一些中肯的建议

Java迁哥

Java 华为 程序员 面试 资料

区块链钱包开发方案|多币种钱包搭建app

WX13823153201

区块链钱包开发

架构设计复杂度来源

escray

学习 从零开始学架构 架构师预科班

2019年我最喜欢的三款数码产品。

徐说科技

手机 苹果

鲲鹏迁移第一批吃螃蟹的人,践行技术国际化

华为云开发者社区

鲲鹏920 服务器 华为云 ARM芯片 X86

usdt承兑支付系统开发|usdt跑分系统搭建

WX13823153201

USDT承兑支付系统开发

35K成功上岸华为商城事业部,只因学透了这几个开源的商城项目

Java迁哥

Java 华为 源码 资料 商城项目

前阿里P8甩我一份内部SpringCloud笔记手册,真香

Java成神之路

Java 阿里巴巴 程序员 Spring Cloud 架构师

合约跟单系统开发,数字货币合约跟单软件搭建

13530558032

LR.JAVA平台商业可视化大屏(BI)设计演示

力软.net/java开发平台

软件开发 BI 数据可视化 Java 分布式

数字货币交易所系统搭建源码|交易所开发公司

WX13823153201

数字货币交易所系统搭建

高效程序员的45个习惯:敏捷开发修炼之道(7)

石云升

敏捷开发 晨会

week12学习总结

burner

Hummer 轻量级跨端技术框架详解及实战

Hummer 轻量级跨端技术框架详解及实战

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