“AI 技术+人才”如何成为企业增长新引擎?戳此了解>>> 了解详情
写点什么

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

评论

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

OAI 5G NR+USRP B210安装搭建

柒号华仔

5G 7月月更

同构+跨端,懂得小程序+kbone+finclip就够了!

Speedoooo

小程序 跨端开发 小程序容器 kbone web同构

BP神经网络(算法整体思路及原理+手写公式推导)

秃头小苏

7月月更

python变量:引用和可变性

AIWeker

Python python小知识 7月月更

安全保护能力是什么意思?等保不同级别保护能力分别是怎样?

行云管家

等保 等级保护 安全保护能力

Python 入门指南之深入 Python 流程控制

海拥(haiyong.site)

7月月更

设计你的安全架构OKR

I

安全架构师 安全架构 企业安全 安全治理

代理和反向代理

沃德

程序员 7月月更

体验Python剪辑视频以及相关问题解决,一劳永逸!

迷彩

Python Moviepy视频剪辑处理 7月月更

案例推荐丨安擎携手伙伴,保障“智慧法院”更加高效

科技热闻

面试题:AOF重写机制,redis面试必问!!!

知识浅谈

redis 底层原理

(1)长安链学习笔记-启动长安链

MetaForce原力元宇宙开发搭建丨佛萨奇2.0系统开发

开发微hkkf5566

前置机是什么意思?主要作用是什么?与堡垒机有什么区别?

行云管家

堡垒机 前置机

浅谈网络安全之文件上传

网络安全学海

网络安全 信息安全 渗透测试 WEB安全 漏洞挖掘

Redis 持久化机制

知识浅谈

redis 面试题

存币生息理财dapp系统开发案例演示

开发微hkkf5566

室内LED显示屏应该怎么选择?这5点注意事项必须考虑在内

Dylan

LED显示屏 户内led显示屏

低代码平台中的数据连接方式(上)

Baidu AICLOUD

前端 低代码 数据格式 数据通信 爱速搭

Efficient ETL Testing

Bright

数据开发 ETL 大数据开发 EasySQL

gRPC三种Java客户端性能测试实践

FunTester

让我们,从头到尾,通透网络I/O模型

C++后台开发

网络编程 IO多路复用 C++后台开发 网络io模型 C++开发

「小程序容器技术」,是噱头还是新风口?

ToB行业头条

spark调优(二):UDF减少JOIN和判断

怀瑾握瑜的嘉与嘉

spark 7月月更

TDengine 社区问题双周精选 | 第二期

TDengine

数据库 tdengine 时序数据库

NFTScan 开发者平台推出多链 NFT 数据 Pro API 服务

NFT Research

NFT 研发团队

COSCon'22 社区召集令来啦!Open the World,邀请所有社区一起拥抱开源,打开新世界~

开源社

开源

【Unity】升级版·Excel数据解析,自动创建对应C#类,自动创建ScriptableObject生成类,自动序列化Asset文件

萧然🐳

游戏开发 Unity 7月月更 Excel工具

深度解读 RocketMQ 存储机制

阿里巴巴中间件

阿里云 RocketMQ 云原生 中间件 消息队列

Spring Cloud源码分析之Eureka篇第三章:EnableDiscoveryClient与EnableEurekaClient的区别(Edgware版本)

程序员欣宸

Java SpringCloud 7月月更

让 Rust 库更优美的几个建议!你学会了吗?

非凸科技

rust API

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