尤雨溪:Vue 3.0的设计原则


尤雨溪:Vue 3.0的设计原则


前言

2019年11月11号在Vue Toronto 2019会议上,@尤雨溪做了关于《Design Principles of Vue 3.0》的分享。

本PPT作者@尤雨溪,翻译作者:黑叔666。

(注:由于黑叔英语基础薄弱,若有任何更好的翻译,可评论区留言噢!)


尤雨溪:Vue 3.0的设计原则



尤雨溪:Vue 3.0的设计原则



尤雨溪:Vue 3.0的设计原则


译文:全世界每周有100万活跃用户!


尤雨溪:Vue 3.0的设计原则


译文:NPM每周下载:超过去年的100%以上


尤雨溪:Vue 3.0的设计原则


译文:路易威登使用的是Vue和Nuxt技术


尤雨溪:Vue 3.0的设计原则



尤雨溪:Vue 3.0的设计原则


  • 刚刚从HTML和CSS有了进展的初学者
  • 从JQuery框架的转过来的专业人员
  • 从另一个框架转过来的搬砖老兵
  • 后端工程师寻找轻量级的前端解决方案
  • 架构师为整个组织选择基础


尤雨溪:Vue 3.0的设计原则


  • 将交互性结合到遗留的应用程序上
  • 一次性项目需要快速周转,但不需要长期团队维护
  • 可预测复杂度的中型项目
  • 大型项目预计将持续数年,团队运作


尤雨溪:Vue 3.0的设计原则


  • 为简单性而优化的API会导致大规模的可维护性问题
  • 重型工具增加了进入壁垒并限制了用例
  • 更多的功能会导致更多的臃肿


尤雨溪:Vue 3.0的设计原则



尤雨溪:Vue 3.0的设计原则

尤雨溪:Vue 3.0的设计原则



尤雨溪:Vue 3.0的设计原则


译文:CDN构建 VS Vue脚手架


尤雨溪:Vue 3.0的设计原则


  • 为什么要介绍另一种方式


尤雨溪:Vue 3.0的设计原则


  • 直观易用
  • 大规模应用程序中的可扩展性问题


尤雨溪:Vue 3.0的设计原则


  • 纯添加剂
  • 可与选项API一起使用
  • 提供更灵活的代码组织和逻辑重用功能
  • 提供出色的typescript支持


尤雨溪:Vue 3.0的设计原则


译文:TypeScript vs JavaScript

  • TypeScript真的是有必要吗?


尤雨溪:Vue 3.0的设计原则


  • Pro:优秀的IDE支持自动补全和类型信息
  • Pro:重构大型项目中旧代码的信心
  • Cons:学习成本
  • Cons:初期发展缓慢


尤雨溪:Vue 3.0的设计原则


  • TS定义对JS用户也有好处
  • 使用TS和JS的组件代码看起来基本相同


尤雨溪:Vue 3.0的设计原则


  • 为什么要提供两种?


尤雨溪:Vue 3.0的设计原则


译文:作为一个包容的框架意味着去迎合不同背景的用户


尤雨溪:Vue 3.0的设计原则


译文:另外,模板允许我们获得更好的性能


尤雨溪:Vue 3.0的设计原则


译文:尽管Vue可以确保组件树级别的更新最少,但它仍然是每个组件实例中的完全diff。


尤雨溪:Vue 3.0的设计原则


  • 传统VDOM的性能取决于模板的总大小,而不是模板中动态内容的数量


尤雨溪:Vue 3.0的设计原则


  • 完全动态渲染逻辑使得很难对用户意图进行安全的最大AOT优化假设。


尤雨溪:Vue 3.0的设计原则



尤雨溪:Vue 3.0的设计原则


  • 完全没有节点结构更改
  • 只有一个动态节点


尤雨溪:Vue 3.0的设计原则



尤雨溪:Vue 3.0的设计原则


  • 外面的v-if:v-if是唯一的动态节点
  • 里面的v-if:{{message}}是唯一的动态节点


尤雨溪:Vue 3.0的设计原则

尤雨溪:Vue 3.0的设计原则


  • 外面的v-for:v-for是唯一的动态节点(作为碎片)
  • 里面的每一个v-for迭代:{{item.message}}是唯一的动态节点


尤雨溪:Vue 3.0的设计原则


  • 基于结构指令划分为“块”的模板
  • 在每个块中,节点结构是完全静态的
  • 每个块只需要一个扁平的数组来跟踪动态节点


尤雨溪:Vue 3.0的设计原则

尤雨溪:Vue 3.0的设计原则


译文:使用新策略,更新性能是动态内容的数量而不是总模板大小决定


尤雨溪:Vue 3.0的设计原则


  • v-for有1000次迭代
  • 在每次迭代中,12个DOM元素嵌套3层深,2个动态类绑定,1个动态文本插值,1个动态id属性绑定
  • 更新所有动态绑定,平均运行100次


尤雨溪:Vue 3.0的设计原则



尤雨溪:Vue 3.0的设计原则


  • 每个新特性都会增加每个用户的包大小


尤雨溪:Vue 3.0的设计原则


  • 大多数全局api和内部帮助程序作为ES模块导出被提供(可摇动的树)
  • 编译器也为模板生成树可更改代码
  • 不要为你从未使用过的功能付费


尤雨溪:Vue 3.0的设计原则



尤雨溪:Vue 3.0的设计原则


  • 库 vs 框架
  • 原始 vs 抽象
  • 集市 vs 大教堂


尤雨溪:Vue 3.0的设计原则

尤雨溪:Vue 3.0的设计原则


  • 开始使用的概念更少
  • 更多的灵活性和更多的用户机会->活跃生态系统
  • 较小的维护面-> 团队可以专注于探索新的想法


尤雨溪:Vue 3.0的设计原则


  • 在用简单的概念解决固有的复杂问题时需要更多的管道工程
  • 随着时间的推移,模式自然会出现,并成为半必需的知识,但通常没有正式的文档记录
  • 生态系统移动过快会导致分裂和持续的变动


尤雨溪:Vue 3.0的设计原则


  • 最常见的问题可以通过内置的抽象来解决
  • 集中的设计过程确保了一致和连贯的生态系统


尤雨溪:Vue 3.0的设计原则


  • 更高的前期学习障碍
  • 不灵活的内置解决方案不适合用例
  • 更大的维护面使引入基本的新思想更加尖


尤雨溪:Vue 3.0的设计原则

尤雨溪:Vue 3.0的设计原则


  • 分层设计,允许以渐进的方式选择功能
  • 低入门学习障碍
  • 常见问题的文档解决方案


尤雨溪:Vue 3.0的设计原则

尤雨溪:Vue 3.0的设计原则


  • 与vue 2相同的连贯体验

router,Vuex&test-utils将收到相应的更新以符合此愿景

  • 甚至更低层次的灵活性

一流的自定义渲染器和定制的编译器api


尤雨溪:Vue 3.0的设计原则

尤雨溪:Vue 3.0的设计原则

尤雨溪:Vue 3.0的设计原则

原链接:https://juejin.im/post/5e02043f6fb9a0163a48412f


分享到:


相關文章: