Vue3.0 设计理念
2021-11-05 18:09:09 0 举报AI智能生成
Vue3.0 设计理念
作者其他创作
大纲/内容
快速状态更新
Vue 面临的挑战
有非常多样化的用户
有非常多样化的使用场景
<ul><li>将交互性结合到遗留的应用程序上<br></li><li>一次性项目需要快速周转，但不需要长期团队维护<br></li><li>可预测复杂度的中型项目<br></li><li>大型项目预计将持续数年，团队运作<br></li></ul>
设计包括解决权衡问题
<ul><li>为简单性而优化的API会导致会可维护性问题<br></li><li>重型工具增加了进入壁垒并限制了用例<br></li><li>更多的功能会导致更多的臃肿<br>...</li></ul><br>
框架必须<br>在多个维度上<br>进行考虑<br>
可接近性 VS 可扩展性
CDN构建 VS Vue脚手架
选项API vs 合成API
选项 API
优点
直观易用<br>
缺点
大规模应用程序中的可扩展性问题<br>
合成 API
优点
<ul><li>纯添加剂（不需要重写项目，它可以完美存在在一个已经运行起来的代码库中）<br></li><li>可与选项API一起使用<br></li><li>提供更灵活的代码组织和逻辑重用功能<br></li><li>提供出色的typescript支持<br></li></ul>
TypeScript vs JavaScript
ts
优点
<ul><li>优秀的IDE支持自动补全和类型信息<br></li><li>重构大型项目中旧代码时会更有信心<br></li></ul>
缺点
<ul><li>学习成本<br></li><li>开发初期会缓慢些（必须思考变量类型）</li></ul>
在 Vue3 中
<ul><li>TS定义对JS用户也有好处<br></li><li>使用TS和JS的组件代码看起来基本相同<br></li></ul>
模板 vs JSX
为什么提供两种
作为一个包容的框架意味着对于不同背景的用户都易于使用
<b><font color="#16884a">模板允许我们获得更好的性能</font></b>
传统 虚拟dom 的瓶颈
尽管Vue可以确保组件树级别的更新最少，但它仍然是<font color="#924517" style="font-weight: bold;">每个组件实例中的完全diff</font><br>
传统VDOM的性能<b><font color="#924517">取决于模板的总大小，而不是模板中动态内容的数量</font>。</b><br>
完全动态的渲染函数逻辑<br>使得很难对用户意图进行安全的假设<br>来最大化 AOT 优化<br>
AOT 与 JIT
<font color="#16884a"><b> Ahead-of-Time (AOT) </b> </font><b><font color="#16884a">Just-in-Time (JIT) </font><br></b><br>the<b> "time"</b> referred to in those terms is <b>"runtime"</b><br><br>a<b> <font color="#924517">JIT </font></b><font color="#924517">compiler compiles the program <b>as it is running</b></font><br><font color="#5c5c5c">an</font><font color="#924517"> <b>AOT </b>compiler compiles the program<b> before it is running</b></font><br>
模板的语法约束促使更好的优化
<font color="#0076b3">block tree</font>
<ul><li>以结构化指令作为界限将模板分割成嵌套的块<br></li><li>每个块中node结构是静态的<br></li><li>每个块只需要一个扁平数组来跟踪动态节点<br></li></ul>
<font color="#5c5c5c">使用新策略，更新性能由</font><b style=""><font color="#0076b3">动态内容的数量</font></b><font color="#5c5c5c">而不是总模板大小决定</font>
能力 vs 大小
Vue2的困境
每个新特性都会增加每个用户的包大小
在Vue3中
<ul><li>大多数全局api和内部帮助程序以<b>ES模块</b>的方式被提供（<b> tree-shakable</b>）<br></li><li>编译器<b>也为模板生成 tree-shakable 的代码</b><br></li><li><font color="#c41230">不需要为你从未使用过的功能付出代价</font><br></li></ul>
tree shaking 是一个术语，通常用于<b>描述移除 JavaScript 上下文中的未引用代码(dead-code)</b>。
框架一致性 vs 低层韧性
库 vs 框架<br>原始 vs 抽象<br>集市 vs 大教堂<br>
小职责范围
优点
刚开始需要理解的概念少
更好的灵活性 -> 活跃的生态系统，构建任意复杂的系统
团队拥有更小的维护层面，可以专注于他们认为重要的东西
缺点
用一个简单的概念去解决一个本来就很复杂的问题时需要做更多的钻研工作
模式自然会随着时间的推移而出现并成为半必需的知识，但通常没有在官方文档中提到
用 react 的过程中必须了解 redux，高阶组件，render props，hooks 以及在 js 中使用 css 的各种方式
生态系统发展太快可能会导致碎片化和持续的变动
大职责范围
优点
大多数常见问题可以被内置的抽象解决
集中式的设计流程确保了它与其生态系统的一致性：遇到具体问题的时候，不必去找一些不同的解决方案，只要看看框架让你做什么。<br>
缺点
更高学习门槛
如果内置解决方案不适合当前用例，它会变得不灵活
引入一些底层新想法的成本更高，因为太多的地方都要保持一致性
维护负担大
渐进式框架
优点
使用分层设计，允许以渐进式的方式选择特性: 如果不需要路由、状态管理、构建步骤，可以使用没有任何特性的 Vue，只需要将 Vue.js 加载进页面中，就可以使用
低学习门槛
允许更多的人参与 Web 开发并专注开发，而不是先要学习一堆当前开发可能不需要的概念
对于常见问题文档上有解决方案
缺点
维护负担大
生态系统不会像小职责范围框架那样多样化
在Vue3中
<ul><li>与vue 2相同的连贯体验<br></li></ul> router，Vuex&test-utils将有相应的更新以符合此版本<br><br><ul><li>甚至更低层次的灵活性<br></li></ul> 一流的自定义渲染器和定制的编译器api<br>
参考
https://juejin.im/post/5e02043f6fb9a0163a48412f
https://www.bilibili.com/video/av80289692?from=search&seid=4168209864401822538
职业：本科
0 条评论
下一页
