前言
2019年11月11号在Vue Toronto 2019会议上，@尤雨溪做了关于《Design Principles of Vue 3.0》的分享。
本PPT作者@尤雨溪，翻译作者：黑叔666。
（注：由于黑叔英语基础薄弱，若有任何更好的翻译，可评论区留言噢！）
译文：VUE 3.0 的设计原则
译文：快速状态更新
译文：全世界每周有100万活跃用户！
译文：NPM每周下载：超过去年的100%以上
译文：路易威登使用的是Vue和Nuxt技术
译文：Vue设计面临的挑战
译文：VUE有非常多样化的用户
- 刚刚从HTML和CSS有了进展的初学者
- 从JQuery框架的转过来的专业人员
- 从另一个框架转过来的搬砖老兵
- 后端工程师寻找轻量级的前端解决方案
- 架构师为整个组织选择基础
译文：VUE有非常多样化的使用场景
- 将交互性结合到遗留的应用程序上
- 一次性项目需要快速周转，但不需要长期团队维护
- 可预测复杂度的中型项目
- 大型项目预计将持续数年，团队运动
译文：设计包括解决权衡问题
- 为简单性而优化的API会导致大规模的可维护性问题
- 重型工具增加了进入壁垒并限制了用例
- 更多的功能会导致更多的臃肿
译文：框架必须在多个维度上进行考虑
译文：可接近性 VS 可扩展性
译文：CDN构建 VS Vue脚手架
译文：选项API和合成API
- 为什么要介绍另一种方式
译文：选项API
- 直观易用
- 大规模应用程序中的可扩展性问题
译文：合成API
- 纯添加剂
- 可与选项API一起使用
- 提供更灵活的代码组织和逻辑重用功能
- 提供出色的typescript支持
译文：TypeScript vs JavaScript
- TypeScript真的是有必要吗？
译文：为什么TypeScript：
- Pro：优秀的IDE支持自动补全和类型信息
- Pro：重构大型项目中旧代码的信心
- Cons：学习成本
- Cons：初期发展缓慢
译文：In vue 3
- TS定义对JS用户也有好处
- 使用TS和JS的组件代码看起来基本相同
译文：模板 VS JSX：
- 为什么要提供两种？
译文：作为一个包容的框架意味着去迎合不同背景的用户
译文：另外，模板允许我们获得更好的性能
译文：尽管Vue可以确保组件树级别的更新最少，但它仍然是每个组件实例中的完全diff。
译文：传统虚拟DOM的瓶颈
- 传统VDOM的性能取决于模板的总大小，而不是模板中动态内容的数量
- 完全动态渲染逻辑使得很难对用户意图进行安全的最大AOT优化假设。
译文：语法约束促使更好的优化
译文：让我们开始一个最简单的例子
- 完全没有节点结构更改
- 只有一个动态节点
译文：节点结构改变：v-if
译文：节点结构改变：v-if
- 外面的v-if:v-if是唯一的动态节点
- 里面的v-if:{{message}}是唯一的动态节点
译文：节点结构改变：v-for
- 外面的v-for:v-for是唯一的动态节点（作为碎片）
- 里面的每一个v-for迭代:{{item.message}}是唯一的动态节点
译文：这是一棵大树
- 基于结构指令划分为“块”的模板
- 在每个块中，节点结构是完全静态的
- 每个块只需要一个扁平的数组来跟踪动态节点
译文：使用新策略，更新性能是动态内容的数量而不是总模板大小决定
译文：更新性能基准
- v-for有1000次迭代
- 在每次迭代中,12个DOM元素嵌套3层深,2个动态类绑定,1个动态文本插值,1个动态id属性绑定
- 更新所有动态绑定，平均运行100次
译文：Power vs Size
译文：Vue2的困境：
- 每个新特性都会增加每个用户的包大小
译文：在Vue 3中
- 大多数全局api和内部帮助程序作为ES模块导出被提供（可摇动的树）
- 编译器也为模板生成树可更改代码
- 不要为你从未使用过的功能付费
译文：框架一致性与低层韧性
译文：
- 库 vs 框架
- 原始 vs 抽象
- 集市 vs 大教堂
译文：小范围问题
- 开始使用的概念更少
- 更多的灵活性和更多的用户机会->活跃生态系统
- 较小的维护面-> 团队可以专注于探索新的想法
译文：小范围关注
- 在用简单的概念解决固有的复杂问题时需要更多的管道工程
- 随着时间的推移，模式自然会出现，并成为半必需的知识，但通常没有正式的文档记录
- 生态系统移动过快会导致分裂和持续的变动
译文：大范围问题
- 最常见的问题可以通过内置的抽象来解决
- 集中的设计过程确保了一致和连贯的生态系统
译文：大范围关注
- 更高的前期学习障碍
- 不灵活的内置解决方案不适合用例
- 更大的维护面使引入基本的新思想更加尖
译文：进步的地方
- 分层设计，允许以渐进的方式选择功能
- 低入门学习障碍
- 常见问题的文档解决方案
译文：在Vue 3中
- 与vue 2相同的连贯体验
router，Vuex&test-utils将收到相应的更新以符合此愿景
- 甚至更低层次的灵活性
一流的自定义渲染器和定制的编译器api
关于译者
『前端进阶周刊』- 黑叔666