前言2019年11月11日,在VueToronto2019大会上,@尤雨溪分享了《Design Principles of Vue 3.0》。本PPT作者@尤雨溪,翻译作者黑叔666。(注:由于黑叔英语基础薄弱,如有更好的翻译,欢迎在评论区留言!)翻译:VUE3.0设计原则翻译:快速状态更新翻译:全球每周有100万活跃用户!翻译:NPM每周下载量:比去年增长100%+翻译:LouisVuitton使用Vue和Nuxt技术翻译:Vue设计挑战从JQuery框架转过来的初学者从另一个框架转过来的专业人士从另一个框架转过来的老手后端工程师正在寻找用于轻量级前端解决方案架构师为整个组织选择一个基础与遗留应用程序相结合的交互性一次性项目需要快速周转但不需要长期团队维护可预测复杂性的中型项目大型项目预计会持续数年,团队运动翻译:设计包括解决简单性的权衡优化的API导致大规模的可维护性问题繁重的工具增加了进入壁垒并限制了用例更多的功能导致更多的膨胀翻译:必须从多个维度考虑框架翻译:可访问性与可访问性可扩展性译文:CDN构建VSVue脚手架译文:OptionsAPI和CompositingAPI为什么要引入其他方式翻译:TypeScriptvsJavaScriptIsTypeScriptreallynecessary?翻译:WhyTypeScript:优点:优秀的IDE支持自动补全和类型信息优点:缺点:缺点:学习成本缺点:早期开发缓慢翻译:在vue3TS定义中对JS用户也很好组件代码看起来和JS基本一样翻译:作为一个包容性的框架意味着迎合不同背景的用户完全不同。译文:传统虚拟DOM的瓶颈传统VDOM的性能取决于模板的总大小,而不是模板中动态内容的数量。完全动态的渲染逻辑使得很难对用户意图做出安全的最大AOT优化假设。翻译:语法约束导致更好的优化if:v-ifistheonlydynamicnodeinsidev-if:{{message}}istheonlydynamicnode翻译:节点结构变化:v-foroutsidev-for:v-for是唯一的动态节点(每个v-for迭代内部作为片段:{{item.message}}是唯一的动态节点是完全静态的每个块只需要一个平面数组来跟踪动态节点翻译:使用新策略,更新性能取决于动态内容的数量而不是总模板大小翻译:更新性能基准v-for,每次迭代1000次在第一次迭代中,12个DOM元素嵌套3层深,2个动态类绑定,1个动态文本插值,1动态id属性绑定,更新所有动态绑定,平均运行100次:Vue2的困境:每个新功能都会增加每个用户的包大小翻译:在Vue3中,大多数全局api和内部帮助程序作为ES模块导出(可摇树)编译器还为模板生成树更改代码不要为你从未使用过的功能买单具有更大的灵活性和更多的用户机会->活跃的生态系统更小的维护面->团队可以专注于探索新的想法解决集中式设计流程可确保生态系统的一致性和连贯性转化:更大的关注点更高的前期学习障碍不灵活的内置解决方案不适合用例更大的维护面使得引入基本的新想法更加清晰渐进式低电子ntry学习障碍FAQs的文档解决方案翻译:在Vue3中与vue2相同的连贯体验Router、Vuex和test-utils将收到相应的更新以符合这一愿景甚至更低级别的灵活性关于翻译器的一流自定义渲染器和自定义编译器API
